Vue学习笔记(一) Vue学习笔记(一)

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小案例
1. 先准备一个div容器，设置id值
2. 在script标签中创建Vue实例，并用el指定Vue实例为哪个容器服务
3. data中放入要使用的数据
4. 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模板语法分为两大类
1. 插值语法：
  功能：用于解析标签体内容（标签体内容是在两个标签之间的内容）
  写法：{{js表达式}}，可以直接读取到data中的所有属性
2. 指令语法
  功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)
  举例：v-bind:href="https://www.it610.com/article/xxx" 或简写为 :href="https://www.it610.com/article/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的两种写法
1. el的两种写法
  (1)new Vue()的时候配置el属性
  (2)先创建Vue实例，随后通过vm.$mount('#root')指定el的值
2. 【Vue学习笔记(一)】data的两种写法
  (1)对象式
  (2)函数式
  如何选择？目前哪种写法都行，以后学习到组件时，data必须使用函数式，否则会报错
  一个重要的原则：由Vue管理的函数，使用到this指的是Vue实例。并且Vue管理的函数，一定不要写成箭头函数，一旦写了，this指的就不是Vue实例了
推荐阅读