vue2的相关内容-CSDN博客

本文链接：https://blog.csdn.net/m0_48154833/article/details/129826271

vue的概述

vue是一个渐进式 JavaScript 框架，主要采用了mvvm的模式。易学易用（指令化操作），性能出色（封装了对应的内容进行部分优化），适用场景丰富的 Web 前端框架（生态体系完善（阿里巴巴））。

渐进式框架（需要什么用什么）

vue （尤雨溪（阿里巴巴）最多人使用 2016开源）
react （Facebook 2013开源最流行的）
angular （谷歌最稳定）

mvvm

view 视图（主要就是DOM的相关操作）
viewmodel 视图模型（在vue中 vue实例对象就是vm） dom listeners dom监听器（主要用于监听dom的相关操作） dataBindings 数据绑定器（主要负责劫持对应的model中的数据的）
model 模型（数据）

vue的虚拟dom及diff算法

虚拟dom抽取实体dom模拟形成的对象
diff算法用于比对新旧虚拟dom的一个算法，利用patch进行打补丁包的相关操作来配合完成的。

vue的版本

vue2 （底层采用Object.defineProperty （全面兼容es5语法）2.6版本支持vue3的一些指令）
vue3 （2020年发布的底层采用了proxy （全面兼容es6语法简化了对应vue的操作及相关指令提高了对应的效率全面兼容vue2））

vue入门案例

引入对应的vue.js

通过webpack来构建对应的脚手架通过模块化导入

npm i vue -S

cdn导入

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>

入门代码

<!--{{}} 里面书写的内容为插值表达式-->
<div id="app">{{msg}}</div>
<script>
let vm = new Vue({
el:"#app", //挂载点
data:{
msg:"hello vue!!!"
} //数据 递归遍历进行劫持
})
</script>

插值表达式

插值表达式是vue采用的模板引擎的语法

let vm = new Vue({
el:"#app", //挂载点
data:{
msg:"hello vue!!!",
count:10,
float:10.232131,
str:"abcdef"
} //数据 递归遍历进行劫持
})

支持对应的运算

<!-- 支持算术运算 -->
{{++count}}
{{--count}}
{{count + 10}}
{{count - 10}}
{{count / 10}}
{{count % 10}}
<!-- 支持条件运算 boolean -->
{{count < 20}}
{{count > 20}}
<!-- 支持关系运算 -->
{{count && 0}}
{{count || 0}}
{{!count}}
<!-- 支持赋值运算 -->
{{count = 30}}
{{count += 30}}
<!-- 支持三元 -->
{{count>20?"吃饭":"没吃饭"}}

支持JavaScript语法

<!-- 支持JavaScript语法 -->
{{float.toFixed(2)}}
{{Math.round(float)}}
{{isNaN(float)}}
{{str.substr(0,2)}}
{{typeof str}}

vue相关vscode简化配置

配置代码片段

{
"vue2 create template": {
"prefix": "vue2",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"<meta charset=\"UTF-8\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-
scale=1.0\">",
"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"<title>Document</title>",
"</head>",
"",
"<body>",
"<div id=\"app\">",
"",
"</div>",
"<script src=\".bue.js\"></script>",
"<script>",
"new Vue({",
"el: \"#app\",",
"data: {",
"$1",
"}",
"})",
"</script>",
"</body>",
"",
"<ml>"
],
"description": "vue2 create template"
},
"create vue3 template": {
"prefix": "vue3",
"body": [
"<!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\">",
"{{title}}",
"</div>",
"<script src=\"./jsue.js\"></script>",
"<script>",
"const App = {",
"data() {",
"return {",
"title: 'hello vue'",
"}",
"}",
"}",
"const app = Vue.createApp(App)",
"app.mount('#app')",
"</script>",
"</body>",
"",
"<ml>"
],
"description": "create vue template"
},
"%": {
"prefix": "%",
"body": [
"<%$1%>",
],
"description": "Log output to console"
},
"text": {
"prefix": "text",
"body": [
"<text>$1</text>",
],
"description": "text"
},
"view": {
"prefix": "view",
"body": [
"<view>$1<iew>",
],
"description": "view"
},
"link": {
"prefix": "link",
"body": [
"<link rel=\"stylesheet\" href=\"$1\">",
],
"description": "% output to <%$1%>"
},
"create {}": {
"prefix": "{",
"body": [
"{$1}"
],
"description": "create {}"
}
}

相关插件下载

谷歌插件安装

Vue的参数option

