vue 指令基本使用大全
2017-10-13 08:41
656 查看
指令
解释:指令 (Directives) 是带有v-前缀的特殊属性
作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
常用指令
v-textv-html
v-bind
v-text
解释:更新元素的 textContent<h1 v-text="msg"></h1>
v-html
解释:更新元素的 innerHTML<h1 v-html="msg"></h1>
v-bind
作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM语法:
v-bind:title="msg"
简写:
:title="msg"
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <script> // 2 创建 Vue 的实例对象 var vm = new Vue({ // el 用来指定vue挂载到页面中的元素,值是:选择器 // 理解:用来指定vue管理的HTML区域 el: '#app', // 数据对象,用来给视图中提供数据的 data: { url: 'http://www.baidu.com' } }) </script>
v-on
作用:绑定事件语法:
v-on:click="say"or
v-on:click="say('参数', $event)"
简写:
@click="say"
说明:绑定的事件从
methods中获取
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a> <!-- 方法传参 --> <a @click="doSomething(“123”)"></a> <script> // 2 创建 Vue 的实例对象 var vm = new Vue({ el: '#app', // methods属性用来给vue实例提供方法(事件) methods: { doSomething: function(str) { //接受参数,并输出 console.log(str); } } }) </script>
事件修饰符
.stop阻止冒泡,调用 event.stopPropagation()
.prevent阻止默认事件,调用 event.preventDefault()
.capture添加事件侦听器时使用事件
捕获模式
.self只当事件在该元素本身(比如不是子元素)触发时触发回调
.once事件只触发一次
v-model
作用:在表单元素上创建双向数据绑定说明:监听用户的输入事件以更新数据
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
v-for
作用:基于源数据多次渲染元素或模板块<!-- 1 基础用法 --> <div v-for="item in items"> {{ item.text }} </div> <!-- item 为当前项,index 为索引 --> <p v-for="(item, index) in list">{{item}} -- {{index}}</p> <!-- item 为值,key 为键,index 为索引 --> <p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p> <p v-for="item in 10">{{item}}</p>
key属性
推荐:使用v-for的时候提供
key属性,以获得性能提升。
说明:使用 key,VUE会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
样式处理 -class和style
说明:这两个都是HTML元素的属性,使用v-bind,只需要通过表达式计算出字符串结果即可
表达式的类型:字符串、数组、对象
语法:
<!-- 1 --> <div v-bind:class="{ active: true }"></div> ===> <div class="active"></div> <!-- 2 --> <div :class="['active', 'text-danger']"></div> ===> <div class="active text-danger"></div> <!-- 3 --> <div v-bind:class="[{ active: true }, errorClass]"></div> ===> <div class="active text-danger"></div> --- style --- <!-- 1 --> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <!-- 2 将多个 样式对象 应用到一个元素上--> <div v-bind:style="[baseStyles, overridingStyles]"></div> --- script --- <script> // 2 创建 Vue 的实例对象 var vm = new Vue({ el: '#app', data: { activeColor: 'red', fontSize: 30, baseStyles: { color: 'red', 'font-size': '30px' }, overridingStyles: { color: 'green', } } }) </script>
v-if 和 v-show
条件渲染v-if:根据表达式的值的真假条件,销毁或重建元素
v-show:根据表达式之真假值,切换元素的 display CSS 属性
提升用户体验:v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。防止刷新页面,网速慢的情况下出现{{ message }}等数据格式
<div v-cloak> {{ message }} </div>
提升性能:v-pre
说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。<span v-pre>{{ this will not be compiled }}</span>
提升性能:v-once
说明:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。<span v-once>This will never change: {{msg}}</span>
Dom元素获取: v-ref
在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。 当v-ref和v-for一起使用时,注册的值将是一个数组,包含多有的子组件,对应于绑定数组;如果v-for使用在一个对象上,注册的值将是一个对象,包含所有的子组件,对应于绑定对象。
Dom元素获取: v-el
为Dom元素注册一个索引,方便通过所属实例的$els访问这个元素,可以用v-el:some-el设置this.$els.someEl.
<span v-el:msg>hello</span> <span v-el:other-msg>world</span> 通过this.$els获取相应的DOM元素: this.$els.msg.textContent // ==> "hello" this.$els.otherMsg.textContent // ==> "world"
相关文章推荐
- vue 指令基本使用
- vue 指令基本使用
- Vue基本使用二-指令
- vue指令(组件)的基本使用一
- VUE中解决不能检测数组中基本数据类型的方法及$set的使用方法
- 使用VUE-CLI构建一个项目基本的配置
- Composer 基本指令操作使用
- vuex的基本使用
- 高级搜索指令大全与使用方法
- Vue.js常用指令之循环使用v-for指令教程
- OC-局部变量和全局变量、结构体、预处理指令以及关键字的基本使用
- linux专题一:linux下的基本指令使用和makefile的配置
- Vuex的基本使用
- CodeSmith 使用教程(4): 基本语法-CodeTemplate 指令
- vue常用指令v-bind的使用总结
- vue实战--webpack基本使用
- CodeSmith 使用教程(4): 基本语法-CodeTemplate 指令
- GDB工具使用教程_基本调试指令
- Django的基本使用指令
- vue基本使用--过滤器