VUE的内置指令总结
日期：2018-05-20
来源：程序思维浏览：1580次
3.1.1. v-bind
可以绑定属性,包括class style,而已省略,使用:替代
在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中能够废弃了前面两个
.camel将绑定的特性的名称转化为驼峰法则命名
3.1.2. v-model
随着表单控件的不同而有所不同
可以添加修饰符
.lazy .number .trim
3.1.3. v-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 较好。
3.1.4. v-for
可以配合模板使用,也可以单独进行列表和表格的渲染
3.1.5. v-on
进行事件的绑定,可以省略,使用@替代
类似于原生js的事件绑定的方式
1. 获取dom元素
2. 进行事件的添加
3. 添加事件处理函数
3.1.6. 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>
3.1.7. 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>
3.1.8. 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>
3.1.9. v-pre
不需要表达式
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
3.1.10. 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>
- 上一篇：VUE的class、style的使用与模板渲染
- 下一篇：VUE中的钩子函数及其参数
精品好课
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...