<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name='viewport' content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>document1</title> <script src='../lib/vue-2.4.0.js'></script> <!-- 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 --> </head> <body> <!-- 将来new 的 vue 的实例 --> <div id='app'> {{msg}} </div> <script> // 创建一个vue的实例 var vm = new Vue({ el:'#app', //表示，当前我们new 的vue 实例，要控制页面上的哪个区域 data:{//data 属性中，存放的是el中要用到的数据 msg:"vue视频课程", }, methods:{ } }) </script> </body> </html>
1、 mvc mvvm
mvc model(数据操作) v(视图) c(控制器)
mvvm m(data) v(html内容 div) vm(new Vue())
2、 学习基本代码
代码,如上
3、 差值表达式 v-cloak v-text v-html
v-cloak:说明该标签是插值表达式，可以定义样式，可以解决网速慢时闪烁问题
[v-cloak]{
display: none;
}
v-text='变量'和{{}}用法类似，区别v-text默认没有闪烁问题，v-text会覆盖元素中原本的内容
v-html='变量' 若data属性含html标签会编译出来，而不是直接输出
v-bind:属性 vue中用于绑定属性的指令 缩写 :属性=
v-on:事件 vue中绑定事件指令 缩写 @事件=
案例：响马灯
4、事件修饰符，如 <input type="button" value="戳他" @click.stop="btnHandler">
stop 防止冒泡，从里到外
prevent 阻止默认事件
capture 触发捕获机制，从外到里
self 实现只有点击当前元素时候，才会触发事件处理函数,和stop不同，若冒泡遇上self元素会跳过，若外面还包裹元素，冒泡仍然会继续，但stop就此停止。
once 只触发一次事件处理函数 <a href="http://www.baidu.com" @click.prevent.once="linkClick">
5、v-model='msg' 数据的双向绑定 v和m互相影响
<input type="text" style="100%;" v-model="msg">
案例：计算器
6、class类样式
1/<h1 class="red thin">
2/<h1 :class="['thin', 'italic']">
3/<h1 :class="['thin', 'italic', flag?'active':'']">或 <h1 :class="['thin', 'italic', {'active':flag} ]">
//flag mv 定义三元表达式，后面是缩写
4/<h1 :class="classObj"> 或<h1 :class="{ red: true, thin: true, italic: false, active: false }"> //对象
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
7、style内联样式
1/<h1 :style="{ color: 'red', 'font-weight': 200 }">或<h1 :style="styleObj1">
2/<h1 :style="[ styleObj1, styleObj2 ]">
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
8、v-for遍历
1/ 遍历普通数组
<p v-for="item in list">{{item}}</p>
2/ 需要索引
<p v-for="(item, i) in list">
索引值：{{i}} --- 每一项：{{item}}
</p>
data: {
list: [1, 2, 3, 4, 5, 6]
},
3/ 遍历复杂数组
<p v-for="(user, i) in list">
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
</p>
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
}
4/ 遍历对象
<p v-for="(val, key, i) in user">
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
</p>
data: {
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
5/迭代数字
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
6/ key的使用注意方式，标志遍历次序唯一标识符,
<p v-for="item in list" :key="item.id">当选中元素后，在数组内添加减少元素的时候，就不会错乱
注意：v-for 循环的时候，key 属性只能使用 number获取string
9、v-if / v-show
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
data: {
flag: false
},
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->