el 挂载点（不能是body或者html标签内部采用的querySeletor来选择自动选择第一个）
data 数据（递归来进行劫持里面的数据可以被$data和_data访问）
methods 方法（可以使用vm对象直接访问）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=
"viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
{{msg}}
</div>
<div>
{{msg}}
</div>
<script src="./lib/vue.js"></script>
<script>
// vue是一个对应的类 构造函数
//里面的option组成
//el 挂载点 就是我们的vm管理哪个地方的view 传入的是选择器的名字 （querySelector） el
不能是body标签或者是html标签
//data数据 劫持的数据 （递归data里面的数据进行劫持）
//methods方法 存储对应的函数
let vm = new Vue({
el: "div",
data: {
msg:'hello'
},
methods: {
sayHi(){
console.log('hi')
}
},
})
//对应的option传入的内容 在vue构造中使用对应的属性来接收 属性名都是$开头
console.log(vm.$data) //访问传入的data
console.log(vm.$el) //访问传入的el
console.log(vm.$methods) //无法访问
console.log(vm.sayHi) //所有的方法都是属于vue实例的 直接可以使用vue实例来访问对应的方
法
// 数据也是一样
console.log(vm.msg)
</script>
</body>
</html>

vue的指令

vue的指令是用于dom相关操作（vue封装了对应的指令来帮助我们进行dom操作），vue是一个数据驱动视图的框架，内部的指令负责对应的虚拟dom的相关操作，从而进行渲染，那么我们就不需要自己去操作dom了。我们的关注点应该在于数据的变化。
vue的指令都是v-开头的，
vue的指令内部采用的也是插值表达式语法。
vue中指令都是用于标签上（相当于标签的属性）

v-html （相当于innerHTML）

<p v-html="htmlCode"></p>

v-text （相当于innerText 他和插件表达式直接书写是一样的）

<p v-text="htmlCode"></p>

v-if 控制内容渲染
v-show 控制内容的显示隐藏

<div id="app">
<!-- v-if 根据条件的值进行渲染或者不渲染 -->
<p v-if="isShow">v-if</p>
<p v-else-if="!isShow">v-else-if</p>
<p v-else>v-else</p>
<!-- v-show 根据条件的值进行显示或者不显示 通过display的属性值来进行显示和隐藏的-->
<div v-show="isShow">v-show</div>
<!-- v-if和v-show的区别
v-show 一定会渲染（渲染一次）
v-if 不一定渲染 （渲染多次 控制重新渲染的操作）
切换比较多的场景 采用v-show 切换少的场景使用v-if
--
>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow:false
}
})
</script>

v-if和v-show的区别

v-show 一定会渲染（只渲染一次通过更改display来控制的）
v-if 不一定渲染（为false就不渲染为true就渲染）
v-show 在多个切换的时候使用 v-if在切换较少情况下使用

v-bind 属性绑定

基础书写

v-bind:属性名="属性值"

简写

:属性名="属性值"

样式绑定

绑定class名字
绑定style 传入字符串传入对象（key为样式名（驼峰命名））*

<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div id="app" >
<!-- v-bind:属性名="data中的属性值" -->
<p v-bind:username="name"></p>
<!-- 简写方式 :属性名="data中属性值" 常用的 -->
<p :name="name"></p>
<!-- 关于样式的绑定 -->
<!-- 使用绑定class的形式 -->
<p :class="isRed?'red':'green'">123</p>
<!-- 绑定style的形式 -->
<p :style="styleCss">绑定style</p>
<p :style="{backgroundColor:color}">绑定style</p>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
name:"jack",
isRed:false,
color:"yellow",
styleCss:"background-color:blue;"
}
})
</script>
</body>

v-for 循环渲染

基础使用

v-for="(value,key) in 数组或对象"

v-for对象的遍历

<!-- 对象的遍历 v-for作用在什么地方 就生成什么内容
第一个是值 第二个才是key-->
<div v-for="(value,key) in obj" :key="key">
{{key}} : {{value}}
</div>
<!-- 只需要value -->
<div v-for="v in obj">
{{v}}
</div>

v-for数组的遍历

<!-- 遍历数组 -->
<ul>
<li v-for="v in array">{{v}}</li>
</ul>
<ul>
<li v-for="(v,index) in array" :key="v">{{index}}:{{v}}</li>
</ul>

字符串遍历

