vue内置指令总结
v-bind
可以绑定属性,包括class style , 也可以使用:替代
- 在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中废弃了前面两个
- camel将绑定的特性的名称转化为驼峰法则命名
v-model
随着表单控件的不同而有所不同
可以添加修饰符
.lazy .number .trimv-if v-else-if v-else v-show
可以配合模板使用
v-if和v-show两者都可以实现元素的状态切换,但是两者存在一些区别
- v-if根据判断条件决定是否渲染,如果条件为假,不进行任何操作
- v-show无论如何都会进行模块的渲染,只是简单的基于css 的切换
- 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-for
- 可以配合模板使用,也可以单独进行列表和表格的渲染
v-on
- 进行事件的绑定,可以省略,使用@替代
类似于原生js的事件绑定的方式
- 获取dom元素
- 进行事件的添加
- 添加事件处理函数v-text
- 绑定文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
{{ message }}
<!--上下两种书写形式的 效果是一样的-->
<p v-text="message"></p>
</div>
</body>
</html>
<script>
var viewModel = {
//模型数据的初始化
message: 'hello world!'
}
// viewModel 连接模型和数据库
var vm= new Vue({
el:'#app',
data:viewModel
})
</script>v-html
- 绑定html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
{{ message }}
<!--上下两种书写形式的 效果是一样的-->
<p v-text="message"></p>
</div>
</body>
</html>
<script>
var viewModel = {
//模型数据的初始化
message: 'hello world!'
}
// viewModel 连接模型和数据库
var vm= new Vue({
el:'#app',
data:viewModel
})
</script>v-once
- 不需要表达式
- 只绑定一次,数据修改时,模型上面的数据不会再动态渲染到页面上
- 2.0版本新增
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<input type="text" name="" v-model="message" id="" value="" />
<h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>v-pre
- 不需要表达式
- 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak
- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<div>{{ message }}</div>
<div v-cloak>
{{message}}
</div>
</div>
</body>
</html>
<!--
这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见
-->
<script>
var dataModel = {
//模型数据的初始化
message: 'hello world!',
}
// viewModel 连接模型和数据库
var vm = new Vue({
el: '#app',
data: dataModel
})
</script>