VUE第一天

Vue
书写规范
var vm= new Vue({ el:元素id,（逗号结束） data：{内容}, methods：{ 函数名：function（）{ 执行的内容 } } }) ；

v-cloak：
<style>
[v-cloak] {
/* display: none; */把v-cloak的style设display：none;解决闪动的问题
}
</style>

v-text
<div v-text="msg2"></div>把msg2的内容输出到div中并且把div的内容覆盖

v-html
<div v-html="msg2">1212112</div>把msg2的内容解析到div中 并且也把div的内容覆盖

v-bind
<input type="button" value="按钮" v-bind:title="mytitle + '123'">v-bind: 是 Vue中，提供的用于绑定属性的指令
<input type="button" value="按钮" :title="mytitle+'123'"> 注意： v-bind: 指令可以被简写为 :要绑定的属性
v-bind 中，可以写合法的JS表达式 

v-on
Vue 中提供了 v-on: 事件绑定机制
 <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="定义的函数名"> 

methods
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function() {
alert('Hello')
}

.stop
<input type="button" value="戳他" @click.stop="btnHandler">阻止事件冒泡

.prevent
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>阻止morning行为

.ca.capture
<!-- 使用 .capture 实现捕获触发事件的机制 -->跟冒泡相反从下往上冒泡
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>

.self
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
<div class="inner" @click.self="div1Handler">.sele是让添加了self的元素不执行因为冒泡触发的事件
<input type="button" value="戳他" @click="btnHandler">
</div>

.once
使用 .once 只触发一次事件处理函数       这个例子就是之默认行为了once就变成了只执行一次
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

v-model
<input type="text" style="width:100%;" v-model="msg">
 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定可以在页面中改变html中预设的数据
 注意： v-model 只能运用在 表单元素中

eval（）
eval（）函数 执行计算字符串

class样式

第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
<h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>

在数组中使用三元表达式
<h1 :class="['thin', 'italic', 三元表达式名称?'类名':'类名']">这是一个很大很大的H1，大到你无法想象！！！</h1>三元表达式名称在vue data数据中值为ture就执行后面的类名否则就执行后面的

在数组中使用 对象来代替三元表达式，提高代码的可读性
<h1 :class="['thin', 'italic', {'类名':data名称} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>包装成对象的样式data名称为ture就执行否则不执行

在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符
<h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！z！！</h1>
data: {
classObj: {
类名: true,
类名: true,
类名: false,
类名: false
}
},

style样式
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},

v-for循环
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

循环对象数组
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]},

循环对象
注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
data: {
user: {
i	d: 1,
name: '托尼·屎大颗',
gender: '男'
}
},

迭代数字
 in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 
 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 
<p v-for="count in 10">这是第 {{ count }} 次循环</p>

v-if    v-show
<h3 v-if="data属性值">这是用v-if控制的元素</h3>显示隐藏会删除元素
<h3 v-show="data属性值">这是用v-show控制的元素</h3>显示隐藏不会删除元素

总结
<!-- 1. MVC 和 MVVM 的区别 -->

<!-- 2. 学习了Vue中最基本代码的结构 -->
<!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show -->
<!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once -->
<!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法 -->
<!-- 6. 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this -->
<!-- 7. 在 v-for 要会使用 key 属性 （只接受 string / number） -->
<!-- 8. v-model 只能应用于表单元素 -->
<!-- 9. 在vue中绑定样式两种方式 v-bind:class v-bind:style -->