vue基础用法&基础原理整理

1. vue基础知识和原理

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

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

1.3 数据绑定

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

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

tips:

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/>
    
    
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
</div>

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

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

1.5 Vue中的MVVM

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

1.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 在幕后运行。

vue的计算属性的底层构造感觉用到了这种思想，我目前还没看过源码，是这样猜想的。

截至目前，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>

在这里插入图片描述

打印结果为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 这样设计更利于开发者开发，我们在研究原理会觉得有些复杂（笑~）

来个尚硅谷张天禹老师做的图（非常推荐去看他的课，讲的非常好）

在这里插入图片描述

1.7 事件处理

事件的基本使用：

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


<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  -->
    <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>
        
        <!-- 点我提示信息 -->
    </div>
    
    <button @click.once="showInfo">点我提示信息</button>
</div>

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

1.9 计算属性

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Objcet.defineProperty方法提供的getter和setter
get函数什么时候执行？
- (1).初次读取时会执行一次
- (2).当依赖的数据发生改变时会被再次调用
优势：与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>

vue基础用法&基础原理整理

1. vue基础知识和原理

1.1 初识Vue

1.2 模板语法

1.3 数据绑定

1.4 el与data的两种写法

1.5 Vue中的MVVM

1.6 数据代理

1.7 事件处理

1.8 键盘事件

1.9 计算属性

相关文章

央媒谈“文盲演员”引发饭圈甩锅大战

野生大熊猫深夜遛达 镜头前呆萌打卡

张萌谈演员到底需不需要有文化

情人节多地迎领证高峰

婚房烂尾10年业主住进毛坯房

多地首套房贷利率降至4%以下 为什么急于提前还贷

野生大熊猫深夜遛达镜头前呆萌打卡

多地首套房贷利率降至4%以下为什么急于提前还贷