VUE介绍
1
2
| VUE是一个前段框架，提高我们的开发效率，是MVVM，这个M是我们的modle，是数据层，
V是view，代表视图，VM是M和V的调度者。
|
官网文档
基本指令
1
2
| 解决赋值表达式{{}}以为网络速度原因闪烁的问题，就是在网络环境慢的情况下会先
出来{{msg}}，再会出现要赋的值
|
1
2
| 赋值文本类型，例如<p v-text="msg">123</p>，其中msg的值是456，此时p的内容会
被清空后赋值456，如果msg的值是html代码段则会被转义输出成html代码段。
|
1
2
| 赋值html类型，例如<div v-html="msg">123</div>，其中msg的值是<h2>456</h2>，
此时div的内容会被替换车大号的456，msg的内容会被输出成代码。
|
1
2
3
| 绑定属性，例如<input type="button" title="" value="submit"/>，如果input中的title
要显示data中的msg，需要这么写<input type="button" v-bind:title="msg" value="submit"/>，
其中v-hind:title可以简写成:title
|
1
2
| 绑定事件，例如<input type="button" title="" v-on:click="submitForm" value="submit"/>，
其中submitForm是我们methods中定义的方法，v-on:click可以简写成@click
|
1
2
| 该例子中使用了箭头函数，解决了内部方法this的指向问题，如果不使用箭头函数，则this是内部的，
不是外部的this，如果使用外部的this则需要转存，使用箭头函数则此时的this就是外部的this。
|
事件修饰符
| 修饰符 |
备注 |
| .stop |
阻止冒泡（阻止外部行为） |
| .prevent |
阻止默认事件 |
| .capture |
添加事件侦听器时使用事件捕获机制（从外到内） |
| .self |
只有事件在该元素本身（比如不是子元素）触发时触发回调 |
| .once |
事件只触发一次 |
1
2
3
| 区别是:
.self只是阻止自身的冒泡，不能阻止所在的子元素和父元素的冒泡
.stop是阻止当前所有的父元素的冒泡。
|
v-model（双向数据绑定）
1
2
| v-model可以显示表单元素和model数据的双向绑定，v-model只能运用在表单元素中，
例如：input select redio checkbox textarea等。
|
使用class样式
1
| <h2 :class="['gray','border']"></h2>
|
1
| <h2 :class="['gray','border',isXieTi ? 'xieti' : '']">this is h2 </h2>
|
1
| <h2 :class="['gray','border',{'xieti':isXieTi}]">this is h2 </h2>
|
1
2
3
| 直接使用对象可带引号可不带引号，如果名字在中画线则必须使用引号
<h2 :class="{'gray':true,'border':true}">this is h2 </h2>
<h2 :class="{gray:true,border:true}">this is h2 </h2>
|
1
| <h2 :class="classObj">this is h2 </h2>
|
使用内联样式
1
| <h2 :style="{color:'red','font-size':'30px'}">this is h2 </h2>
|
1
2
3
4
5
| <h2 :style="styleObj">this is h2 </h2>
data: {
styleObj:{color:'green','font-size':'30px'}
}
|
1
2
3
4
5
6
| <h2 :style="[styleObj,styleObj1]">this is h2 </h2>
data: {
styleObj:{color:'green','font-size':'30px'},
styleObj1:{'font-style':'italic'}
}
|
v-for
1.v-for循环普通数组
v-for=”iteam in arr”
1
2
3
4
5
6
7
8
9
10
| <div :class="['border']">
<span>使用v-text</span>
<p v-for="aa in arr" v-text="aa">
</p>
</div>
data: {
arr:[1,2,3,4]
}
|
v-for=”(item index) in arr”
1
2
3
4
5
6
7
8
9
10
| <div :class="['border']">
<span>使用v-text 获取索引和值</span>
<p v-for="(aa,i) in arr" v-text="'索引是：' + i + '每一项值是：' + aa">
</p>
</div>
data: {
arr:[1,2,3,4]
}
|
2.v-for循环对象数组
v-for=”item in arr”
v-for=”(item index) in arr”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 对象数组和普通数组差不多，当取对象数组时，其中的item就是对象，可以直接点出来我们的属性。
<div :class="['border']">
<span>使用v-text 获取索引和值</span>
<p v-for="(aa,i) in arr" v-text="'索引是：' + i + '，id是：' + aa.id + '，name是：' + aa.name">
</p>
</div>
data: {
arr:[
{'id':'1',name:'张三1'},
{'id':'2',name:'张三2'},
{'id':'3',name:'张三3'},
{'id':'4',name:'张三4'}
]
}
|
3.v-for循环对象
v-for=”(val,key) in user”
v-for=”(val,key,index) in user”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| v-for循环对象，其实就是遍历对象的key和val和index，可以传递三个或者两个变量，第一个是val，第二个是key，第三个是index，索引不太常用。
<div :class="['border']">
<span>获取对象的key和val</span>
<p v-for="(val,key) in user" v-text="'key是' + key + '，val是：' + val ">
</p>
</div>
<div :class="['border']">
<span>获取对象的key和val和index</span>
<p v-for="(val,key,index) in user" v-text="'key是' + key + '，val是：' + val + '，索引是：' + index">
</p>
</div>
data: {
user: {'id':'1',name:'张三',age:18,sex:'F'}
}
|
4.v-for循环数字
v-for=”count in 10”
1
2
3
4
5
6
7
8
9
|
count是从1开始的。
<div :class="['border']">
<span>循环数字</span>
<p v-for="count in 10" v-text="'这是第' + count + '次循环'">
</p>
</div>
|
5.v-for中key的使用
1
2
| key表示唯一标识，保证数据唯一性，必须是字符串或者number类型，
需要使用v-bind进行绑定，v-bind:key=""或者:key=""
|
v-if和v-show
1
2
3
| v-if和v-show都是控制元素的隐藏和显示，v-if是重新删除和创建元素，
v-show是给元素增加和减少display:none;的属性，v-if会有较高的切换性能消耗，
v-show会有较高的初始性能消耗。
|
