Vue.js——01

目录

1.Vue的基本认识

2.Vue的基本使用

2.1 HelloWorld效果

2.2 使用Vue开发者工具调试（vue-devtools）

2.3 理解Vue的MVVM

3.模板语法

3.1 模板的理解

3.2 双大括号表达式

3.3 指令一：强制数据绑定

3.4 指令二：绑定事件监听

4.计算属性和监视属性

---

1.Vue的基本认识

1.官网：英文官网、中文官网

2.Vue.js是什么？

1）一位华裔前Google工程师(尤雨溪)开发的前端js库

2）作用：动态构建用户界面

3）特点：

• 遵循MVVM模式
• 编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
• 它本身只关注UI, 可以轻松引入vue插件（依赖于Vue.js）和其它第三库开发项目

4）与其它框架的关联：

• 借鉴angular的模板和数据绑定技术
• 借鉴react的组件化和虚拟DOM技术

 5）vue包含一系列的扩展插件(库)：

• vue-cli: vue脚手架
• vue-resource(axios): ajax请求
• vue-router: 路由
• vuex: 状态管理
• vue-lazyload: 图片懒加载
• vue-scroller: 页面滑动相关
• mint-ui: 基于vue的组件库(移动端)
• element-ui: 基于vue的组件库(PC端)

2.Vue的基本使用

2.1 HelloWorld效果

2.2 使用Vue开发者工具调试（vue-devtools）

1.下载vue-devtools

注意：下载vue-devtools的版本问题，不能下载最新版本
下载历史版本，这里用的是v4.1.5这个版本，亲测安装成功
怎么下载历史版本问题：进入github官网后，点击releases查看历史版本

找到需要的版本后，下载压缩包 

2.解压缩该压缩包

通过命令提示符进入该文件夹

3.然后输入：npm install
再输入：npm run build

出现以下界面即为安装成功

4.找到manifest.json
D:\chrome extensions\vue-devtools-4.1.5\shells\chrome\shells\chrome\manifest.json
然后打开这个manifest.json, 将persistent的值false改为true

5.在chrome中安装

打开chrome的“设置——>扩展程序”（或直接地址栏输入chrome://extensions/）

注意一定要打开“开发者模式”

按下列步骤添加扩展程序（注意选择的文件夹）

6.使用：（F12）

2.3 理解Vue的MVVM

3.模板语法

3.1 模板的理解

1）动态的html页面

2）包含了一些JS语法代码

• 双大括号表达式
• 指令(以v-开头的自定义标签属性)

3.2 双大括号表达式

1. 语法：{{exp}}
2. 功能：向页面输出数据
3. 可以调用对象的方法

3.3 指令一：强制数据绑定

1. 功能：指定变化的属性值（将属性值从一般的文本变为表达式）
2. 完整写法： v-bind:xxx='yyy' //xxx：属性名；yyy：属性值，会作为表达式解析执行
3. 简洁写法： :xxx='yyy'（用这个就好）

3.4 指令二：绑定事件监听

1. 功能: 绑定指定事件名的回调函数
2. 完整写法：v-on:事件名='xxx' //事件名：click、mouseover...；xxx：回调函数
3. 简洁写法：@事件名='xxx'（用这个就好）

4.计算属性和监视属性

1） 计算属性

• 在computed属性对象中定义计算属性的方法
• 在页面中使用{{方法名}}来显示计算的结果
• 通过getter/setter实现对属性值的显示和监视【getter/setter：是一种概念，getter：对应属性的get()，setter：对应属性的set()】

计算属性存在缓存, 多次读取只执行一次getter计算：缓存在表达式(方法名)里，根据表达式取值时先看缓存里有没有，调用过一次就会存进缓存，如果缓存没有，再去调用函数

2） 监视属性

• 通过vm对象的$watch()或watch配置来监视指定的属性
• 当属性变化时, 回调函数自动调用, 在函数内部进行计算