文章目录
一、准备工作
1.介绍
vue是一个前端框架,也是其实是一个js文件;vue.js的下载方式:
- 可以引用在线的vue.js;
- 可以离线下载vue.js;
- npm包资源管理器,可以下载vue.js
2.下载配置node
2.搭建工程
二、知识学习
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)
感谢浏览和收藏