v-cloak
[v-cloak] {
display: none;
}
包含v-cloak属性的html标签在页面初始化时会被隐藏，在vue执行ready之后，v-cloak属性会被自动去除，此时对应的标签会变为可见。
v-text
<div >{{msg}}</div>
<div v-text="msg"></div>
和插值表达式的实现效果是一样的
差别：
1．v-text是没有闪烁问题的
2．v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
相同点：
都会把文本中的信息原样直接输出，不进行解析，v-html会对文本信息进行解析后输出
v-html
用于输出html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
</body>
</html>
v-bind属性绑定
实现属性绑定，单向的数据绑定，用于输出html的属性值，也就是class、style还有href之类之类的属性，可以缩写为“：”，感觉这个和小程序那边的样式绑定很像，在web端是不支持数据直接绑定的，使用了vue框架之后，样式就可以在js中改变。v-bind后面的引号中可以书写js表达式。
书写规范 v-bind:数据名/属性名=’’
image.png
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
v-on事件绑定
用于绑定事件，进行处理，并且提供了事件修饰符来处理DOM事件细节
书写规范 v-on:click=’bap’;
常用的事件
.mouseover…
.click
可以简写为@
事件修饰符，在事件后面添加.修饰符，事件修饰符可串联 @click.stop=’’
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 只当事件在该元素本身触发时触发回调（只有点击自己才执行）
.once 事件只能触发一次
v-model双向绑定
用于实现双向数据绑定，只能应用在表单元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message"> //在输入框中输入文字后，在上面的行中同步显示
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</body>
</html>
v-if
用于条件判断
还有相关的v-else，v-else-if
元素会直接在dom树中删除，如果只显示隐藏元素一次，最好使用v-if
v-show
感觉和其他平台的hidden相似
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
new Vue({
el: '#app',
data: {
ok: true
}
})
元素并没有在dom树中去掉，只是隐藏，相当于display:none，当需要频繁的操作元素的显示和隐藏，最好使用v-show，可以提高性能。
v-for
v-for=”site in sites”
其中sites表示循环的对象，site就像item一样
也可以提供第二个参数作为键名，第三个参数作为索引，v-for=”(value,key,index) in object”
当循环数组的时候，语法为v-for=’(item,index) of list’
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
v-for迭代对象：第一个参数表示值，第二个表示键名，第三个表示下标
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
在使用的时候最好绑定key值，可以提高性能，key值是不相同的，使用:key=’value’；key只接受string或者number
v-for迭代数字
v-for=’I in 100’
网友评论