v-text

<!-- v-text的作用与插值表达式相同,也具有响应式,效果等同于JS中的textContent -->
<p v-text="msg"></p>

v-html

<!-- v-html的作用与插值表达式相同,也具有响应式,效果等同于JS中的innerHTML -->
<p v-html="str"></p>

v-pre

<!-- Vue对此不进行编译 -->
<p v-pre></p>

v-once

<!-- Vue对此进行编译一次,当值改变之后不进行编译 -->
<p v-once></p>

v-cloak

<!-- 实际上所有vue指令都可以实现该功能,因为本质上只是利用指令的无痕迹特性+css来实现 -->
<style>
/* 属性选择器 */
/* 只要是具有v-cloak属性的元素,都隐藏 */
[v-cloak] {
    display: none;
}
</style>

<body>
    <!-- 在该行代码未渲染完成之前隐藏代码 -->
    <p v-cloak>msg:{{ msg }}</p>
</body>

v-on

一、绑定单个事件

<!-- 方式1:普通单事件绑定 -->
<button v-on:click="show()">按钮1</button>

<!-- 方式2:方法没有参数时可以省略小括号 -->
<button v-on:click="show">按钮2</button>

<!-- 方式3:可以使用@替代v-on: -->
<button @click="show">按钮3</button>

二、绑定多个事件

<!-- 方式1:普通多事件绑定 -->
<button @mouseover="show" @mouseout="print">绑定多个事件:方式1</button>

<!-- 方式2:多事件绑定 -->
<button v-on="{mouseover:show,mouseout:print}">绑定多个事件:方式2</button>

三、单事件调用多个函数

<!-- 方式1:同一个事件调用多个方法,不能省略小括号 -->
<button @click="show(),print()">调用多个方式:方式1</button>

<!-- 方式2:同一个事件调用多个方法,不能省略小括号 -->
<button @click="[show(),print()]">调用多个方式:方式2</button>

四、绑定事件使用函数传递参数

<!-- 将普通值作为实参 -->
<button @click="show('abc')">传参1</button>

<!-- 将数据仓库中的变量作为实参 -->
<button @click="show(msg)">传参2</button>

<!-- 将this作为实参,此时的this指向window对象,与原生js有所不同 -->
<button @click="show(this)">传参3</button>

<!-- 将$event作为实参,表示事件对象,包含事件的相关信息,等于同原生js中的event -->
<button @click="show($event)">传参4</button>

<!-- 表示事件源 -->
<button @click="show($event.target)">传参4</button>

<!-- 表示事件源的值 -->
<input type="text" @input="show($event.target.value)">

五、按钮修饰符

<!-- 按钮修饰符可以使用按键码keyCode(ASCII码) 或 按键码的别名 -->
<input type="text" @keyup.65="show($event.target.value)">
<input type="text" @keyup.a="show($event.target.value)">
<input type="text" @keyup.13="show($event.target.value)">
<input type="text" @keyup.enter="show($event.target.value)">

<!-- 修饰符可以同时使用多个,一般为或者的关系 -->
<input type="text" @keyup.a.x="show($event)">

<!-- 同时按Ctrl+C时触发执行,表示并且的关系(系统修饰键 .ctrl .alt  .shift) -->
<input type="text" @keyup.ctrl.c="show($event)">

六、功能修饰符

事件冒泡:当一个元素上的事件触发时,事件从事件源开始,往上冒泡直到页面的根元素,这一过程称为事件冒泡(默认)
事件捕获:当一个元素上的事件触发时,事件从页面的根元素开始,往下直到事件目标元素,这一过程称为事件捕获
原生JS中:addEventListener(事件名,回调函数,事件传播方式)

<!-- 将事件传播方式改为事件捕获 -->
<div class="div1" @click.capture="print('div1')">div1</div>
  
<!-- 阻止事件传播(包括冒泡和捕获) -->
<div class="div2" @click.stop.self="print('div2')">div2</div>

<!-- 只有点击本身才执行,会接收事件传播但不执行事件传播的回调函数 -->
<div class="div2" @click.self="print('div3')">div3</div>

<!-- 阻止默认行为:如右键点击时会弹出浏览器菜单 -->
<button @contextmenu.prevent="write">右键点击</button>

<!-- 只触发一次 -->
<button @click.once="write">只触发一次</button>

v-show

以boolean值来判断是否隐藏,true为执行隐藏,false为不执行隐藏

<!-- boolean值为true -->
<p v-show="true">p1</p>
<p v-show="'abc'">p2</p>
<p v-show="6">p3</p>

<!-- boolean值为false -->
<p v-show="0">p4</p>
<p v-show="null">p5</p>
<p v-show="undefined">p6</p>

