Vue相关知识点总结

我趴在代码上

已于 2023-03-01 23:14:43 修改

阅读量195

点赞数

分类专栏： Vue.js 文章标签： python pandas 机器学习

于 2023-03-01 23:09:06 首次发布

本文链接：https://blog.csdn.net/weixin_64315174/article/details/129291499

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、Vue的基本使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{ }} 就是在输出某个变量的值-->
        <p>{{ msg }}</p>
    </div>

    <!-- 下面这个div没有被vue管理 -->
    <div>
        <p>{{ msg }}</p>
    </div>

    <!-- 导入vue.js文件 -->
    <script src="./vue.js"></script>

    <script>
        // 实例化一个Vue
        new Vue ({
            // 找到某个盒子，并且把这个盒子里的内容交给Vue来管理
            // 它可以传入任何选择器，但是一般只用id选择器
            // el:'.box'
            el:"#app",
            //vue里面放数据的地方
            //可以理解为在这里声明的都是vue里的变量
            data:{
                msg:"马杀鸡"
            }
        })
    </script>
</body>
</html>

二、插值语法的使用

双大括号标签会将其中的内容替换为对应数据对象上的 msg 属性的值，而且此插值会随着 msg 属性的改变而更新。

如果不想让插值更新，即插值处的值只执行一次，及时后台数据对象的值发生改变也不更新，可以使用v-once指令：

<span v-once> 这个将不会改变： {{ msg }} </span>

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <p>{{ age }}</p>
        <p>{{ age + 10 }}</p>
        <p>{{ age >= 18 }}</p>
        <p>{{ age >= 12 }}</p>
        <p>{{ age >= 18 ? '成年' : '未成年'}}</p>

        <p>{{ if(age >= 18){
        }
        </p>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'.app',
            data:{
                age:16
            }
        })
    </script>
</body>
</html>

三、V-Text的使用

更新元素的内容，如果要更新部分元素的内容则要用到{{Mustache}}插值。

他的写法是:<span>{{msg}}</span>

他的这个跟插值两个都差不多，但是写法不一样。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg"></div>

        <div>hello{{}}</div>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好'
            }
        })
    </script>
</body>
</html>

四、V-Model

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 输入框 -->
        <input type="text" v-model="msg">

        <!-- 下拉框 -->
    <select v-model="fruit">
        <option value="apple">苹果</option>
        <option value="Strawberry">草莓</option>
        <option value="watermelon">西瓜</option>
    </select>

        <!-- 单选框 -->
        <input type="checkbox" v-model="chk">

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'',
                fruit:'Strawberry',
                chk:true,

            }
        })
    </script>
</body>
</html>

五、生命周期

vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
在beforCreate之前
vue做了两件事：methos声明，生命周期钩子函数声明
在创建阶段
data数据注入，data数据劫持
1.遍历递归data选项，给每个声明式变量添加setter/getter
2.把劫持过变量都放在组件实例上
第二阶段（挂载阶段）：beforeMount，mounted
在beforeMount之前
会寻找是否有template/el的模板，组件的试图模板（带有指令的HTML字符串）
把找到的template视图（带有指令的HTML字符串），编译成render（）渲染函数
在挂载阶段
vue做了下面的事（vue引擎第一次工作）
1.根据render()渲染函数，生成“抽象语法树AST”（此时还是带有指令的），再把AST第一次创建成“虚拟DOM（VNode1）”（Vnode是真实DOM的一种数据描述，它本质上是json格式的数据）
2.根据Vnode1创建真实DOM（第一次接触，收集依赖，watcher发生在此处）把那些声明式变量全部替换成真实数据，DOM渲染完成
第三阶段（更新阶段）：beforeUpdate，updated
在beforeUpdate之前
当被劫持的data数据发生变化时，这将经入更新阶段
在更新阶段
vue做了以下事情：
1.当vue上下文的data发生变化时，使用render（）渲染函数在生成一新的Vnode2
2.使用大名鼎鼎的Diff运算，patch（old Vnode，new Vnode），找出两个Vnode最小差异，合并Vnode，生成新的Vnode，删除旧的Vnode
3.notify通过Watcher根据"依赖收集"在此更新真实DOM

第四阶段（销毁阶段）：beforeDestroy/destroyed
在调用destroy（）或路由切换时，组件经入销毁阶段
在销毁阶段中，vue做了如下事情
1.拆卸掉了Watcher，所以DOM不可能再发生更新
2.拆卸掉当前组件的所有子组件，所以这些子组件也会经入销毁阶段
3.卸载掉当前组件中的事件处理器

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="example">{{message}}</div>
    <script src="./vue.js"></script> 
<script> 
var vm = new Vue({ 
el: '#example', 
data:{ 
message:'English' 
},
//组件实例被创建之初 | 不能获得DOM节点,data,methods,watch上的方法和数据均不能访问。  (loding)
beforeCreate(){ 
console.log('beforeCreate'); 
},

//组件实例已经完全创建 | 可以访问到data、methodes上的方法和数据。  (结束loading事件)
created(){ 
console.log('created'); 
},

//组件挂载之前 | 得不到具体的DOM节点,Vue挂载的根节点已经创建。  (一个项目用一两次)
beforeMount(){ 
console.log('beforeMount'); 
},

//组件挂载到实例上去以后 | 完成挂载DOM和渲染,可以对挂载的DOM进行操作。  (发起后端Ajax请求)
mounted(){ 
console.log('mounted'); 
},

//组件数据发生变化更新之前 | 数据是新的,但页面是旧的,即页面尚未与数据保存同步。  (访问现有的DOM)
beforeUpdate(){ 
console.log('beforeUpdate'); 
},

//组件数据更新之前 | 数据是新的,页面也是新的,即页面和数据保持同步。
updated(){ 
console.log('updated'); 
this.$destroy(); 
},

//组件实例销毁之前 | (可做一些删除提示,如：您确定删除XX嘛？)
beforeDestroy(){ 
console.log('beforeDestroy'); 
},

//组件实例销毁之后 | 销毁后,当前组件已被删除,无法操作里面的任何东西了。
destroyed(){ 
console.log('destroyed'); 
},
})
</script>
 
