Vue基础
初体验
<div id="app">{{ message }}</div>
<script>
// 声明式编程
const app = new Vue({
// 用于挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: '你好，李银河'!
}
})
</script>
效果
你好，李银河
列表展示
<body>
<div id="app">
<ul>
<li v-for="item for movies">{{ item }}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '电影名单',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
</body>
效果展示
星际穿越
大话西游
少年派
盗梦空间
浏览器追加数据
app.movie.push('海王')
效果
星际穿越
大话西游
少年派
盗梦空间
海王
什么是MVVM?
mvvm简述
MVVM(Model-view-viewmodel)是一种软件架构模式
- View层：视图层，负责展示信息。
- Model层:数据层，为视图层提供数据便于展示。
- ViewModel层：视图层和数据层的中间层，负责让视图和数据实现绑定，以及在视图层中进行DOM事件监听，可以监听后改变数据层的数据。
vue没有完全遵循MVVM，因为Vue中有个属性:ref，可以通过dom对象，通过ref直接操作视图
Vue生命周期
生命周期:vue从创建到销毁所经历的事情
- beforeCreate：实例从被创建出来之前执行。data和methods中的数据都还没初始化
- created:data和methods都已经初始化好了
- beforeMount：模板在内存中编辑完成了，尚未被渲染到页面中
- mounted:内存中的模板已经渲染到页面，用户已经可以看见内容
- beforeUpdate:内存中的数据已更新，但是页面尚未被渲染
- updated:内存中的数据已更新，并且页面已经被渲染
基础指令
v-once
- 该指令之后不需任何表达式
- 该指令表示元素和组件渲染一次，不会随着数据的改变而改变
<body>
<div id="app">
<h2>{{ message }}</h2>
<h2 v-once>{{ message }}</h2>
</div>
<script src=""../js/vue.js></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script>
</body>
v-html
会把返回的字符串数据以HTML语法的方式解析
<body>
<div id="app">
<h2>{{ link }}</h2>
<h2 v-html='link'></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'Hello World'
}
})
</script>
</body>
结果显示
<a href="http://www.baidu.com">百度一下</a>
百度一下
v-text
文本的方式解析数据，通常接受string类型，一般不用
<body>
<div id="app">
<h2 v-text="message"></h2>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好！李银河'
}
})
</script>
</body>
结果会显示：
你好！李银河
你好！李银河
v-bind
动态绑定，一般简写：
<body>
<div id="app">
<a v-bind:href="link">Vuejs官网</a>
<img v-bind:src="logoUrl" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
logoUrl: 'https://vuejs.org/image/logo.png',
link: 'https://vuejs.org'
}
})
</script>
</body>
结果显示：
v-on
事件监听，简写@
.stop：可以阻止冒泡
.prevent：可以阻止默认事件
.native:监听组件的事件
.once:第一次点击之后有反应
v-if、v-else
判断语句
v-show
类似于v-show
两者区别就是
v-if:条件为false时，会移除带有v-if的dom元素。
v-show：为false时，会给元素添加行内样式display:none
v-for
遍历对象时，顺序是value,key,index
在使用v-for组件时，推荐添加组件key的属性，更新时更高效。
v-model
双向绑定
原理解释
用v-bind可以实现单向绑定，页面也会随着数据的改变而改变。但dom页面的元素不会改变。只需要在页面添加对应的事件监听，传入修改的值赋给数据，就能实现双向绑定。
修饰符
- lazy:延迟加载，再input中点击回车后才会同步更新
- number:把输入框的内容转成数字类型，默认才会转为字符串
- trim：去除内容左右两边的空格
