Day25_Vue—Vue的使用

一、准备工作

1.介绍

vue是一个前端框架，也是其实是一个js文件；vue.js的下载方式：

• 可以引用在线的vue.js；
• 可以离线下载vue.js；
• npm包资源管理器，可以下载vue.js

2.下载配置node

2.搭建工程

学习视频：项目搭建 以及 使用npm的方式安装vue模块

二、知识学习

1.双向绑定与事件处理

2.双向绑定与事件处理的原理

3.钩子函数

钩子函数具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy

created钩子函数常用场景：用于初始化数据

this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属性、方法等。

4.插值{{msg}}、v-text和v-html

5.v-model的使用

使用v-model指令实现复选框的双向绑定

• 刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行（可以将vue实例中的data属性的msg值输出到页面，但是没办法改变msg的值）。
• 接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

6.v-on的使用

在没有使用vue之前；页面标签可以通过设置onXXX（如onClick）响应事件；在vue中可以通过v-on指令响应事件。

语法：
v-on:事件名="js片段或函数名"

简写语法：
@事件名="js片段或函数名"

v-on:click='add' 可以简写为 @click='add'

7.v-for的使用

8.v-if的使用

9.v-if和v-show

10. v-bind的使用

11.计算属性

12.watch的使用

在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。

如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name

三、组件的使用

1.全局组件和局部组件

组件使用场景：在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

• 全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
• 局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块
  
  
  
  

2.父组件向子组件通信

3.子组件向父组件通信

子组件如何修改父组件的值

四、Axios

• axios的作用：发送异步请求获取数据。
• 常见的方法：get、post；
• 在发送的时候可以指定参数（地址、请求方式和请求头部信息）；
• 返回数据结构（data/status/statusText/headers/config）
  
  
  
  
  
  

感谢浏览和收藏