尚硅谷vue全家桶（vue2+vue3）笔记

Vue2

一、Vue核心

01_简介

1.特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护。
2. 声明式编码，让编程人员无需直接操作DOM（命令式编码），提高开发效率。
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

2.预备知识

1. ES6语法规范
2. ES6模块化
3. 包管理器（npm、yarn……
4. 原型、原型链【重要】
5. 数组常用方法
6. axios
7. promise
8. ……

3.官方文档

VUE2.0 VUE3.0

02_Hello入门案例

shift + F5：强制页面刷新

// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
    el: "#root", //用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串，也可以使用document.getElment...来获取容器
    data: {
        //data中用于存储数据，数据供el所指定的容器去使用
        msg: "ywj",
    },
});
1
2
3
4
5
6
7
8
9
10

初识Vue：

​ 1.想让Vue工作，就必须创建一个Vue实例(new)，且要传入一个配置对象；

​ 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(){}

03_模板语法

Vue模板语法有2大类：

1.插值语法：

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

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

2.指令语法：

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

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

备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

04_数据绑定

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

1.单向绑定(v-bind)：

数据只能从data流向页面。【缩写:】

2.双向绑定(v-model)：

数据不仅能从data流向页面，还可以从页面流向data。

v-model只能应用在表单类元素（输入类元素）上

备注：

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

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

05_补充 el与data的两种写法

1.el有2种写法

(1).new Vue时候配置el属性

​ 需要在创建Vue的时候就想好绑定在哪一个容器上

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1).对象式

new Vue({
    el:'#root',
    data:{
        //data数据
    }
})
1
2
3
4
5
6

(2).函数式

data:function(){	//	不能够写成箭头函数，因为箭头函数没有this
    //	可以省略成 data(){}
    //	this指向Vue实例对象
    return{
        //data数据
    }
}
1
2
3
4
5
6
7

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

06_MVVM模型

1.MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

2.观察发现：

1. data 中所有的属性，最后都出现在了vm身上。
2. vm 身上所有的属性 及 Vue原型上所有属性，在 Vue 模板中都可以直接使用。

07_数据代理

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/936080