Vue的学习路线规划

Vue基础
Vue-cli
Vue-router
Vuex
Element-ui
Vue3

本文是作者跟着尚硅谷的张天禹老师的视频学习时做的笔记

Vue是什么

官网给出的定义如下：

一套用于 构建用户界面的渐进式 JavaScript框架

什么是构建用户界面？
就是把数据展示在页面的合适位置
什么是渐进式？
Vue可以自底向上逐层的应用。
也就是说，假如我们要做一个简单的应用，那么我们只需要一个轻量的核心库就可以；
如果我们要做一个复杂的应用，那么我们可以引入各式各样的Vue插件来增强功能。

Vue的特点

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率

搭建Vue开发环境

Vue的安装方式

直接用
chrome的Vue插件安装

国外的同学可以在chrome网上应用店可以搜到
国内的同学要在网上找到下面这个文件把它拖到chrome的扩展程序页面里就可以安装成功

接着在chrome的右上角把Vue开发工具固定在地址栏右边

Hello小案例

先准备一个div容器，设置id值

在script标签中创建Vue实例，并用el指定Vue实例为哪个容器服务

data中放入要使用的数据

div中用{{数据的key值}}取得数据并显示

Document //准备好容器 {{name}}

在页面中显示为

注意事项

真实开发中只有一个Vue实例，并且会配合着组件一起使用

{{js表达式}}中的js表达式可以自动读取到data中的所有数据

一旦data中的数据发生改变，那么页面中有用到该数据的地方也会自动改变

区分：js表达式和js语句
*1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，例如a、a+b、demo(1)、a === b ? x:y
2.语句：例如if语句,for语句等*

Vue模板语法

Vue模板语法分为两大类

插值语法：
功能：用于解析标签体内容（标签体内容是在两个标签之间的内容）
写法：{{js表达式}}，可以直接读取到data中的所有属性

指令语法
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)
举例：v-bind:href="xxx" 或简写为 :href="xxx",xxx同样要写成js表达式，且可以读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子

关于指令语法，我们举个例子
例如，我们要在页面上弄个超链接，链接地址数据放在Vue实例的data中

Document 跳转到百度

说白了就是标签里的属性可以取到data里的值，不过要在属性前加v-bind或者:（可以简写为:的只有v-bind指令，其它的不行），另外指令语法也可以用在标签体内容、绑定事件

额外补充一点：
取data中的属性时，可以有层级关系的取值
例如，我们要取两个名字，一个是学生的名字，一个是学校的名字

{{name}} {{name1}}

如果这样写的话，那么我们在data中是不是得写一个name属性,一个name1属性?

我们可以这样做，把它改成

{{stu.name}} {{school.name}}

同时在data中这样写

最终在页面中显示为

单向数据绑定与双向绑定

单向数据绑定用的是v-bind指令
双向数据绑定用的是v-model指令

我们用v-model举个例子来告诉大家什么是双向绑定

Document

注意输入框和data里的数据是一样的，当我们把输入框里的文字改变时，data里的数据也跟着一起改变

而v-bind的单向数据绑定指的是只有data里的数据变化时，我们在页面中的数据跟着改变，当页面中的值改变时，data里的值不跟着改变
说白了单向绑定就是数据只能由data流向页面，而双向绑定是两边互流

双向绑定一般都应有在表单类元素上（如input、select）

v-model：value可以简写为v-model，因为v-model默认收集的是value值

el与data的两种写法

el的两种写法
(1)new Vue()的时候配置el属性
(2)先创建Vue实例，随后通过vm.$mount('#root')指定el的值

data的两种写法
(1)对象式
(2)函数式
如何选择？目前哪种写法都行，以后学习到组件时，data必须使用函数式，否则会报错
一个重要的原则：由Vue管理的函数，使用到this指的是Vue实例。并且Vue管理的函数，一定不要写成箭头函数，一旦写了，this指的就不是Vue实例了