VUE-基础使用（基础）

(vue)渐进式框架 轻量级 

框架：是一套完整的解决方案，对项目的侵入性较大

库（插件）：提供某一个小功能，对项目的侵入性较小

vue.js  Angular.js、React.js 并称三大主流框架

使用前先引用vue.js

实例化Vue（）

例子

var vue=new Vue({

el：控制域，$('.div")

data:数据，

methods：{方法}

})

this

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

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

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

v-html：可以渲染html界面

 v-bind（属性绑定简写    ：）

括号里不加引号的都是我们data里的数据读取

如果想使用字符串需要加上引号

里面可以写表达式

里面也可以调用定义好的方法，拿到的是方法的返回值

v-on(事件绑定简写   @)

 

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

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

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

.once 事件只触发一次

 v-model数据双向绑定

1. 作用：数据双向绑定
2. 注意：绑定的是表单控件

Vue中样式的使用

使用class样式:

1. 数组
2. 三木表达式
3. 数组内置对象（对象的键是样式的名字，值是bool类型）
4. 直接通过对象

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象
2. 将样式对象，定义到 data 中，并直接引用到 :style 中
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
3. 在 :style 中通过数组，引用多个 data 上的样式对象
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

 V-for和key属性

1. 遍历数组，参数(item,index) in list
2. 遍历对象，参数(value,key,index) in list
3. 遍历数字，num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key

1. 让界面元素和数组里的每个记录进行绑定
2. key只能是字符串或者数字
3. key必须是唯一的

1. 区别：

1. v-if删除dom元素
2. v-show设置display:none

1. 应用场景：

1. v-if只修改一次的时候可以使用v-if
2. v-show频繁切换的时候可以使用v-show