Vue2是一个渐进式JavaScript框架，以组件化、声明式编码和高性能为特点。本文详细介绍了Vue2的安装、基本使用、插件、模板语法、MVVM模型、数据代理、事件处理、计算属性、组件系统、Vue CLI的使用、Vuex状态管理和路由管理等多个方面，旨在全面阐述Vue2的各个方面，帮助开发者深入理解和掌握Vue2的核心概念和最佳实践。
Vue2
简介
一套用于构建用户界面的渐进式js框架
特点
1、采用组件化模式，提高代码复用率、且让代码更好维护
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率
3、使用虚拟DOM+优秀算法Diff算法，尽量复用DOM节点
安装
官网：Vue.js
学习——教程——安装——用<script>引入——选择开发版或生产版
使用前准备
<script src="../../Vue/vue.js">
将文件引入后打开浏览器测试，f12中会出现两个提示，第一个是提示安装开发者工具：
将vue_dev_tools.crx文件拖入到谷歌浏览器的扩展程序（设置—扩展程序）中
安装完毕后如果还是提示就在扩展中打开vue，设置允许访问文件地址！
如果另一个提示不想显示：在官网中点击API，找到全局配置productionTip。在html页面中引入
<script>
Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
</script>
插件
Vue3 Snippets：vue代码提示
初识Vue
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2、root容器里的代码依然符合html规范，只不过混入了一些特殊Vue语法
3、root容器里面的代码被称为Vue模板
4、Vue实例和容器是一一对应的
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7、一旦data中的数据发生改变，那么模板(页面)中用到该数据的地方也会自动更新
注意区分：js表达式和js代码(语句)
1）表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo()
(4). x === y ? 'a' : 'b'
2）js代码(语句)
(1). if () {}
(2). for () {}
创建Vue实例：
<div id="root">
你好！{{name}}<!-- 调用改动的值 -->
</div>
<script>
const vm = new Vue({
el:'#root',
data: {//data中用于储存数据，数据供el所指定容器去使用，值可以写成对象或函数
name: '世界'//存入要改动的值,如果有多个值，用逗号隔开
}
});
//只传入一个参数—配置对象
//el:'#root'：el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串(与id为root的元素建立联系)
// 或者可以写成document.querySelector('#root');
</script>
el与data的两种写法
el：
const vm = new Vue({
el:'#root'//第一种
})
console.log(vm);
vm.$mount('#root');//第二种.vm原型上的方法
data:
const vm = new Vue({
//第一种:对象式
data:{
name:'刘德华'
},
//第二种：函数式
data:function(){//简写为data(){}
console.log(this);//this指向Vue的实例对象vm
return{
name:'刘德华'
}
}
})
console.log(vm);
由Vue接管的函数，一定不要写成箭头函数，一旦写了箭头函数，this就不再是Vue实例了
模板语法
插值语法：
功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件....）
举例：v-bind:href="xxx" 或简写为:href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性
备注：Vue中有很多指令，且形式都是：v-xxxx形式
<div id="root">
<a v-bind:href="url">百度</a>
<!-- v-bind: 可以简写成 : -->
<a :href="url">百度</a>
</div>
<script>
const vm = new Vue({
el:'#root',
data: {
url:'https://www.baidu.com/'
}
});
</script>
数据绑定
Vue中由两种数据绑定的方式：
1、单向绑定(v-bind)：数据只能从data流向页面
2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
备注：
(1)双向绑定一般都应用在表单类元素上（如：input、select等）
(2)v-model:value可以简写为v-model，因为v-model默认收集的就是value值
MVVM模型
M：模型（Model）：对应data中的数据
V：使徒（View）：模板
VM：视图模型（ViewModel）：Vue实例对象
备注：
(1)data中所有的属性，最后都出现在vm身上
(2)vm身上的所有属性以及Vue原型上的所有属性，在Vue模板中都可以直接使用
数据代理
Object.definePropery()方法
定义
通过一个对象代理对另一个对象中属性的操作（读/写）
Vue中的数据代理
事件处理
事件的基本使用：
v-on:click简写：@click
<div id="root">
<h1>学校</h1>
<button v-on:click="show">
提示信息
</button>
</div>
<script>
const vm = new Vue({
methods: {
show() { //show可以传参
alert('你好')
}
}
});
</script>
事件修饰符
1）prevent：阻止默认事件
2）stop：阻止事件冒泡
3）once：事件只触发一次
4）capture：使用事件的捕获模式
5）self：只有event.target是当前操作的元素时才触发事件
6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕
7）native: 组件上也可以绑定原生DOM事件，需要使用native修饰符
修饰符可以连写
<!--阻止默认事件 -->
<div id="root">
<a href="https://www.baidu.com" @click.prevent="show">提示信息</a>
</div>
<script>
const vm = new Vue({
methods: {
show() { //show可以传参
alert('你好')
}
}
});
</script>
键盘事件
Vue中常用的按键别名：
回车 => enter
删除 => delete（捕获退格和删除键）
退出 => esc
空格 => space
换行 => tab（特殊，要配合keydown使用）
上 => up
下 => down
左 => left
右 => right
Vue.config.keyCodes.自定义键名 = 键码 可以自定义案件名，如：
Vue.config.keyCodes.huiche = 13
<!-- 也可以使用keycode去指定具体的按键，比如回车的键码是13(不推荐) --> <input type="text" placeholder="按下回车提示" @keydown.enter="show"> <input type="text" placeholder="按下回车提示" @keydown.13="show">
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转换为kebab-case(短横线命名--如：CapsLock转换为caps-lock)，可以通过e.key获得键名
系统修饰符(用法特殊)：ctrl、alt、shift、meta（win键）：
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放修饰键，事件才能被触发（如果想绑定按下的另一个键，可以@keyup.ctrl.y）
（2）配合keydown使用：正常触发事件
计算属性
conputed
定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
备注：计算属性最终会出现在vm上，直接读取即可({{xxx}})
const vm = new Vue({
conputed:{
xxx:{
get(){//当有人读取了xxx时，get就会被调用，且返回值就是xxx的值
return 1
}
set(){//如果不需要修改可以不写
}
}
}
})
get调用：
1、初次读取xxx时
2、所依赖的数据发生变化时
set调用：当xxx被修改时
简写：
只有只读不修改的时候才可以使用
const vm = new Vue({
conputed:{
xxx(){//当做get使用
}
}
})
监视属性
watch
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<!-- 准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
<!-- <button @click="isHot = !isHot">切换天气</button> -->
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
number:{
a:1,
b:2
}
},
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)
}
}
//监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('a被改变了')
}
}
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了')
}
}
}
})
//第二种写法
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>简写
不使用immediate和deep时使用
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
//第二种
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue)
})conputed和watch区别
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
绑定CSS、style样式
:class :style
*绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
条件渲染
条件渲染指令：
-
v-if、v-else、v-else-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
-
v-show
v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<!-- 准备好一个容器-->
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
<!-- v-else和v-else-if -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:0
}
})
</script>
列表渲染
v-for:用于展示列表数据
语法：v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!-- 准备好一个容器-->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
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:'黑色'
},
str:'hello'
}
})
</script>
key的原理
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
列表过滤
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//用watch实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.includes(val)
})
}
}
}
})
//用computed实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
列表排序
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
computed:{
filPerons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
</script>
Vue监视数据原理！！！！
Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
收集表单数据
收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/> 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2.配置input的value属性: (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组 备注：v-model的三个修饰符： lazy：失去焦点再收集数据 number：输入字符串转为有效的数字 trim：输入首尾空格过滤
<!-- 准备好一个容器-->
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" 备注： 1.过滤器也可以接收额外参数、多个过滤器也可以串联 2.并没有改变原本的数据, 是产生新的对应的数据
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是：{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） -->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好，尚硅谷'
},
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
})
</script>
内置指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示) v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 3.v-text不会解析html标签结构
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
}
})
</script>
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}}的问题。
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
v-once:
1.v-once所在节点在初次动态渲染后，就视为静态内容了。 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre
1.跳过其所在节点的编译过程。 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令(directives)
一、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) (2).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调： (1).bind：指令与元素成功绑定时调用。 (2).inserted：指令所在元素被插入页面时调用。 (3).update：指令所在模板结构被重新解析时调用。
三、备注： 1.指令定义时不加v-，但使用时要加v-； 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
生命周期（mounted(){}）
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。
组件
components、extend
定义：实现应用中局部功能代码和资源的集合
使用组件的三大步骤
一、定义组件(创建组件)
使用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>
例如：
<!-- 准备好一个容器-->
<div id="root">
<hello></hello>
<hr>
<h1>{{msg}}</h1>
<hr>
<!-- 第三步：编写组件标签 -->
<school></school>
<hr>
<!-- 第三步：编写组件标签 -->
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//第一步：创建school组件
const school = Vue.extend({
template:`
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
data(){
return {
schoolName:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.schoolName)
}
},
})
//第一步：创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'张三',
age:18
}
}
})
//第一步：创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
//第二步：全局注册组件
Vue.component('hello',hello)
//创建vm
new Vue({
el:'#root',
data:{
msg:'你好啊！'
},
//第二步：注册组件（局部注册）
components:{
school,
student
}
})
new Vue({
el:'#root2',
})
</script>
注意点：
1.关于组件名: 一个单词组成： 第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成： 第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签: 第一种写法：<school></school> 第二种写法：<school/> 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式： const school = Vue.extend(options) 可简写为：const school = options
//例如：
//定义组件
const s = Vue.extend({
name:'atguigu',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
//简写为
//定义组件
const s = {
name:'atguigu',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
}
组件的嵌套
<!-- 准备好一个容器-->
<div id="root">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
//注册组件（局部）
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{{msg}}</h1>`,
data(){
return {
msg:'欢迎来到尚硅谷学习！'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件（局部）
components:{app}
})
</script>
VueComponent
1）school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2）我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象， 即Vue帮我们执行的：new VueComponent(options)。
3）特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
4）关于this指向： (1).组件配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 (2).new Vue(options)配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5）VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 Vue的实例对象，以后简称vm。
一个重要的内置关系（原型）
VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
非单文件组件
一个文件中包含多个组件
单文件组件
一个文件中只包含一个组件
插件
因为vscode不认识.vue文件，所以要下载vetur插件
安装后快捷键<v自动补全标签
组成组件的解构
<template>
<!--编写html结构 -->
</template>
<script>//编写js结构
export default {//模块化
}
</script>
<style>/* 编写css结构 */</style>
文件组成
app.vue--服务index.html的组件,是所有组件的父组件
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from './School.vue'
import Student from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
<style></style>
index.html--主页
<!-- 准备一个容器 -->
<div id="root"></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
main.js--引入app，创建vue实例
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})
school、student--服务app.vue的子组件
<template>
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
Vue脚手架（Vue CLI）
Vue脚手架就是Vue官方提供的标准化开发工具（开发平台）
.vue文件如果没有脚手架解析，浏览器解析不了
网站：Vue官网--生态系统--Vue CLI
安装步骤
1、仅第一次执行：
全局安装@Vue/cli
npm install -g @vue/cli（在cmd中输入）
测试：在cmd中输入vue
2、切换到你要创建的目录，然后使用命令创建项目
vue create xxxx
xxx为项目名
3、启动项目
vue run serve
备注：
如出现下载缓慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org(在cmd中输入)
Vue脚手架隐藏了所有Webpack相关的配置，若想查看具体的webpack配置，执行：vue inspect> output.js
可更改的参数
生态系统--Vue CLI--配置参考
文件
components：存放子组件
src：存放app.vue和main.js
assets：存放静态文件（图片、视频之类）
public：存放html文件和ico图标
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
$ref属性
-
被用来给元素或子组件注册引用信息（id的替代者）
-
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
-
使用方式：
(1)打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
(2)获取：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
//引入School组件
import School from './components/School'
export default {
name:'App',
components:{School},
data() {
return {
msg:'欢迎学习Vue！'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) //真实DOM元素
console.log(this.$refs.btn) //真实DOM元素
console.log(this.$refs.sch) //School组件的实例对象（vc）
}
},
}
</script>
props配置
\1. 功能：让组件接收外部传过来的数据
\2. 传递数据：<Demo name="xxx"/>
\3. 接收数据：
\1. 第一种方式（只接收）：props:['name']
\2. 第二种方式（限制类型）：props:{name:String}
\3. 第三种方式（限制类型、限制必要性、指定默认值）：
props:{
• name:{
• type:String, *//类型*
• required:true, *//必要性*
• *default*:'老王' *//默认值*
• }
• }
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
//App文件
<template>
<div>
<Student name="李四" sex="女" :age="18"/>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name:'App',
components:{Student}
}
</script>
//student文件
<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生年龄：{{myAge+1}}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this)
return {
msg:'我是一个尚硅谷的学生',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
//简单声明接收
// props:['name','age','sex']
//接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
}
</script>
mixin混入（合）
\1. 功能：可以把多个组件共用的配置提取成一个混入对象
\2. 使用方式：
第一步定义混合：
{ data(){....},
• methods:{....},
• mixin:{} .... }
第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
插件
\1. 功能：用于增强Vue
\2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
\3. 定义插件：
对象.install = function (Vue, options) {
• *// 1. 添加全局过滤器*
• Vue.filter(....)
• *// 2. 添加全局指令*
• Vue.directive(....)
• *// 3. 配置全局混入(合)*
• Vue.mixin(....)
• *// 4. 添加实例方法*
• Vue.prototype.$myMethod = function () {...}
• Vue.prototype.$myProperty = xxxx
}
\4. 使用插件：Vue.use()（）中填写插件所在的文件名
scoped样式
\1. 作用：让样式在局部生效，防止冲突。
\2. 写法：<style scoped>
不同的组件写的css汇总的时候会冲突，如果类名写的一样会遵循最后引入的
<style lang=""lang的值可以写less，意为用less编写样式
组件自定义事件
\1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
\2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
\3. 绑定自定义事件：
(1)第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
(2)第二种方式，在父组件中：
<Demo ref="demo"/>
• ......
• mounted(){
• this.$refs.xxx.$on('atguigu',this.test)
• }
(3)若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
\4. 触发自定义事件：this.$emit('atguigu',数据)
\5. 解绑自定义事件this.$off('atguigu')
\6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
\7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
全局事件总线
\1. 一种组件间通信的方式，适用于任意组件间通信。
\2. 安装全局事件总线：
new Vue({
......
beforeCreate() {
• Vue.prototype.$bus = this *//安装全局事件总线，$bus就是当前应用的vm*
},
......
})
\3. 使用事件总线：
(1) 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
• demo(data){......}
}
......
mounted() {
• this.$bus.$on('xxxx',this.demo)
}
(2)提供数据：this.$bus.$emit('xxxx',数据)
\4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
消息订阅与发布
\1. 一种组件间通信的方式，适用于任意组件间通信。
\2. 使用步骤：
(1) 安装pubsub：npm i pubsub-js
(2)引入: import pubsub from 'pubsub-js'
\3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
• demo(data){......}
}
......
mounted() {
• this.pid = pubsub.subscribe('xxx',this.demo) *//订阅消息*
}
\4. 提供数据：pubsub.publish('xxx',数据)
\5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
nextTick
\1. 语法：this.$nextTick(回调函数)
\2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
\3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
动画与过度
\1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
\2. 图示：
\3. 写法：
1、准备好样式：
- 元素进入的样式：
(1). v-enter：进入的起点
(2). v-enter-active：进入过程中
(3). v-enter-to：进入的终点
- 元素离开的样式：
(1). v-leave：离开的起点
(2). v-leave-active：离开过程中
(3). v-leave-to：离开的终点
2、使用<transition>包裹要过度的元素，并配置name属性：
<transition name="hello"> <h1 v-show="isShow">你好啊！</h1> </transition>
\3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。
//动画
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好啊！</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data() {
return {
isShow:true
}
},
}
</script>
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active{
animation: atguigu 0.5s linear;
}
.hello-leave-active{
animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
//过度
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group name="hello" appear>
<h1 v-show="!isShow" key="1">你好啊！</h1>
<h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>
</div>
</template>
<script>
export default {
name:'Test',
data() {
return {
isShow:true
}
},
}
</script>
<style scoped>
h1{
background-color: orange;
}
/* 进入的起点、离开的终点 */
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
/* 进入的终点、离开的起点 */
.hello-enter-to,.hello-leave{
transform: translateX(0);
}
</style>
配置代理
### 方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
说明：
\1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
\2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
\3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
### 方法二
编写vue.config.js配置具体代理规则：
module.exports = {
devServer: {
proxy: {
'/api1': {*// 匹配所有以 '/api1'开头的请求路径*
• target: 'http://localhost:5000',*// 代理目标的基础路径*
• changeOrigin: true,
• pathRewrite: {'^/api1': ''}
},
'/api2': {*// 匹配所有以 '/api2'开头的请求路径*
• target: 'http://localhost:5001',*// 代理目标的基础路径*
• changeOrigin: true,
• pathRewrite: {'^/api2': ''}
}
}
}
}
// *changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000*
// *changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080*
// *changeOrigin默认值为true*
说明：
\1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
\2. 缺点：配置略微繁琐，请求资源时必须加前缀。
插槽slot
\1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
\2. 分类：默认插槽、具名插槽、作用域插槽
\3. 使用方式：
(1). 默认插槽：
父组件中： • <Category> <div>html结构1</div> • </Category> 子组件中： • <template> <div> <!-- 定义插槽：父组件中div的内容会在插槽中展示；若父组件中没有结构，则会展示插槽中的默认内容--> • <slot>插槽默认内容...</slot> • </div> • </template>
(2). 具名插槽：
父组件中： • <Category> • <template slot="center"> <div>html结构1</div> • </template> • <template v-slot:footer> <div>html结构2</div> • </template> • </Category> 子组件中： • <template> <div> • *<!-- 定义插槽 -->* • <slot name="center">插槽默认内容...</slot> • <slot name="footer">插槽默认内容...</slot> • </div> • </template>
1、父组件中的slot=“center”与子组件中的name=“center”对应（即name为center的内容会在slot为center的地方展示）
2、两种写法：slot=“xxx”、v-slot:xxx；第二种写法只能应用于template标签上
(3). 作用域插槽：
\1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
\2. 具体编码：
父组件中：
• <Category>
• <template scope="scopeData">
• *<!-- 生成的是ul列表 -->*
• <ul>
• <li v-for="g in scopeData.games" :key="g">{{g}}</li>
• </ul>
• </template>
• </Category>
•
• <Category>
• <template slot-scope="scopeData">
• *<!-- 生成的是h4标题 -->*
• <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
• </template>
• </Category>
• 子组件中：
• <template>
<div>
• <slot :games="games"></slot>
• </div>
• </template>
•
<script>
• export default {
• name:'Category',
• props:['title'],
• //数据在子组件自身
• data() {
• return {
• games:['红色警戒','穿越火线','劲舞团','超级玛丽']
• }
• },
• }
• </script>
1、父给子传结构、子给父传数据。
2、子组件中：:games="games"意为给父组件中传入data中games数组。
3、父组件中scope="scopeData"必须写在template标签中，意为接收子组件传过来的数据，打印scopeData为{games：['红色警戒','穿越火线','劲舞团','超级玛丽']}。scope的值可以任意命名
4、子组件可以传递多个数据，父组件中只写一次scope就可以接收到多个数据
5、解构赋值：scope="scopeData"也可以写为scope="{games}"
6、两种写法：scope="scopeData"、slot-scope="scopeData"
Vuex
专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件之间的通信方式，且适用于任意组件中的通信
安装：
Vue2只能用vuex3
vue3只能用vuex4
npm i vuex@3 @3：指定版本
引入：import Vuex from 'vuex'
使用插件：Vue.use(Vuex)
搭建环境
\1. 创建文件：src/store/index.js
*//引入Vue核心库*
*import* Vue *from* 'vue'
*//引入Vuex*
*import* Vuex *from* 'vuex'
*//应用Vuex插件*
Vue.use(Vuex)
*//准备actions对象——响应组件中用户的动作*
const actions = {}
*//准备mutations对象——修改state中的数据*
const mutations = {}
*//准备state对象——保存具体的数据*
const state = {}
*//创建并暴露store*
*export* *default* new Vuex.Store({
actions,
mutations,
state
})
\2. 在main.js中创建vm时传入store配置项
*//引入store*
*import* store *from* './store'
......
*//创建vm*
new Vue({
el:'#app',
render: h => h(App),
store
})
基本使用
\1. 初始化数据、配置actions、配置mutations，操作文件store.js
*//引入Vue核心库*
*import* Vue *from* 'vue'
*//引入Vuex*
*import* Vuex *from* 'vuex'
*//引用Vuex*
Vue.use(Vuex)
const actions = {
• *//响应组件中加的动作*
jia(context,value){
• *// console.log('actions中的jia被调用了',miniStore,value)*
• context.commit('JIA',value)
},
}
const mutations = {
• *//执行加*
JIA(state,value){
• *// console.log('mutations中的JIA被调用了',state,value)*
• state.sum += value
}
}
*//初始化数据*
const state = {
sum:0
}
*//创建并暴露store*
*export* *default* new Vuex.Store({
actions,
mutations,
state,
})
\2. 组件中读取vuex中的数据：$store.state.sum
\3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写**dispatch**，直接编写****commit**
getters
\1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
\2. 在store.js中追加getters配置
const getters = {
bigSum(state){
return state.sum * 10
}
}
*//创建并暴露store*
export default new Vuex.Store({
......
getters
})
\3. 组件中读取数据：$store.getters.bigSum
四个map方法的使用
\1. mapState方法：用于帮助我们映射state中的数据为计算属性
//靠程序员自己亲自去写计算属性
computed:{
//靠程序员自己亲自去写计算属性
sum(){
return this.$store.state.sum
},
school(){
return this.$store.state.school
},
subject(){
return this.$store.state.subject
},
computed: {
• *//借助mapState生成计算属性：sum、school、subject（对象写法）*
• ...mapState({sum:'sum',school:'school',subject:'subject'}),
•
• *//借助mapState生成计算属性：sum、school、subject（数组写法）*
• ...mapState(['sum','school','subject']),
}
\2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed:{
bigSum(){
return this.$store.getters.bigSum
}
}
computed: {
• *//借助mapGetters生成计算属性：bigSum（对象写法）*
• ...mapGetters({bigSum:'bigSum'}),
• *//借助mapGetters生成计算属性：bigSum（数组写法）*
• ...mapGetters(['bigSum'])
},
\3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{
//程序员亲自写方法
incrementOdd(){
this.$store.dispatch('jiaOdd',this.n)
},
incrementWait(){
this.$store.dispatch('jiaWait',this.n)
},
}
methods:{
• *//靠mapActions生成：incrementOdd、incrementWait（对象形式）*
• ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
• *//靠mapActions生成：incrementOdd、incrementWait（数组形式）*
• ...mapActions(['jiaOdd','jiaWait'])
}
\4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{
//程序员亲自写方法
increment(){
this.$store.commit('JIA',this.n)
},
decrement(){
this.$store.commit('JIAN',this.n)
},
}
methods:{
• *//靠mapActions生成：increment、decrement（对象形式）*
• ...mapMutations({increment:'JIA',decrement:'JIAN'}),
•
• *//靠mapMutations生成：JIA、JIAN（对象形式）*
• ...mapMutations(['JIA','JIAN']),
}
> 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。
vuex模块化+命名空间
\1. 目的：让代码更好维护，让多种数据分类更加明确。
\2. 修改store.js
const countAbout = {
namespaced:true,*//开启命名空间*
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced:true,*//开启命名空间*
state:{ ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
• countAbout,
• personAbout
}
})
\3. 开启命名空间后，组件中读取state数据：
*//方式一：自己直接读取*
this.$store.state.personAbout.list
*//方式二：借助mapState读取：*
...mapState('countAbout',['sum','school','subject']),
\4. 开启命名空间后，组件中读取getters数据：
*//方式一：自己直接读取*
this.$store.getters['personAbout/firstPersonName']
*//方式二：借助mapGetters读取：*
...mapGetters('countAbout',['bigSum'])
\5. 开启命名空间后，组件中调用dispatch
*//方式一：自己直接dispatch*
this.$store.dispatch('personAbout/addPersonWang',person)
*//方式二：借助mapActions：*
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
\6. 开启命名空间后，组件中调用commit
*//方式一：自己直接commit*
this.$store.commit('personAbout/ADD_PERSON',person)
*//方式二：借助mapMutations：*
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
路由
\1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
\2. 前端路由：key是路径，value是组件。
基本使用
\1. 安装vue-router，命令：npm i vue-router
vue-router4只能在vue3中使用
vue-router3只能在vue2中使用
\2. 应用插件：Vue.use(VueRouter)
\3. 编写router配置项:
*//引入VueRouter*
*import* VueRouter *from* 'vue-router'
*//引入Luyou 组件*
*import* About *from* '../components/About'
*import* Home *from* '../components/Home'
*//创建router实例对象，去管理一组一组的路由规则*
const router = new VueRouter({
routes:[
• {
• path:'/about',
• component:About
• },
• {
• path:'/home',
• component:Home
• }
]
})
*//暴露router*
*export* *default* router
\4. 实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
\5. 指定展示位置
<router-view></router-view>
几个注意点
\1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
\2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
\3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
\4. 整个应用只有一个router，可以通过组件的$router属性获取到。
多级路由（多级路由）
\1. 配置路由规则，使用children配置项：
routes:[
{
• path:'/about',
• component:About,
},
{
• path:'/home',
• component:Home,
• children:[ *//通过children配置子级路由*
• {
• path:'news', *//此处一定不要写：/news*
• component:News
• },
• {
• path:'message',*//此处一定不要写：/message*
• component:Message
• }
• ]
}
]
\2. 跳转（要写完整路径）：
<router-link to="/home/news">News</router-link>
路由的query参数
\1. 传递参数
*<!-- 跳转并携带query参数，to的字符串写法 -->*
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
•
*<!-- 跳转并携带query参数，to的对象写法 -->*
<router-link
:to="{
• path:'/home/message/detail',
• query:{
• id:666,
• title:'你好'
• }
}"
>跳转</router-link>
\2. 接收参数：
$route.query.id $route.query.title
命名路由
\1. 作用：可以简化路由的跳转。
\2. 如何使用
(1). 给路由命名：
{
• path:'/demo',
• component:Demo,
• children:[
• {
• path:'test',
• component:Test,
• children:[
• {
• name:'hello' *//给路由命名*
• path:'welcome',
• component:Hello,
• }
• ]
• }
• ]
}
(2). 简化跳转：
*<!--简化前，需要写完整的路径 -->*
<router-link to="/demo/test/welcome">跳转</router-link>
*<!--简化后，直接通过名字跳转 -->*
<router-link :to="{name:'hello'}">跳转</router-link>
*<!--简化写法配合传递参数 -->*
<router-link
• :to="{
• name:'hello',
• query:{
• id:666,
• title:'你好'
• }
• }"
>跳转</router-link>
路由的params参数
\1. 配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
• {
• path:'news',
• component:News
• },
• {
• component:Message,
• children:[
• {
• name:'xiangqing',
• path:'detail/:id/:title', *//使用占位符声明接收params参数*
• component:Detail
• }
• ]
• }
]
}
\2. 传递参数
*<!-- 跳转并携带params参数，to的字符串写法 -->*
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
•
*<!-- 跳转并携带params参数，to的对象写法 -->*
<router-link
:to="{
• name:'xiangqing',
• params:{
• id:666,
• title:'你好'
• }
}"
>跳转</router-link>
> 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
\3.接收参数：
$route.params.id $route.params.title
路由的props配置
作用：让路由组件更方便的收到参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
*//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件*
*// props:{a:900}*
*//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件*
*// props:true*
*//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件*
props(route){
*return* {
• id:route.query.id,
• title:route.query.title
}
}
}
router-link的replace属性
\1. 作用：控制路由跳转时操作浏览器历史记录的模式
\2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
\3. 如何开启replace模式：<router-link replace .......>News</router-link>
编程式路由导航
\1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
区别：声明式导航能做的，编程式导航都能做。而且除了可以进行路由跳转，还可以做一些其他的业务逻辑（比如：注册页面点击注册完成后，要先提交数据再跳转）
\2. 具体编码：
*//$router的两个API*
this.$router.push({
name:'xiangqing',
• params:{
• id:xxx,
• title:xxx
• }
})
this.$router.replace({
name:'xiangqing',
• params:{
• id:xxx,
• title:xxx
• }
})
this.$router.forward() *//前进*
this.$router.back() *//后退*
this.$router.go() *//可前进也可后退*
缓存路由组件
\1. 作用：让不展示的路由组件保持挂载，不被销毁。
\2. 具体编码：
<template>
<!--缓存一个路由组件 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
<!--缓存多个路由组件 -->
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
</template>
注意：include中写组件名。如果不写include，则表示全部缓存
两个新的生命周期钩子
\1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
\2. 具体名字：
\1. activated路由组件被激活时触发。
\2. deactivated路由组件失活时触发。
路由守卫
\1. 作用：对路由进行权限控制
\2. 分类：全局守卫、独享守卫、组件内守卫
\3. 全局守卫:
*//全局前置守卫：初始化时执行、每次路由切换前执行*
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
*if*(to.meta.isAuth){ *//判断当前路由是否需要进行权限控制*
• *if*(localStorage.getItem('school') === 'atguigu'){ *//权限控制的具体规则*
• next() *//放行*
• }*else*{
• alert('暂无权限查看')
• *// next({name:'guanyu'})*
• }
}*else*{
• next() *//放行*
}
})
*//全局后置守卫：初始化时执行、每次路由切换后执行*
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
*if*(to.meta.title){
• document.title = to.meta.title *//修改网页的title*
}*else*{
• document.title = 'vue_test'
}
})
\4. 独享守卫:
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
*if*(to.meta.isAuth){ *//判断当前路由是否需要进行权限控制*
• *if*(localStorage.getItem('school') === 'atguigu'){
• next()
• }*else*{
• alert('暂无权限查看')
• *// next({name:'guanyu'})*
• }
}*else*{
• next()
}
}
\5. 组件内守卫：
*//进入守卫：通过路由规则，进入该组件时被调用*
beforeRouteEnter (to, from, next) {
},
*//离开守卫：通过路由规则，离开该组件时被调用*
beforeRouteLeave (to, from, next) {
}
路由器的两种工作模式
\1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
\2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
\3. hash模式：
(1). 地址中永远带着#号，不美观 。
(2). 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
(3). 兼容性较好。
\4. history模式：
(1). 地址干净，美观 。
(2). 兼容性和hash模式相比略差。
(3). 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
UI组件库
移动端常用UI组件库
-
Cube UI:cube-ui Document
-
Mint UI:Mint UI
PC端常用UI组件库
京东设计的UI库：NutUI - 移动端 Vue2、Vue3、小程序 组件库
按需引入：如果全部引入组件库会导致文件太大，所以需要按需引入（组件库官网中会有提示）
扫一扫
3522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
