带你深入浅出Vue
如果文章对你有帮助欢迎【关注❤️❤️❤️点赞收藏⭐⭐⭐】一键三连！一起努力！
前 言
️ Vue介绍
Vue是一套用于构建用户界面的渐进式框架- 与其它大型框架不同的是：Vue 被设计为可以自底向上逐层应用
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
- 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
️ 官网：https://cn.vuejs.org/
️ Vue特点
-
遵循 MVVM 模式
-
编码简洁，体积小，运行效率高, 适合移动/PC 端开发
-
它本身只关注 UI，也可以引入其它第三方库开发项目
-
采用组件或模式，提高代码复用率，并且让代码更好的维护
-
声明式编码，让编码人员无需直接操作DOM，提高开发效率
-
命令式编码
-
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
️ Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
<!-- 准备好一个容器 -->
<div id="app">
{{ message }}
</div>
<script type="text/javascript" >
//创建Vue实例
var app = new Vue({
el: '#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们可以写成一个对象。
message: 'Hello Vue!'
}
})
</script>
️ 模板语法
Vue模板语法有2大类：
-
插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 -
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/><hr/><hr/>
<h1>指令语法</h1>
<a :href="school.url" x="hello">点我去 {{school.name}} 学习</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'小客气',
school:{
name:'小可期（小客气）',
url:'https://blog.csdn.net/weixin_42222436?spm=1000.2115.3001.5343',
}
}
})
</script>
️ 数据绑定
Vue 数据绑定的方式有两种：
- 单向绑定(v-bind)：数据只能从data流向页面；
- 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
注意：
双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
️ data与el的2种写法
- el有2种写法：
(1). new Vue时候配置el属性。
(2). 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
// el的两种写法
const v = new Vue({
el:'#root', //第一种写法
data:{
name:'小客气'
}
})
console.log(v)
v.$mount('#root') //第二种写法
- data有2种写法：
(1).对象式
(2).函数式
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
data:{
name:'小客气'
}
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'小客气'
}
}
})
我承认，我偷懒了，大家请自行注释代码，要不然会报错。
️ MVVM模型
- M：模型(Model) ：data中的数据
- V：视图(View) ：模板代码
- VM：视图模型(ViewModel)：Vue实例
️ 数据代理
数据代理就是：通过一个对象代理对另一个对象中属性的操作（读/写）
- Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）- Vue中数据代理的好处：
更加方便的操作data中的数据- 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
️ 事件处理
1、事件的基本使用：
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
- 事件的回调需要配置在methods对象中，最终会在vm上；
- methods中配置的函数，不要用箭头函数！否则this就不是vm了；
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
- @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
2、Vue中的事件修饰符：
- prevent：阻止默认事件（常用）；
- stop：阻止事件冒泡（常用）；
- once：事件只触发一次（常用）；
- capture：使用事件的捕获模式；
- self：只有event.target是当前操作的元素时才触发事件；
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 阻止默认事件（常用） -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'小客气'
},
methods:{
showInfo(e){
alert('同学你好！')
// console.log(e.target)
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
3、Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行=> tab (特殊，必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
注意：Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
new Vue({
el:'#root',
data:{
name:'小客气'
},
methods: {
showInfo(e){
console.log(e.target.value)
}
},
})
️ 计算属性
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
- get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。 - 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
注意：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
测试：<input type="text" v-model="x"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
const vm= new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
x:'你好'
},
methods: {
demo(){}
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
//简写
computed:{
fullName(){
// 默认调用get
return this.firstName + '-' + this.lastName
}
}
️ 监视属性
监视属性watch：
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视！！
- 监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
}
}
})
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
//简写
vm.$watch('isHot', (newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})
扩展：
深度监视：
(1). Vue中的watch默认不监测对象内部值的改变（一层）。
(2). 配置deep:true可以监测对象内部值改变（多层）。
备注：
(1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2). 使用watch时根据数据的具体结构，决定是否采用深度监视。
️ 绑定样式
- class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 - style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
️ 条件渲染
-
v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
-
v-show
写法：v-show=“表达式”适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
️ 列表渲染
v-for指令:
- 用于展示列表数据
- 语法：v-for=“(item, index) in xxx” :key=“yyy”
- 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<div id="root">
<!--遍历数组 -->
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<div/>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
}
}
})
️ 收集表单数据
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
️ 过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
️ 内置指令
v-text 指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html 指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak 指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once 指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
️ 生命周期
- 又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm 或 组件实例对象。
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
️ Vue组件
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options
几乎一样，但也有点区别；
区别如下：
1.el不要写； 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数； 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法：关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。
2.我们只需要写感谢各位家人的观看喜欢的话点帮忙点赞哦
写这篇文章的时候发现了一个比较香的东西，作为一个爱分享的笔者，分享给家人们！！
拿去不谢
https://emoji.muan.co/