vue2.0——第三天（侦听器、计算属性、vue-cli、vue组件）

目录

1、watch侦听器

1.1什么是watch侦听器

1.2. 使用 watch 检测用户名是否可用

1.3侦听器的格式 

1.4immediate 选项

1.5deep深度侦听和监听对象单个属性的变化

2、计算属性

2.1.什么是计算属性

2.2通过案例来体会一下计算属性

3、 axios（ 一个专注于网络请求的库）

3.1axios基础语法

3.1.1 调用 axios 方法得到的返回值是 Promise 对象 

3.1.2服务器返回的真实数据 

3.1.3 代码替换写法

3.1.4axios的传参

3.2使用axios发起基本的GET请求

3.3使用axios发起基本的POST请求

3.3.1结合async和await调用axios

3.3.2使用解构赋值 

3.4基于axios.get和axios.post发起请求

3.4.1axios.get()发GET请求

3.4.2axios.get()发POST请求

4、vue-cli

4.1什么是单页面应用程序

4.2什么是 vue-cli

4.3.安装和使用 

4.3.1安装

4.3.2vue-cli创建项目的步骤截图

4.4vue 项目中 src 目录的构成

4.5vue 项目的运行流程

4.6测试$mount()方法 

5、vue组件

5.1什么是组件化开发

5.2vue 中的组件化开发

5.3.vue 组件的三个组成部分 

5.3.1template

5.3.2script

5.3.3style

5.4使用组件的3个步骤

5.4.1组件之间的父子关系

5.4.2使用组件的3个步骤

5.4.3在VScode中配置@路径提示的插件

5.4.4通过 components 注册的是私有子组件

5.4.5注册全局组件

5.4.6auto close tag自动闭合标签插件

5.5props

5.5.1为count组件声明props自定义属性

5.5.2结合v-bind使用自定义属性 

5.5.3props 是只读的

5.5.4props 的 default 默认值

5.5.5props 的 type 值类型

5.5.6props 的 required 必填项

5.6组件之间的样式冲突问题

5.6.1思考：如何解决组件样式冲突的问题

5.6.2style 节点的 scoped 属性

 5.6.3/deep/ 样式穿透

---

1、watch侦听器

1.1什么是watch侦听器

1.2. 使用 watch 检测用户名是否可用

1.3侦听器的格式 

1.4immediate 选项

1.5deep深度侦听和监听对象单个属性的变化

2、计算属性

2.1.什么是计算属性

计算属性指的是 通过一系列运算 之后，最终得到一个 属性值 。

这个动态计算出来的属性值 可以被模板结构或 methods 方法使用。示例代码如下：

2.2通过案例来体会一下计算属性

没有使用计算属性的情况，进行了3次手动动态拼接比较麻烦

使用计算属性

3、 axios（ 一个专注于网络请求的库）

3.1axios基础语法

3.1.1 调用 axios 方法得到的返回值是 Promise 对象 

3.1.2服务器返回的真实数据 

服务器返回的真实数据是books.data

axios向接口服务器发起请求，接口服务器返回的是三个属性，但是axios返回给我们的却是5个属性，因为axios拿到数据之后帮我们套了一层壳。

3.1.3 代码替换写法

3.1.4axios的传参

3.2使用axios发起基本的GET请求

3.3使用axios发起基本的POST请求

3.3.1结合async和await调用axios

1. 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
2. await 只能用在被 async “修饰”的方法中

简化后：结合async和await调用axios

3.3.2使用解构赋值 

POST请求

GET请求

3.4基于axios.get和axios.post发起请求

3.4.1axios.get()发GET请求

3.4.2axios.get()发POST请求

4、vue-cli

4.1什么是单页面应用程序

4.2什么是 vue-cli

4.3.安装和使用 

4.3.1安装

安装成功

4.3.2vue-cli创建项目的步骤截图

1.执行vue create 项目名称 命令之后会出现以下：

2.选择第三个（手动选择生成）会出现以下：

 3.选择版本

 4.css预处理器

 5.插件配置项放到独立的配置文件中

4.4vue 项目中 src 目录的构成

4.5vue 项目的运行流程

4.6测试$mount()方法 

5、vue组件

5.1什么是组件化开发

组件化开发 指的是：根据 封装 的思想， 把页面上可重用的 UI 结构封装为组件 ，从而方便项目的开发和维护。

5.2vue 中的组件化开发

vue 是一个 支持组件化开发 的前端框架。

vue 中规定： 组件的后缀名 是 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

5.3.vue 组件的三个组成部分 

每个 .vue 组件都由 3 部分构成，分别是：

1. template -> 组件的模板结构
2.  script -> 组件的 JavaScript 行为
3. style -> 组件的样式

其中， 每个组件中必须包含 template 模板结构 ，而 script 行为 和 style 样式 是 可选的 组成部分。

5.3.1template

template只能包含唯一的根节点：

5.3.2script

5.3.3style

5.4使用组件的3个步骤

5.4.1组件之间的父子关系

5.4.2使用组件的3个步骤

以Left为例：（Right同理）

5.4.3在VScode中配置@路径提示的插件

  //导入文件时是否携带文件的扩展名
    "path-autocomplete.extensionOnImport": true,
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@":"${folder}/src"
    },

5.4.4通过 components 注册的是私有子组件

5.4.5注册全局组件

5.4.6auto close tag自动闭合标签插件

只用写标签的左半部分，右半部分会自动生成

5.5props

5.5.1为count组件声明props自定义属性

5.5.2结合v-bind使用自定义属性 

5.5.3props 是只读的

5.5.4props 的 default 默认值

5.5.5props 的 type 值类型

5.5.6props 的 required 必填项

5.6组件之间的样式冲突问题

5.6.1思考：如何解决组件样式冲突的问题

5.6.2style 节点的 scoped 属性

 5.6.3/deep/ 样式穿透