Vue.js的简单使用

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

MVVM拆分解释为：

Model:负责数据存储

View:负责页面展示

View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更

加简单

在编写Vue.js之前需要导入他的vue.min.js的文件

 链接：https://pan.baidu.com/s/1zkukOn9ComUDs2ofdLshqg

 提取码：9gxt

复制这段内容后打开百度网盘手机App，操作更方便哦（需要的可以自行下载）

vue.min,js文件

一：.然后我们在门户中创建一个vuetest的目录用来做测试使用，然后编写我们的第一个vue.js文件

第一个vue.js文件

代码的编写步骤：

1、定义html，引入vue.js

2、定义app div，此区域作为vue的接管区域

3、定义vue实例，接管app区域。

4、定义model（数据对象）

5、VM完成在app中展示数据

二：在此基础上我们做个非常简单的1+1=2的数学题

第二个vue.js文件

其中包括了：

1、v-model：在表单控件或者组件上创建双向绑定 

2、v-model仅能在如下元素中使用：

        input

        select

        textarea

        components（Vue中的组件）

3、解决插值表达式闪烁问题，使用v-text，v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

4、v-on绑定一个按钮的单击事件

5、v-bind：

（1）作用：

v‐bind可以将数据对象绑定在dom的任意属性中。

v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class

（2）举例：

<img v‐bind:src="imageSrc">

<div v‐bind:style="{ fontSize: size + 'px' }"></div>

（3）缩写形式

<img :src="imageSrc">

<div :style="{ fontSize: size + 'px' }"></div>

三：在Vue.js使用if和for循环，还有使用for循环来遍历数组

第三个vue.js文件

其中：

item表示数组中的值，index表示数组下标