目录

一、Vue的概念

1.什么是vue.js

二、MVC与MVVM的区别

三、Vue.js的代码结构

1、引入vue.js

2、写视图层，我们要展示的内容

3、实例化Vue()

（1）data：存放数据

（2）el：这个控制是哪块视图

（3）methods：放我们的方法

图下示例：

四、插值表达式、v-cloak、v-text、v-html

1、如何获取变量值呢？

（1）插值表达式{{}}，可以在前后插入一些内容

（2）v-text：会替换掉元素里的内容

（3）v-html：可以渲染html界面

示例：

五、事件修饰符

1、.stop 阻止冒泡

2、.prevent 阻止默认事件

3、.capture 添加事件侦听器时使用事件捕获模式

4、.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.5、once 事件只触发一次

示例：

六、v-model数据双向绑定

1、作用：数据双向绑定

2、注意：绑定的是表单控件

3、示例：

---

一、Vue的概念

1.什么是vue.js

1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

二、MVC与MVVM的区别

1、MVC 是后端的分层开发概念;

2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

三、Vue.js的代码结构

1、引入vue.js

2、写视图层，我们要展示的内容

3、实例化Vue()

（1）data：存放数据

（2）el：这个控制是哪块视图

（3）methods：放我们的方法

引入js
 
展示区域{{msg}}{{num * 2 + 3}}
{{num}}
 
 
 

注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候需要注意this的指向问题。

四、插值表达式、v-cloak、v-text、v-html

1、如何获取变量值呢？

（1）插值表达式{{}}，可以在前后插入一些内容

（2）v-text：会替换掉元素里的内容

（3）v-html：可以渲染html界面