Vue_双向绑定解析以及指令介绍-CSDN博客

本文链接：https://blog.csdn.net/qq_42674098/article/details/121558162

Vue

Vue双向绑定解析

为什么Vue可以实现双向绑定？

控制台输入定义好的Vue实例请输入图片描述

这里会有get/set方法，在es5之后，可以给变量添加get/set方法，就类似于Java中的get/set方法 vue给set添加了监听，一旦你修改或者赋值，就会帮你修改DOM里的值，取值同理，这就是“响应式”系统请输入图片描述

Vue生命周期钩子

Vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

请输入图片描述

钩子函数

例如：created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>你好，{{hello}}</h1>

</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    <!--首先创建一个vue实例-->
    var vm = new Vue({
        el: "#app",
        data: {
            hello:""    //初始化为空
        },
        created(){
            this.hello="我是萧一旬！"
        }
    })
</script>
</body>
</html>

效果图展示请输入图片描述

指令

什么是指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

插值表达式

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数(必须有返回值)
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"Jack"
    }
})

插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，称为插值闪烁。案例：请输入图片描述

如何解决插值闪烁问题

使用v-text或者v-html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--使用v-text代替{{}} 解决插值闪烁-->
    <h1 v-text="hello"></h1>

</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    <!--首先创建一个vue实例-->
    var vm = new Vue({
        el: "#app",
        data: {
            hello:"萧一旬"    //初始化为空
        }
    })
</script>
</body>
</html>

这样当网速慢网页刷新时就不会出现插值闪烁问题，需要渲染的数据会显示空白请输入图片描述

v-text或者v-html的区别在哪？
首先v-text 若想显示普通字符串需要加上‘’号，不然会被解析成data里的属性
其次 v-text里不能解析html代码，但是 v-html可以

v-text="'<h1>12</h1>'"

v-text="'12'"

v-html="'<h1>12</h1>'"

v-html="'12'"

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。v-model是双向绑定，视图(View)和模型(Model)之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components(Vue中的自定义组件)

基本上除了最后一项，其它都是表单的输入项。举例：

html：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}} <!--把数组渲染成字符串-->
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

效果：请输入图片描述

v-on

v-on指令用于给页面元素绑定事件，只能调用Vue实例定义的方法

语法：

v-on:事件名="js片段或函数名"

示例：

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button v-on:click="decrement">减少</button><br/>
    <h1>num: {{num}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

这个效果入门那篇文章里有，所以效果就不截图了另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡(事件冒泡就是指：当子元素和父元素同时绑定点击事件时，点击子元素也会触发父元素的点击事件)
.prevent：阻止默认事件发生()
.capture：使用事件捕获模式(和事件冒泡相反)
.self：只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
.once：只执行一次

-使用格式：@click.stop

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

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

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

v-for

遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

示例

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'晓', gender:'男', age: 21},
                {name:'萧一旬', gender:'女', age: 20},
                {name:'筱', gender:'女', age: 18}
            ]
        }
    })
</script>

数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例

<div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

效果图请输入图片描述

遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始

示例：

<div id="app">
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'柳岩', gender:'女', age: 21}
        }
    })
</script>

效果图：请输入图片描述

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例：

<ul>
    <li v-for="(item,index) in items" :key="index"></li>
</ul>

这里使用了一个特殊语法：:key="" 它可以让你读取vue中的属性，并赋值给key属性
这里我们绑定的key是数组的索引，应该是唯一的

v-if和v-show

v-if

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

效果图：请输入图片描述