VUE笔记——Vue指令

每天只想发大财

已于 2022-10-01 20:14:20 修改

阅读量250

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

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

本文链接：https://blog.csdn.net/Rewon_duang/article/details/126959204

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

收集表单数据：

若：<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函数，销毁完毕

常用的生命周期钩子：

1、mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息【收尾工作】

关于销毁Vue实例：

1、销毁后借助Vue开发者工具看不到任何信息。

2、销毁后的自定义事件会失效，但原生DOM事件依然有效。

3、一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

Vue中使用组件的三大步骤：

一、定义组件（创建组件）

使用Vue.extend(options)创建，其中options和new Vue（options）时传入的options的主要区别如下：

1）el不写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2）data必须写成函数，避免组件被复用时，数据存在引用关系

备注：使用template可以配置组件结构

二、注册组件

1）局部注册：靠new Vue的时候传入components选项

2）全局注册：靠Vue.component('组件名',组件)

三、使用组件（写组件标签）

类似 <school> </school>

关于VueComponent：

1、school组件本质是一个名为VueComponent的构造函数，且不失程序员定义的，是Vue.extend生成的。

2、我们只需要写<school/> or <school><school/>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行：new VueComponent(option)

3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent

4、关于this指向：

1）组件配置中：

data函数、method中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】

2）new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【Vue实例对象】

一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype，让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

每天只想发大财

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE笔记——Vue指令

调用beforeCreate函数，将要创建===>调用created函数，创建完毕===>调用beforeMount函数，将要挂载===>调用mounted函数，挂载完毕===>调用beforeUpdate函数，将要更新===>调用updated函数，更新完毕===>调用beforeDestroy函数，将要销毁===>调用destroy函数，销毁完毕。v-html可以识别html结构。data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【Vue实例对象】
复制链接

扫一扫