模版
模版语法
<div id="app">
<!-- 这里就会展示data.msg的内容 加载的时候会出现闪烁问题(v-cloak能够解决) -->
<div>{{msg}}</div>
<!--元素中间的内容不展示 没有数据加载闪烁问题-->
<div v-text="msg">这里将会被覆盖掉</div>
<!--可以进行简单的计算-->
<div v-text="msg+msg"></div>
<!-- HTML 插值 将rawHtml插入到div的子元素 容易导致 XSS 攻击绝不要对用户提供的内容使用插值-->
<div v-html="rawHtml"></div>
<!-- v-html 和 v-text 谁在后面将会展示谁的指令内容 -->
<div v-html="rawHtml" v-text="msg">这里将会展示msg的内容</div>
<!-- 使用 JavaScript 表达式 -->
<div>{{ number + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ msg.split('').reverse().join('') }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
ok: true
rawHtml: '<h1>hello world<h1>',
},
});
</script>指令
v-bind
与v-text和v-html不同它俩是针对标签中的内容，v-bind 是针对标签中的属性
<!-- 完整语法 -->
<a v-bind:href="url" v-bind:title="title">链接</a>
<!-- 缩写 -->
<a :href="url" :title="title">链接</a>
<!--使用v-bind绑定一组,这样写的时候不能用缩写-->
<a v-bind='{title:"跳转到百度",href:"www.baidu.com"}'>链接</a>
<!--延伸1 -->
<a v-bind="{title,href:aHref}">延伸1</a>
<!--延伸2-->
<a v-bind="attrObj">延伸2</a>
<!-- 动态参数的缩写 (2.6.0+) 注意编译过程中浏览器会把attribute名全部强制转为小写，因此动态参数命名建议都用小写-->
<a :[key]="title"> 链接 </a>
<script>
var vm = new Vue({
el: '#app',
data: {
attrObj: {
title: "跳转到百度",
href: "http://www.baidu.com",
},
aHref: "http://www.baidu.com",
title: '点击跳转到百度',
key: 'title'
}
});
</script>v-on
用于监听 DOM 事件
<!-- 完整语法 -->
<a v-on:click="doSomething">方法</a>
<!-- 缩写 -->
<!-- 方法处理器:没有括号不支持自定义传参，默认参数为event -->
<a @click="doSomething">方法处理</a>
<!-- 内联处理器中的方法:有括号支持自定义传参，需要传$event作为参数方法才可以获取到访问原始的DOM事件参数event -->
<a @click="doSomething('doSomething',$event)">内联处理</a>
<!-- 动态参数的缩写 (2.6.0+) 和动态属性参数一样，编译过程中浏览器会把attribute名全部强制转为小写，因此动态参数命名建议都用小写 -->
<a @[event]="doSomething"> 动态参数方法 </a>
<a @mouseenter="handleEnter" @mouseleave="handleLeave">鼠标移进移出</a>
<!-- 对象处理 -->
<a v-on="{mouseenter:handleEnter,mouseleave:handleLeave}">对象处理鼠标移进移出</a>
<!-- 多事件处理 先处理完doSomething再处理handleEnter -->
<a @click="doSomething($event),handleEnter($event)">多事件处理</a>
<script>
var vm = new Vue({
el: '#app',
methods: {
doSomething(e,message) {
console.log(e);
console.log(message);
},
handleEnter(event) {
event.target.style.color = 'blue'
},
handleLeave(event) {
event.target.style.color = 'unset'
},
}
});
</script>事件修饰符
事件修饰符可以解决到点击事件自身带的一些事件效果
.stop阻止事件冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self事件只作用本身，如阻止自己身上冒泡行为.once事件只触发一次.left只当点击鼠标左键时触发。.right只当点击鼠标右键时触发。.middle只当点击鼠标中键时触发。.passivepassive表示listener{ passive: true }永远不会调用preventDefault()`，能够改善滚动性能
<!-- 点击inner只打印 我是内层div -->
<div class="outer" @click="outerClick">
<div class="inner" @click.stop="innerClick"></div>
</div>
<!-- 点击inner只打印 我是内层div -->
<div class="outer" @click.self="outerClick">
<div class="inner" @click="innerClick"></div>
</div>
<!-- 点击inner先打印 我是外层div 再打印我是内层div -->
<div class="outer" @click.capture="outerClick">
<div class="inner" @click="innerClick"></div>
</div>
<!-- 第一次阻止了新窗口打开百度的页面打印 阻止跳转到百度 第二次点击跳转到百度 -->
<a href="http://www.baidu.com" target="_blank" @click.prevent.once="handleClick">百度</a>
<!-- 也可以不写表达式 -->
<a href="http://www.baidu.com" target="_blank" @click.prevent>百度</a>
<script>
var vm = new Vue({
el: '#app',
methods: {
innerClick() {
console.log('我是内层div')
},
outerClick() {
console.log('我是外层div');
},
handleClick() {
console.log('阻止跳转到百度');
}
}
});
</script>按键修饰符
<!-- Ctrl + C -->
<input v-on:keyup.ctrl.67="doSomething">
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="doSomething">Do something</button>
<!-- 鼠标点击+有且只有 ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">onCtrlClick</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="doSomething">Do something</button>
<!-- 只有点击鼠标左键才触发事件，类似的还有.right右键.middle中键 -->
<button v-on:click.left="doSomething">
v-text
类型：string
<!--元素中间的内容不展示 没有数据加载闪烁问题-->
<div v-text="msg">这里将会被覆盖掉</div>v-html
类型：string
<!-- HTML 插值 将rawHtml插入到div的子元素 容易导致 XSS 攻击绝不要对用户提供的内容使用插值-->
<div v-html="rawHtml"></div>v-show
类型：boolean
<!-- v-show 不管初始条件是什么，元素总是会被渲染只是简单地切换元素的CSS property display 适合涉及到频繁的切换 -->
<div v-show="msg"></div>v-if
类型：boolean
<!-- v-if 是决定是否渲染元素元素，可配合v-else-if、v-else使用，可用在<template>作为条件块-->
<div v-show="msg"></div>v-for
类型：Array | Object | number | string | Iterable (2.6 新增)
<div v-for="item in items"></div>
<div v-for="(item, index) in items">{{val}}-{{index}}</div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object">{{val}}-{{key}}-{{index}}</div>
<div v-for="item in 10"></div>
<!-- for...of循环，是作为遍历所有数据结构的统一的方法 可以遍历数组、Set 和 Map 结构类似数组的对象 Generator 对象，以及字符串。不过 Vue 2.x 目前并不支持可响应的 Map 和 Set 值-->
<div v-for="item of iterable" :key="item">{{item}}</div>v-model
用户表单元素的双向绑定
修饰符
.lazy失去焦点同步一次，相当于change 事件之后进行同步.number输入字符串转为有效的数字.trim去除首尾空格
<input type="text" v-model="msg" />
<!-- 在change事件时更新 -->
<input v-model.lazy="msg">
原理
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用
valueproperty 和input事件；checkbox 和 radio 使用
checkedproperty 和change事件；select 字段将
value作为 prop 并将change作为事件。
<!-- 构造一个伪v-model -->
<div id="app">
<input type="text" v-on:input="handleInput" :value="msg" />
{{msg}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "",
},
methods: {
inputHandle(event) {
this.msg = event.target.value;
},
},
});
</script>v-pre
<!-- {{}}不编译，输出字符串{{msg}} -->
<div v-pre>{{msg}}</div>v-cloak
<!-- 解决{{}}语法闪烁问题 -->
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>{{msg}}</div>
Class与Style样式绑定
对象语法
<!-- class -->
<!-- 内联写法 -->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 非内联写法 -->
<div class="static" :class="classObject1"></div>
<!-- 结果都是 <div class="static active"></div> -->
<!-- 计算属性绑定方式 常用且强大的模式 -->
<div :class="classObject2"></div>
<!-- 结果<div class="active"></div> -->
<!-- 内联样式 -->
<div :style="{ color: color, fontSize: fontSize + 'px', backgroundColor: '#fff' }"></div>
<!-- 结果<div style="color: red, font-size: 16px; background-color: #fff"></div> -->
<!-- 绑定样式对象 -->
<div :style="styleObject"></div>数组语法
<div :class="[activeClass, errorClass]"></div>
<!-- 结果<div class="active text-danger"></div> -->
<!-- 三元表达式 -->
<div :class="[isActive ? 'active' : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>
<!-- 结果都是<div class="active text-danger"></div> -->
<div :style="[styleObject, {backgroundColor: '#fff'}]"></div>
<!-- 结果<div style="color: red, font-size: 16px; background-color: #fff"></div> -->
<!-- 多重值2.3.0+ -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', '-webkit-flex', 'flex'] }"></div>
<!-- div{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
} -->data: {
// class绑定属性
isActive: true,
hasError: false,
classObject1: {
active: true,
'text-danger': false
},
isActive: true,
error: null,
activeClass: 'active',
errorClass: 'text-danger',
// 绑定样式属性
color: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '16px'
}
}
computed: {
classObject2: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error
}
}
}Last updated