3.vue指令
2017-06-13 本文已影响0人
悟空你又瘦了
- {{ xxx }} 插值表达式
<div id="app">
{{ msg }} <!-- 插值表达式：纯粹是展示一些字符串 -->
</div>
<script>
var vm = new Vue({
el:'#app', // 表示vm对象将来操作的view的区域是 app的这个div中的所有指令
data:{
msg:'王建军' //称之为MVVM中的 Model
}
});
</script>
- v-text（读取文本不能读取html标签）和v-html（能读取html标签）
<body>
<div id="app">
{{ msg }} <!-- 插值表达式：纯粹是展示一些字符串 -->
<span v-text="msg"></span>
<div v-html="htmlMsg"></div>
<button v-on:click="changeMsg">改变msg的值</button>
</div>
<script>
// vm对象就是MVVM中的VM这个角色
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue', //称之为MVVM中的 Model
htmlMsg:'<h1>带有html标签的数据</h1>'
},
//定义方法
methods:{
changeMsg:function(){
//这里只需要修改模型数据msg，就会自定刷新指令中使用的这个msg的地方的值
//注意点：在方法中写的this其实就是vm这个对象
this.msg = '我爱你们';
}
}
});
</script>
- v-model 双向数据绑定（input文本框里面的数值）
<div id="app">
<!-- 实现一个加法计算 -->
<!-- 对于文本框而言不能使用v-text或者v-html，而使用v-model
当通过v-model来绑定视图和模型的时候，当视图中的数据有改变会自动同步到
模型中的数据，反之亦然 （专业术语就是双向数据绑定）-->
<input type="text" v-model="v1" > + <input type="text" v-model="v2" >
<button v-on:click="add">=</button>
{{res}}
</div>
<script>
new Vue({
el:'#app',
data:{
v1:1,
v2:2,
res:0
},
methods:{
add:function(){
this.res = (this.v1-0) + (this.v2-0);
}
}
});
</script>
- 防止闪烁v-text /v-html/v-cloak(配合 css选择器[v-cloak]来实现)
1、使用 v-cloak来解决花括号闪烁，一般会用在比较大的段落
css里：
[v-cloak]{display:none;}
v-cloak直接加在代码里
<div v-cloak>{{msg}}</div>
2、{{msg}} 与 v-text=msg 等价
<span>{{msg}}</span>
<span v-text="msg"></span> //防止闪烁
3、转义时{{{msg}}} 与 v-html等价
<span>{{{msg}}} </span> //转义
<span v-html="msg"></span> //防止闪烁
数据渲染
- v-for（列表渲染） v-for官方具体用法
- 特点：在vue1.0版本中可以通过$index获取到索引值，而在vue2.0中被移除掉了
可以使用track-by="$index"来标记一个当前遍历模板所生产的dom对象的唯一性
- 总结：当一个数据中的值是允许重复的时候，需要在使用v-for的同时加上 track-by="$index"
body>
<div id="app">
<ul>
<li v-for="item in list" track-by="$index">{{item}}</li> ----保证唯一性
</ul>
<button v-on:click="addListValue">添加一个值</button>
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>年龄</th>
</tr>
<tr v-for="user in list1">
<td>{{ $index + 1 }}</td>------获取索引
<td>{{user.name}} -- <span v-text="user.name"></span></td>
<td>{{user.age}}-- <span v-html="user.age"></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[1,2,3,4,4],
list1:[{id:1,name:'ivan',age:31},{id:2,name:'rose',age:28}]
},
methods:{
addListValue:function(){
this.list.push(4);
}
}
});
</script>
- v-if 和 v-show（条件渲染）v-if 和 v-show官方具体用法
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
<body>
<div id="app">
<!-- 利用v-if实现 当年龄大于30的时候显示这个人的信息
在VM调度的时候直接不解析 -->
<div v-if="user.age >30 ">
{{user.name}} ----> {{user.age}}
</div>
<hr />
<!-- 利用v-show 当年龄大于30的时候显示这个人的信息
v-show :仅仅是将当前dom元素添加style="display:none"的样式控制他隐藏-->
<div v-show="user.age >30 ">
{{user.name}} ----> {{user.age}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{name:'ivan',age:40}
}
});
</script>
</body>
属性绑定
- v-bind
- v-bind作用：可以给一个dom元素绑定任何的属性
1. v-bind的完整写法：
<input type="text" v-bind:title="titleVal" >
2. v-bind的简单写法：
<input type="text" :title="titleVal" >
3. v-bind的特殊写法：
原因是在绑定某些属性的时候，这个属性值由固定的字符串加上一个变量来组成的
那么这个时候如果使用 :href=“getnews”+id 那么id是找不到的
所以应该使用:
v-bind="{href:'getnews/'+id}" 写我们的id才会获取到
事件绑定
- v-on
1.事件监听
2.调用方法
3.修饰符（事件，按键，系统）