v-if

以boolean值来判断是否删除节点,true为执行删除,false为不执行删除

<!-- boolean值为true -->
<p v-if="true">p7</p>

<!-- boolean值为false -->
<p v-if="0">p4</p>
<p v-if="null">p5</p>
<p v-if="undefined">p6</p>

v-if结合v-else-if、v-else则为判断

<!-- v-if结合v-else-if、v-else进行判断 -->
<p v-if="age>=60">老年</p>
<p v-else-if="age>=40">中年</p>
<p v-else-if="age>=18">少年</p>
<p v-else>童年</p>

1. 小功能实现

要求:点击按钮进行隐藏和显示

<button @click="flag=!flag">变</button> <br><br>
<div v-if="flag" style="width: 100px;height: 100px;background: red;"></div>

<script>
    new Vue({
        el:'#app',
        data:{
           flag:true,
           age:25
        }
    });
</script>

v-for

<!-- 循环数组 -->
<li v-for="item in arr">{{ item }}</li>
<li v-for="(item,index) in arr">{{ index }} = {{ item }}</li>

<!-- 循环对象 -->
<li v-for="value in user">{{ value }}</li>
<li v-for="(value,key) in user">{{ key }} = {{ value }}</li>
<li v-for="(value,key,index) in user">{{ index }} = {{ key }} = {{ value }}</li>

<!-- 循环数字 -->
<li v-for="item in num">{{ item }}</li>
<li v-for="(item,index) in num">{{ index }} = {{ item }}</li>

<!-- 循环字符串 -->
<li v-for="item in str">{{ item }}</li>
<li v-for="(item,index) in str">{{ index }} = {{ item }}</li>

<!-- 循环对象数组,二重循环 -->
<li v-for="user in users">
    <span v-for="(v,k) in user">{{ k }} = {{ v }}</span>
</li>

当更新v-for渲染的元素列表时

默认是就地更新每个元素的内容,效率高,但无法跟踪每个节点的身份

可以为每一项提供一个唯一的key属性,更新时元素会移动位置,能够跟踪每个节点的身份,从而重用和重新排序现有元素(推荐)

<li v-for="item in arr" :key="item"></li>

v-bind

使用v-bind可以将Vue实例中的变量绑定到html标签属性来作为属性值使用,则为动态属性值

<!-- 绑定单个属性 -->
<img v-bind:src="url">

<!-- 同时绑定多个属性 -->
<img :src="url" v-bind="{width:width,height:height}">

1. 小功能实现

要求:如果字符长度为6-10之间,则符合要求,此时为绿色否则为红色

<style>
    .ok{
        color: green;
    }
    .error{
        color:red;
    }
</style>

<input type="text" :class="{ok:flag,error:!flag}" @input="check($event.target.value)">

<script>
    new Vue({
        el:'#app',
        data:{
           flag:false,
        },
        methods: {
            check(value){
                this.flag = value.length >= 6 && value.length <= 10;
            }
        },
    });
</script>

v-model

<!-- v-model 等同于 v-bind 和 v-on 的组合 -->
<input type="text" :value="name" @input="name=$event.target.value">

<!-- 1.文本框 -->
<input type="text" v-model="name">

<!-- 2.单选按钮 -->
<input type="radio" value="male" v-model="sex"> 男 
<input type="radio" value="female" v-model="sex"> 女 
<input type="radio" value="zhong" v-model="sex"> 中 

<!-- 3.复选框 -->
<input type="checkbox" value="eat" v-model="hobbies">吃饭 
<input type="checkbox" value="sleep" v-model="hobbies">睡觉
<input type="checkbox" value="doudou" v-model="hobbies">打豆豆 

<!-- 单个复选框 -->
<input type="checkbox" v-model="flag"> 同意

<!-- 4.下拉列表 -->
<select v-model="degree">
    <option value="0">--请选择学历--</option>
    <option value="1">大专</option>
    <option value="2">本科</option>
    <option value="3">研究生</option>
</select> 

<script>
    new Vue({
        el:'#app',
        data:{
           name:'tom',
           sex:'male',
           hobbies:[],
           flag:false,
           degree:'0',
           age:18,
        }
    });
</script>

1. 功能修饰符

<!-- 当光标失去焦点的时候触发执行 -->
年龄:<input type="text" v-model.lazy="age">

<!-- 将数字字符串转换为number类型 -->
年龄:<input type="text" v-model.number="age">

<!-- 清除输入框左右空格 -->
年龄:<input type="text" v-model.trim="age">
最后修改:2020 年 08 月 31 日 12 : 19 AM