vue 指令基本使用
2017-10-19 11:12
633 查看
指令
解释:指令 (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>
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>
相关文章推荐
- vue 指令基本使用
- vue 指令基本使用大全
- Vue基本使用二-指令
- vue指令(组件)的基本使用一
- 【Vue.js】- Vue.js常用指令的使用
- vue.js使用v-model指令实现的数据双向绑定功能示例
- Vue-router基本使用
- vue中vee validate表单校验的几种基本使用
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue基本使用--refs获取组件或元素
- vue-router 基本使用
- Linux 一些基本指令简单使用记录
- vue基本使用--过滤器
- Vue.js基本指令
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
- OC-局部变量和全局变量、结构体、预处理指令以及关键字的基本使用
- 使用use注册Vue全局组件和全局指令的方法
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- vue脚手架及vue-router基本使用
- Vue基本使用一-hello world