<!-- 一般遍历操作都需要绑定对应的key值 diff算法 -->
<!-- v-for为什么要加key 因为效率 diff优先比对自身的key 如果没有key值那么比对次数会多于
有key值
下标不能作为key 因为下标可变
-->
<!-- 字符串遍历 -->
<ul>
<li v-for="i in 'abc'" :key="i">{{i}}</li>
</ul>

v-for的注意实现

v-for必须绑定key值且key值不能为下标（diff算法的比对）
v-for和v-if的优先级问题

vue2 v-for要高于v-if
vue3 v-if 要高于 v-for 且会报错

v-if和v-for不建议在一个标签上使用

v-on事件绑定

基础写法

v-on:事件名.事件修饰符="methods里面的方法"

简写

@事件名.事件修饰符="methods里面的方法"

<div id="app">
{{msg}}
<!-- 事件绑定 -->
<button v-on:click="handlerClick">点击修改</button>
<!-- 简写 使用@符号
@事件名.事件修饰符="methods里面的函数"
-->
<button @click="handlerClick">修改</button>
<!-- 如果不需要传入自定义的参数 那么不带括号 如果需要传入自定义的参数那么需要带上括号 -->
<button @click="handlerClick()">带括号修改</button>
<button @click="handler">不带括号携带的参数</button>
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg:'hello'
},
methods:{
//里面的函数不能是箭头函数
handlerClick(){
console.log('点击了')
// 修改对应的值 this
// 这个里面this指向对应的vue实例
this.msg = "hello world"
this.sayHello()
},
handler(){
console.log(arguments) //携带对应的event对象
},
sayHello(){
console.log("hello")
}
}
})
</script>

事件修饰符

.stop 停止事件冒泡（stopPropagation）
.prevent 禁止默认行为（preventDefault）
.capture 捕获
.self 自身触发
.once 只触发一次
passive 会告诉浏览器你不想阻止事件的默认行为

按键修饰符

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

<!-- 事件修饰符 -->
<!-- 停止事件冒泡 -->
<div @click="handler1">
<button @click.stop="handler">点击</button>
</div>
<!-- 禁止默认行为 -->
<a href="" @click.prevent="handler">你好</a>
<!-- 按键修饰符 enter 回车键 -->
<input type="text" @keydown.enter="handler">

辅助相关的

v-pre 跳过编译（不会解析）跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak 等待编译完成渲染这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once 只编译一次（只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。）

<div id="app">
<!-- 跳过编译 加速编译 -->
<p v-pre>{{msg}}</p>
<!-- 等待编译完成 空白 -->
<p v-cloak>{{msg}}</p>
<!-- v-once 只编译一次 (只读取第一次的值 页面刷新的时候) -->
<p v-once>{{msg}}</p>
<button @click="msg = '修改'">点击修改</button>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg:"hello vue"
}
})
</script>

v-slot 插槽（vue2.6后版本才支持）

写法

v-slot:插槽名="接收的数据"
v-slot:插槽名

简写使用#

#插槽名="接收的数据"
#插槽名

v-model 双向数据绑定

v-model是用于表单元素的双向数据绑定主要绑定的是value值

原理实现

观察者模式 + 数据劫持（Object.defineProperty || proxy）

基础使用

v-model="data中的值"

<div id="app">
<!-- 表单元素的双向数据绑定 -->
<input type="text" v-model="msg">
<!-- 原理是监听对应的input框的change事件 或input事件 来触发对应的数据劫持的相关操作-->
{{msg}}
<textarea v-model="text" id="" cols="30" rows="10"></textarea>
{{text}}
<input type="range" v-model="number">
{{number}}
<!-- 复选框 通过name属性来建立联系 -->
<input type="checkbox" name="list" value="苹果" v-model="list">
<input type="checkbox" name="list" value="香蕉" v-model="list">
<input type="checkbox" name="list" value="梨" v-model="list">
<input type="checkbox" name="list" value="猕猴桃" v-model="list">
{{list}}
<!-- 单选框 -->
<input type="radio" name="sex" value="男" v-model="sex">
<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<!-- 如果是一个radio且没有value值 那么绑定内容为checked （有内容就选中） 不建议书写的-->
<input type="radio" v-model="radio">{{radio}}
<!-- 复选框如果不填value值 绑定就不是value值 而是checked属性 -->
<input type="checkbox" v-model="check">{{check}}
<select name="" id="" v-model="select">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
{{select}}
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg:"数据",
text:"",
number:10,
//多个复选框绑定的内容必须是个数组
list:[],
sex:"男",
radio:'',
check:"",
select:""
}
})
</script>