</body>
</html>

六、V-On的使用

用来给元素注册点击事件的。

(1).v_on:事件名 ="事件函数"

(2).v-on:click 可以简写 @click

(3).v-on:mouseenter 可以简写 @mouseenter

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 当点击这个按钮,就调用fn1函数 -->
        <button v-on:click="fn1">快点我呀</button>
        <!-- 当双击这个按钮,就调用fn2函数 -->
        <button v-on:dblclick="fn2">快双击</button>
        <!-- 当移入这个按钮,就调用fn3函数 -->
        <button v-on:mouseenter="fn3">移入我</button>

        <!-- 简写形式:把v-on:改成@就是简写形式 -->
        <h4>以下是简写形式</h4>
        <hr>
        <!-- 当点击这个按钮,就调用fn1函数 -->
        <button @click="fn1">快点我呀</button>
        <!-- 当双击这个按钮,就调用fn2函数 -->
        <button @dblclick="fn2">快双击</button>
        <!-- 当移入这个按钮,就调用fn3函数 -->
        <button @mouseenter="fn3">移入我</button>


    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            
            // data与methods平级
            data:{

            },
            // Vue中放方法的地方
            methods:{
                fn1(){
                    alert('来砍一刀')
                },
                fn2(){
                    alert('砍了两刀')
                },
                fn3(){
                    alert('小朋友,快来玩呀')
                }
            }
        })
    </script>
</body>
</html>

七、V-Bind指令

v-bind指令用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-bind:让行内元素不写死
         简写   -->

    <div id="app">
        <a href="http://www.baidu.com">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                url:'http://taobao.com'
            },
            methods:{
                change(){
                this.url='http://xiaomi.com'
                    
                }
            }

        })
    </script>
</body>
</html>

八、V-Show

v-show指令的作用是：根据切换元素的显示状态。原理是修改元素的display，实现显示隐藏。通过判断自定义值为true或false进行隐藏显示。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-show="isshow">我是由v-show控制的</div>
        <div v-if="isshow">我是由v-if控制的</div>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                isshow:true
            }

        })
    </script>


</body>
</html>

九、V-If的使用

v-if用于条件判断，判断Dom元素是否显示。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 多分支使用v-if -->
        <h3>根据自己有多少钱，决定今天晚上吃什么</h3>
        <div v-else-if="money >= 10000">吃豪华海鲜自助</div>
        <div v-else-if="money >= 5000">吃季季红火锅</div>
        <div v-else-if="money >= 1000">嗦南昌拌粉</div>
        <div v-else-if="money >= 100">喝AD钙奶</div>
        <div v-else-if="money">不吃了呗，咋整</div>

        <hr>

        <!-- 双分支使用v-if -->
        <div v-if="age > 18">成年了,去网吧</div>
        <div v-else>未成年,去公园捡垃圾</div>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                money:10000,
                age:18
            }
        })
    </script>
</body>
</html>

十、V-If与V-Show的区别

v-show和v-if都可以用来控制标签的显示与隐藏
<标签 v-show=‘布尔值’><标签>
<标签 v-if=‘布尔值’><标签>
当布尔值为true,他们就显示；当布尔值为false,他们就隐藏.

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
       <div v-show="isShow">我是由v-show控制的</div>
       <div v-if="isShow">我是由v-if控制的</div>
    </div>

    <script src="./vue.js"></script>

    <script>
       new Vue({
           el:"#app",
           data:{
               isShow:true
           }
       })
    </script>

</body>
</html>

十一、V-For遍历数组

【v-for】
语法：<标签 v-if='item in 数组'></标签>

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <button @click="add">在最后添加一个</button>
        <button @click="shift">删除第一个</button>
        <ul>
            <!-- 第一个参数是元素 -->
            <li v-for="(item,index) in list">{{ item }}---{{ index }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:['依依','尔尔','叁叁','丝丝']
            },
            methods:{
                add(){
                    this.list.push('呜呜')
                },
                shift(){
                    this.list.shift('依依')
                }
            }
        })

    </script>
</body>
</html>

十二、V-For遍历对象

v-for可以遍历对象
语法：<标签 v-for="(val,key) in 对象"></标签>
<标签 v-for="val in 对象"></标签>

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <ul>
            <!-- 对象有多少个属性就会产生多少个这样的标签 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数是属性值,第二个参数是属性名 -->
            <!-- 跟名字无关,也可以简写只拿属性值 -->
            <li v-for="(val,key) in obj">{{ val }}---{{ key }}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'王鹤棣',
                    age:21,
                    sex:'男',
                    character:'handsome'
                }
            }
        })

    </script>
</body>
</html>

十三、V-For遍历数字

v-for 遍历数组，索引从0开始，v-for遍历数字索引从1开始

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字(指定次数的最高) -->
        <h2>以下是指定数字</h2>
        <ul>
            <li v-for="num in 20">{{ num }}</li>
        </ul>

    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

十四、V-For中的key

使用v-for 的时候，给对应的元素或组件添加上一个:key 属性，为了更好地复用，但是要保证这个 key 的值是唯一的，不然没什么意义。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'哈尼克孜'})">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>

    现象:当我勾了黄明昊,然后在下标1的位置添加了

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1, name:'王鹤棣'},
                    {id:2, name:'黄明昊'},
                    {id:3, name:'老秦'}

                ]
            }

        })
    </script>
</body>
</html>