VUE笔记——Vue指令

原创已于 2022-10-01 20:14:20 修改 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-10-01 19:07:35 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>：

1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，即true or false）

2、配置input的value属性：

（1）v-model的初始值是非数组，那么收集的就是checked（true or false）

（2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入的字符串转为有效数字

trim：输入首尾空格过滤

学过的指令：v系列

v-bind：给指令绑定动态数据，单向绑定解析表达式，可简写为：xxx，可用来绑定style、class样式。

<标签 v-bind:class="{class样式1:数据对象属性1,class样式2:数据对象属性2,...}">

new Vue({
    el:,
    data:{
    数据对象属性1:true|false
    数据对象属性2:true|false
    ...
}
})

<标签 v-bind:style="{class样式1:数据对象属性1|样式属性值...}">

v-model：双向数据绑定，同步用户输入的数据到Vue实例的data属性

双向绑定修饰符：
1、.lazy
    默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，
    添加.lazy修饰符后，v-model.lazy只有在回车或者在输入框失去焦点时，数据才进行同步
2、.number
    v-model.number只能输入数字，并把输入值转化为数值型
3、.trim
    v-model.trim可以将用户输入的首尾空白格过滤

v-for：遍历数组、对象、字符串

<标签 v-for="item in items"> //items是源数据数组

<标签 v-for="(item,index) in items"> //index当前数据项的索引

<标签 v-for="(item,name,index) in items"> //index当前数据项的索引


<body>
    <div id="root">
        <ul>
            <li v-for="fruit in fruits">{{fruit}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                fruits:["apple","pear","banana","lemon"]
            }
        })
    </script>
</body>

v-on：绑定事件监听，可简写为@

//无参：
//    <标签 v-on:事件名='函数名称'>
//有参：
//    <标签 v-on:事件名='函数名称(参数)'>
//在methods里申明事件调用的函数

<body>
    <div id="root">
        <button v-on:click="add">+1</button>
        <p>按钮单击了{{counter}}次</p>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
               counter:0
            },
            methods: {
                add(){
                    this.counter++;
                }
            },
        })
    </script>
</body>

v-if：条件渲染（动态控制节点是否存在），

v-else：条件渲染（（动态控制节点是否存在））

v-show：条件渲染（动态控制节点是否展示）

v-if="表达式"    //为true时被渲染显示，为false时元素删除转为注释

v-show="表达式"   //通过true|false显示/隐藏元素

//v-if为false时，DOM树中不存在该节点；而v-show只是通过css样式的display:none隐藏该元素，
//DOM树上存在该节点。

v-text：向其所在的节点中渲染文本内容。

与插值法的区别：1）v-text会替换掉节点中的内容，{{xx}}不会；2）在网络延迟比较重的时候，{{}}插值法会先将插值表达式以文本的方式渲染出来，等到JavaScript脚本加载后，重新显现出所绑定的文本内容；而v-text方式在JavaScript脚本未加载出的情况再什么都不会显现。

v-html：1)作用：向指定节点中渲染包含html结构的内容。2）与插值语法的区别：v-html会替换掉节点中的所有的内容。{{xx}}则不会。v-html可以识别html结构。3）v-html有安全性问题。在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击。一定要在可信的内容上使用v-html，不要用在用户提交的内容上。

<div id = "root">
    <p>hello {{text}}</p>                //hello world   1
    <p v-text="text">hello</p>            //world        2
    <p v-html="text">hello</p>            //world        3
</div>

new Vue({
    el:"#root",
    data:{
        text:'world';
    }
})


//2与3 重写整个文本节点的内容，渲染出的只有 world；1只影响插值所在位置的文本，而不是重写整个文本节
//点的内容，渲染出 hello world

v-cloak：没有值，本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。使用css的{display：none}配合v-cloak就可以解决网速慢时页面展示出{{xxx}}的问题。

v-once：该指令所在节点在初次动态渲染后，就视为静态内容了；以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

stop修饰符阻止事件冒泡：

事件冒泡：时间开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。

vm的生命周期：

调用beforeCreate函数，将要创建，此时无法访问methods、data、computed等方法和数据，el和data还没初始化===>调用created函数，创建完毕，data和methods都可以使用了，但el还不可用，数据与页面还没有绑定===>调用beforeMount函数，将要挂载，el、data、methods可用，数据与页面还未绑定===>调用mounted函数，挂载完毕，数据与页面绑定===>调用beforeUpdate函数，将要更新，data数据最新，但页面仍是旧值===>调用updated函数，更新完毕，页面已为最新值===>调用beforeDestroy函数，将要销毁===>调用destroy函数，销毁完毕