最近整理了vue中常见一些指令，希望可以帮助到vue新手
指令
-
.使用形式：
-
绑定在dom的属性身上
-
为了区别自定义属性，vue提供的指令都携带 v-
-
-
数据展示
-
v-html 非转义输出 ， 可以解析 xml类型数据 （即可以解析标签）
-
<p v-html='msg'></p>
-
-
v-text（不可以解析标签）
-
<p v-text='msg'></p>
-
-
条件渲染
-
-
<p v-if='flag1'>条件 - 单路分支 </p> //flag1为真渲染
-
-
v-if (双路分支)
-
<p v-if='flag2'>条件 - 双路分支的if </p> <p v-else='flag2'>条件 - 双路分支的else</p>
-
-
v-else-if ( 多路分支)
-
<p v-if='type==="A"'>条件 - 多路分支的if 条件 - A </p> <p v-else-if='type==="B"'>条件 - 多路分支的 else if 条件 -B </p> <p v-else>条件 - 多路分支的 else条件 条件 -c</p>
-
-
-
条件展示
-
v-show
-
<p v-show='flag3'>v-show条件为true展示</p>
-
-
v-if vs v-show
-
v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
-
如果初始条件都为false,v-if会惰性渲染【 不渲染 】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
-
如果我们要频繁的切换flag的话，使用 v-show ， 反之，使用v-if
-
-
-
列表渲染 v-for
-
数组的渲染
-
<!-- item指数组里面的每一项 --> <!-- index指数组里面每一项的索引，顺序不能反 --> <ul> <li v-for="(item,index) in lists"> {{index}} : {{item}} </li> </ul>
-
-
对象的渲染
-
//value,key,index 分别代表属性值，属性，索引 （注意这里的对象也有索引） <p v-for="(value,key,index) in obj"> {{key}} : {{value}}---index:{{index}} </p>
-
-
json的渲染
-
<ul> <li v-for="(item,index) in json"> {{index}}---商品的 id：{{item.id}} 商品名称：{{item.name}} </li> </ul>
-
-
特殊数据的渲染
-
<p v-for="(item,index) in 4">{{item}}--{{index}}</p> //结果 1--0 // 2--1 // 3--2 // 4--3
-
-
列表渲染嵌套
-
<ul> <li v-for="(item) in double"> <p>{{item.name}}</p> <ul> <li v-for="(val,index2) in item.children"> {{val.name}} </li> </ul> </li> </ul>
-
-
-
v-bind (v-bind可以省略)
-
<style> .size{ width: 100px; height: 100px; } .bg{ background: red; } .color{ background: blue; } </style> new Vue({ el: '#app', // 挂载 data: { imgUrl: 'https://www.baidu.com/img/bd_logo1.png', msg: 'hello 各位今天周四了', size: 'size', bg: 'bg', flag: true, color: 'color', w: '100px', h: '100px', backg: 'blue', styleObj: { width: '100px', height: '100px' }, styleColor: { background: 'yellow' } } })
-
v-bind 绑定一个数据在某一个属性身上
-
<input type="text" v-bind:value = "msg"> //v-bind可以省略 <input type="text" :value='msg'>
-
-
v-bind样式绑定
-
对象写法 <p :style="{width: '100px',height: '100px',background: 'red'}">1</p> <p :style="{width:w,height:h,background:bgr}">2</p> //这里w和h是data里面的数据 数组写法 <p :style="[{width:'100px',height:'100px'},{background:'green'}]">1</p> <p :style="[{width:w,height:h},{background:bgr}]">2</p> <p :style="[stylesize,stylebgr]">3</p>
-
-
v-bind 绑定类名
-
对象写法 <!-- 下面的第一个size是指 <style>样式里面的size--> <p :class='{size:true,bg:true,border:true}'>2</p> <!-- [size]是指data数据里面的 全局变量--> <p :class='{[size]:true,[border]:true}'>3</p> 数组写法 <!-- 下面的第一个'size'是指 <style>样式里面的size--> <p :class="['size','border','bg']">1</p> <!-- size是指data数据里面的 ，是变量--> <p :class="[size,border,bg]">2</p> <!-- 总结：项目中v-bind绑定类名使用以下两种 --> <!-- <p :class="{[size]: true,[bg]: true}"></p> 这个是对象写法 --> <!-- <p :class="[ size,bg ]"></p> 这个是数组写法-->
-
-
引申类名的绑定
-
<p :class="{[size]:true,[bg]:flag,[border]:true}">1</p> <p :class="[size,flag?bg:border]">2</p> <p :class="[size,flag&&bg||border]">3</p> //这种方式比较多，通过控制flag来增删类名
-
-
补充
-
//类名不覆盖，累加 <p class="text" :class="[size,border]"></p> //v-bind 可以绑定任意一个dom身上的属性 <img :src="imgUrl" alt="">
-
-
-
v-model (v-model默认绑定表单元素)
-
1 //v-model 双向数据绑定 数据改变， 视图改变，反之，视图改变，数据改变 2 <input type="text" v-model:value="msg"> 3 <!-- value可以省略 因为v-model默认绑定表单元素的value值 --> 4 <input type="text" v-model="msg">
-
-
v-on（@）
-
基础事件绑定 （事件处理程序放在methods里面）
-
<input type="text" :value='msg' v-on:click='wei'> //v-on:通常换成@ <!-- 这个两个分别对应下面methods里面的两个，这两种方法都可以实现事件处理程序 --> <button @click='wei'>点击</button> <button @click='dianji'>点击</button>
new Vue({
el: '#app',
data: {
msg: 'haha'
},
methods: { //方法： 里面存放的是： 事件处理程序
wei() {
alert('xixi')
},
dianji: function () {
alert('haha');
}
}
}) -
事件传参
-
<input type="text" v-model='msg'> <button @click='dianji($event,msg)'>点我</button> /* 问题： 如果函数接收2个参数，其中一个参数是事件对象，事件对象evhh会丢失 解决： 在调用方法时，传入一个实际参数： $event */ new Vue({ el: '#app', data: { msg: 'haha' }, methods: { dianji(evhh, msg) { //evhh是形参，可以是随便的一个变量 alert(msg); console.log(evhh); } } })
-
事件修饰符 (v-on 里面的)
-
<!-- stop修饰符和self修饰符一样，都是阻止事件冒泡的 相当于ev.stopPropagation()--> <div class="large" @click.stop="largeHandler"> <div class="middle" @click.stop="middleHandler"> <div class="small" @click.self="smallHandler"></div> </div> </div> new Vue({ el: '#app', methods: { //方法： 里面存放的是： 事件处理程序 largeHandler(evhh) { //当函数只有一个参数的时候，这个参数默认就是事件ev alert('large'); //evhh.stopPropagation(); }, middleHandler(ev) { alert('middle'); //ev.stopPropagation(); }, smallHandler(eva) { alert('small'); //.stopPropagation(); } } }) //补充 .prevent阻止默认行为 //.capture组织事件捕获 //.self事件只对自身有用，在冒泡里面可以替换.stop //.once 点击事件将只会触发一次 //.passive 等滚动事件完成 -
按键修饰符
-
<input type="text" v-model='msg' @keydown.13='importss($event,msg)'> <input type="text" v-model='msg' @keydown.enter='importss($event,msg)'> <input type="text" v-model='msg' @keydown.a='importss($event,msg)'>
-
-
模板语法 mustache 【 双大括号 】{{}}
-
所有的类型都是支持的，但是console.log alert这些输出语法是不支持的
-
<!-- undefined和null不会显示 --> <p>number:{{num}}</p> <p>string:{{string}}</p> <p>boolean:{{bool}}</p> <p>null:{{null}}</p> <p>undefined:{{undf}}</p> <p>arr:{{arr}}</p> <p>obj:{{obj}}</p>new Vue({
el: '#app',
data: {
num: 10,
string: 'haha',
bool: true,
null: null,
undf: undefined,
arr: [1, 2, 3],
obj: {
a: 1,
b: 2
}
}
})
-
-
computed计算属性
-
为什么要有这个选项？
-
V应该是用于数据展示，但是我们有时候会将逻辑写在v里面，这样违背了MVVM，所以 计算属性中存放的都是方法
-
-
计算属性是一个 选项， 选项值是一个对象，对象中存放的是方法
-
方法必须要有返回值
-
使用：直接将方法名当做全局变量一样直接使用
-
<p>{{reverseMsg}}</p> //直接将方法名当做全局变量一样直接使用 new Vue({ el: '#app', data: { msg: 'hello 韩商言' }, computed: { //计算属性中存放的都是方法 ,必须要有return reverseMsg() { return this.msg.split('').reverse().join('') } } }) -
计算属性一旦确定就不可更改了
-
总结： 什么时候使用computed 计算属性？
-
必须有逻辑处理，还有返回值
-
我们使用的结果，要当做全局变量一样使用
-
-
案例联系计算属性
-
<!-- 业务：输入姓和名，全名会自动补全 --> <p>firstname: <input type="text" v-model='firstname'></p> <p>lastname: <input type="text" v-model='lastname'></p> <p>fullname: <input type="text" v-model='fullname'></p> new Vue({ el: '#app', data: { firstname: '', lastname: '', }, computed: { //写方法的 fullname: { get() { //get return this.firstname + this.lastname; }, set(val) { //val就是当前绑定元素的value值 this.firstname = val.slice(0, 1); this.lastname = val.slice(1); } } } })
-
-
-
watch 侦听属性
-
以案例来学习watch - > 用户名写入
-
new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, watch: { // watch侦听 -> 侦听的是data中的数据 // watch中可以存放方法 firstname(val) { // console.log('firstname改变了') this.fullname = val + this.lastname; }, lastname(val) { this.fullname = val + this.lastname; }, // fullname(val) { // this.firstname = val.slice(0, 1) // this.lastname = val.slice(1) // } fullname: { deep: true, //深度监听 handler() { // 处理程序 this.firstname = val.slice(0, 1) this.lastname = val.slice(1) } } } })
-
-
watch是一个选项， 选项值是一个对象
-
对象中可以存放的类型有 { [key: string]: string | Function | Object | Array }
-
常用的是方法和对象
-
-
-
