-
插值表达式
数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式
<body>
<div id="app">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'xixi',
age: 30
}
})
</script>
</body>
-
v-text
v-text可以将一段文本渲染到指定的元素中
<body>
<div id="app">
<p v-text='name'></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'xixixi'
}
})
</script>
</body>
-
v-html
少使用v-html指令，因为使用它很容易导致 XSS 攻击。只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
<body>
<div id="app">
<p v-html='name'></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '<h1>xixixi</h1>'
}
})
</script>
</body>
-
v-bind
可以给html元素或者组件动态地绑定一个或多个特性。 使用方式：v-bind:属性名="data里的属性" 简写(推荐)： ：属性名="data里的属性
<body>
<div id="app">
<!-- v-bind的简写方式 :属性名=“data里面的属性” 推荐写法-->
<img :src="image" alt="">
<a :href="'del.php?id='+id">删除</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack',
image: './head.jpg',
id: 11
}
})
</script>
</body>
-
v-for
v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
注意：以下变动不会触发视图更新
1. 通过索引给数组设置新值
2. 通过length改变数组
解决：
1. Vue.set(arr, index, newValue)
2. arr.splice(index, 1, newValue)
v-for渲染数组
在标签的属性位置写上v-for="(item, index) in arr"
item表示数组中的每一项，这个名字可以随意取，
arr表示需要遍历的数组
index表示数组项的索引值
<body>
<div id="app">
<h2 v-for='(item,index) in users' :key='index'>{{item.name}}:{{item.age}}索引：{{index}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
users: [{
name: '小红',
age: 12
}, {
name: '小明',
age: 20
}]
}
})
</script>
v-for渲染对象
在标签的属性位置写上v-for="(value, key, index) in obj"
value表示对象键的值，这个名字可以随便取，
key表示对象的键
index表示对象的索引值
obj表示需要遍历的对象
<div id="app">
<p v-for='(value,key,index) in dog' :key='index'>{{key}}:{{value}}索引:{{index}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
dog: {
name: 'yoyo',
age: 2
}
}
})
</script>
- v-model
v-model指令用来双向数据绑定：就是model和view中的值进行同步变化
在表单控件或者组件上创建双向绑定
v-model仅能在如下元素中使用：
input
select
textarea
components（Vue中的组件）
<div id="app">
<!-- v-model只能在input/textarea/selet -->
<input type="text" v-model="name">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack'
}
})
</script>
- v-on
1. v-on指令用来监听dom事件 表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生
DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
2.常用事件：
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
3.可以使用@替代 v-on:
<button @click="doThis"></button>
4.按键修饰符：
触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件
写法：
<input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件
由于回车键对应的keyCode是13，也可以使用如下替代
<input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件
但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法：
1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为：
Vue.config.keyCodes.a = 65
<input type="text" @keydown.a="kd1"> 这样即可触发
2、也可以之间加上a对应的数字65作为按键修饰符
<input type="text" @keydown.65="kd1"> 这样即可触发
键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字
<div id="app">
<!-- 1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数" -->
<button v-on:click="change">点击改变</button>
<!-- 2. 简写：@任意的事件类型="执行的函数" （推荐） -->
<button @click="change">简写</button>
<!-- 3. 通过执行函数添加参数 -->
<button @click="change1('lala')">传参</button>
<!-- 4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号 -->
<button @click="getEvent($event)">事件对象</button>
<!-- 5. 事件修饰符可以给事件添加特殊功能 .stop .prevent -->
<a href="http://www.baidu.com" @click.prevent="change">跳转</a>
<!-- 6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'xixi'
},
// 在methods属性中定义函数
methods: {
// 注意在methods中想要去获取data中的属性的话，需要加上this，this表示vue实例
change() {
this.name = 'haha'
},
change1(n) {
this.name = n
},
getEvent(e) {
console.log(e);
},
submit() {
console.log('submit');
}
}
})
</script>
- v-if
根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建
<div id="app">
<p v-if="isShow">aaaa</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
}
})
</script>
- v-show
根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素
<div id="app">
<p v-show="isShow">bbbb</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
}
})
</script>
v-if和v-show的总结：
v-if和v-show 都能够实现对一个元素的隐藏和显示操作,
v-if是将这个元素添加或者移除到dom中，
v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的
- v-cloak
v-cloak指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的Mustache 标签直到实例准备完毕。
通常用来防止{{}}表达式闪烁问题
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 在span上加上 v-cloak和css样式控制以后，浏览器在加载的时候会先把p隐藏起来，知道 Vue实例化完毕以后，才会将v-cloak从p上移除，那么css就会失去作用而将p中的内容呈现给用户 -->
<p v-cloak>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>