vue内置指令学习笔记

先定义一个Vue的实例，后面的指令data都取值自这里

const vm = new Vue({
    el:'#app',
    data:{
        msg:'hello world',
        msg1:'<h1>hello world</h1>'
        imageSrc:'./logo.png',
        size:24,
        isShow:true,
        classA:{
            red:true,
            bd:false
        },
        divStyle1: "width: 100px; height: 100px; background-color: pink;",
        divStyle2: {width: "100px", height: "100px", backgroundColor: "pink"},
        divStyle3: {width: "50px", height: "50px", backgroundColor: "green"},
        items:['zs','ls','ww'],
        items1: [
            {id:1, name: 'zs', age: 18 },
            {id:2, name: 'ls', age: 24 },
            {id:3, name: 'ww', age: 30 }
          ]
    }
})

v-bind

在Vue中给标签的属性赋值数据的时候，不可以使用插值表达式，因此需要用到v-bind

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- class 绑定 -->
<!-- 可以给class属性绑定一个对象，对象中的每个属性名代表的就是对应的类名，属性的值为布尔值，如果是true，就代表当前的元素拥有该类样式，如果是false，就代表当前的元素没有该类样式 -->
<div id="box" :class="{red: true, db: true}"></div> <!-- 直接赋值 -->
<div id="box" :class="classA"></div>  <!-- 从Vue实例中取值-->
<div :class="[classA, { classB: true, classC: false }]">   <!-- 可以是一个数组-->
<!-- style 绑定 -->
<div :style="divStyle1"></div>
<div :style="[divStyle2, divStyle3]"></div>
<!-- 如果数组中直接写类名需要用引号包裹，不然回去实例中找变量名 -->
<div :style="['red', 'db']"></div>

v-on

绑定事件监听器，事件类型由参数指定

<button v-on:click="btnClickHandler">点我呀！</button>
<div id="box" v-on:mouseenter="divMouseEnterHandler"></div>
<!-- v-on:事件名称="事件处理函数的名称"   事件处理函数是保存在methods属性中！ -->

<!--事件注册的简写形式：-->
<!-- @事件名称="事件处理函数的名称" -->
<button @click="btnClickHandler">点我呀！</button>
<div id="box" @mouseenter="divMouseEnterHandler"></div>
<!-- 事件注册的时候，如果要给事件处理函数传递参数，那么我们直接给函数名称后面加上小括号，将参数放进去即可！ -->
<button @click="btnClickHandler(100)">点我呀！</button>

<!--还可以使用箭头函数的写法-->
<!-- e.target对应的就是当前的文本框 -->
<input type="text" :value="name" @input="e => name = e.target.value">

调用的事件处理函数需要定义在Vue实例的methods中

const vm = new Vue({
    el: "#app",
    methods: {
        btnClickHandler(arg){
            // alert("点你咋地！！")
            alert(arg);
        },
        divMouseEnterHandler(){
            console.log("我进来了")
        }
    }
})

事件对象

如果在注册事件的时候，直接赋值的是函数的名字，不带小括号，那么vue会自动将事件对象传递给这个事件处理函数

<input type="text" @keyup="keyupHandler">
<!-- 可以如下调用事件对象,直接通过形参就可以使用了 -->
const vm = new Vue({
    el: "#app",
    methods: {
        keyupHandler(e){
            console.log(e)
        }
    }
})

如果在注册时间的时候，使用的是带有小括号的形式，则要获取事件对象，需要手动的传递参数$event

<input type="text" @keyup="keyupHandler($event)">

事件修饰符

事件修饰符是可以连写的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 
    使用方式 
    @事件名称.修饰符名称="事件处理函数"
-->
<div class="parent" @click="parentClickHandler">
    <div class="child" @click.stop="childClickHandler"></div>
</div>

常用的事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once - 只触发一次回调。

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
通过全局config.keyCodes对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

v-model

在表单控件或者组件上创建双向绑定，你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

<!-- 当修改了input框中的数据，响应的Vue实例data中的对应数据也会修改 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input type="checkbox" id="checkbox" v-model="checked">

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

v-for

基于源数据多次渲染元素或模板块，可以实现数组/对象/字符串/数字/Iterable的遍历

<div v-for="item in items">
  {{ item }}
</div>
<!-- item表示每一项 index表示对应的索引下标-->
<div v-for="(item, index) in items">{{item}} - {{index}}</div>
<!-- val表示对象的属性值 key表示对象的属性名 -->
<div v-for="(val, key) in object"></div>
<!-- 还可以如下使用，去获取每一项的id然后绑定给标签属性-->
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
<!-- 遍历一个数字 -->
<div v-for='item in 5'>
    {{item}}
</div>
<!-- 遍历一个字符串-->
<div v-for='item in "hello"'>
    {{item}}
</div>

v-for使用最好与key配合使用：

加了key属性之后可以提升列表的渲染性能
加了key属性之后可以避免数据混乱（只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出）

v-show

根据表达式之真假值，切换元素的 display CSS 属性。

<!--  isShow=true 元素显示 isShow=false 标签增加display：none 不显示--> 
<div id="box" v-show="isShow">hello world</div>

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建，即为false是删除标签和标签数据，为true时重新创建标签和绑定数据

<!--  isShow=true 元素显示 isShow=false 标签被移除不显示--> 
<div id="box" v-if="isShow">hello world</div>

v-show 和 v-if 比较

v-show如果条件是false，里面的所有的vue相关的指令照常进行解析和渲染了
v-if如果条件是false，里面的所有的vue相关的指令都不会进行解析和渲染了
v-show指令接受一个数据，如果数据是true则元素展示，否则元素隐藏
v-if也能控制展示和隐藏，但是，他是直接将元素从页面dom树种移除掉了
v-show 用于简单的页面中的元素展示和隐藏切换比较频繁的场景！
v-if用于只判断一次的场景，因为这个可以用来提高性能，比如管理员拥有的权限，如果是管理员，就展示，如果不是管理员就不展示，就用v-if

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div v-cloak>
  {{ message }}
</div>

<!-- css -->
[v-cloak] {
  display: none;
}

v-text

更新元素的内容

<span v-text="msg"></span>  
<!-- 等价于-->
<span>hello world</span>

v-text指令和之前的插值表达式很像，但是两者有区别

插值表达式会存在插值闪烁问题，而v-text不会有
插值表达式值替换{{Mustache }}的内容，而v-text 会替换标签原本的内容

v-html

更新元素的 innerHTML

<div v-html='msg1'></div>
<!-- 等价于 -->
<div>
    <h1>
        hello world
    </h1>
</div>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<!-- 这样使用，则div及子元素都不会经过Vue的编译 -->
<!-- 可以提升性能-->
<div v-pre>
    <p>111</p>
    <p>111</p>
    <p>111</p>
</div>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 都只会在第一次渲染的时候赋值，改变了值后，界面不会重新渲染-->
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>