vue学习笔记
一、关于MVVM
<body> <!-- 将来new的vue实例，会控制这个元素中的所有内容 --> <!-- vue 实例所控制的这个元素区域就是我们的 V --> <div id="app"> <p>{{ msg }}</p> </div> <script type="text/javascript"> //我们new出来的这个vm对象，就是我们的 MVVM 中的 VM 调度者 var vm = new Vue({ el :'#app',//表示new的这个vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M，专门保存页面的数据的 data:{ //存放的是el中要用到的数据 msg:'欢迎学习vue' //通过vue提供的指令，把数据渲染到页面上 } }) </script> </body>
二、插值表达式、v-cloak、v-text、v-html
1. 插值表达式 {{ }}
2. v-cloak 使用v-cloak能解决插值表达式闪烁问题
<style type="text/css"> [v-cloak]{ display:none; } </style> <p v-cloak>{{ msg }}</p>
3. v-text 作用与插值表达式相似
（不同点：①、v-text默认不会有闪烁问题
②、v-text会把元素里的内容清空全部替换，而插值表达式不会，插值表达式只会替换自己的占位符）
<h4 v-text="msg"></h4>
4.v-html 把赋值的内容为html
<div id="app"> <div>{{ msg2 }}</div> <div v-text="msg2"></div> <div v-html="msg2"></div> </div> <script type="text/javascript"> //我们new出来的这个vm对象，就是我们的 MVVM 中的 VM 调度者 var vm = new Vue({ el :'#app',//表示new的这个vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M，专门保存页面的数据的 data:{ //存放的是el中要用到的数据 msg:'欢迎学习vue', //通过vue提供的指令，把数据渲染到页面上 msg2:'<h1>哈哈，我是一个大大的h1，我大，我骄傲<h1>' } }) </script>
三、v-bind :
”v-bind:” 是用来绑定属性的指令
<div> <input type="button" name="" value="按钮" v-bind:title="mytitle "> </div> <script type="text/javascript"> var vm = new Vue({ el :'#app',//表示new的这个vue实例，要控制页面上的哪个区域 data:{ //存放的是el中要用到的数据 mytitle:'这是一个自己定义的title' } }) </script>
mytitle可以看作一个变量 而要在变量后面加 ‘123’等常量 ，可以用如下方法
<input type="button" name="" value="按钮" v-bind:title="mytitle + '123' ">
v-bind: 可以简写为 ：
<input type="button" name="" value="按钮" :title="mytitle + '123' ">
v-bind: 中可以写合法的js表达式
四、v-on
vue中提供了v-on事件绑定机制
<input type="button" name="" value="按钮" v-on:click="show">
show是一个事件 ，当点击按钮时会在methods属性中找到这个事件
var vm = new Vue({
el :'#app',//表示new的这个vue实例，要控制页面上的哪个区域
data:{ //存放的是el中要用到的数据
},
methods:{ //这个methods属性中定义了当前vue实例所有可以的方法
show:function(){
alert('hello');
}
}
})
可缩写为@
<input type="button" name="" value="按钮" @click="show">
在vue中使用事件绑定机制，为元素指定处理函数的时候，如果添加了小括号，就可以给函数传参了
<input type="button" name="" value="添加" @click="add(e)">
五、
在vm实例中 如果想要获取data中的数据 或者想调用methods中的方法，必须通过this.xx 这里的this表示vm实例
vm实例，会监听自己身上的所有实例的改变，如果数据一发生变化就会把新的数据同步到页面中去
六、事件修饰符
1、 .stop 阻止冒泡事件
<div class="inner" @click="divhandler"> <input type="button" name="" value="戳他" @click.stop="btnhandler"> </div>
2、 .prevent 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下，你就知道</a>
3、 .capture 添加事件侦听器时使用事件捕获模式
（捕获机制：先触发父容器的事件再触发子容器的事件）
<div class="inner" @click.capture="divhandler"> <input type="button" name="" value="戳他" @click="btnhandler"> </div>
4、 .self 只有事件本身元素 才会触发事件（子元素不会）
5、 .once 事件只触发一次
七、v-model
双向数据绑定
<input type="text" name="" v-model="msg3" style="width: 100%">
v-model只能用在表单元素
八、vue中使用样式
1、第一种使用方式，直接传递一个数组，这里的clas需要使用 v-bind 做数据绑定
<h1 :class="['thin','red','italic']">this is a big h1.big big big</h1>
2、在数组中使用三元表达式
<h1 :class="[flag?'active':'']">this is a big h1.</h1>
3、在数组中使用对象来代替三元表达式
<h1 :class="[{'active':flag}]">this is a big h1.</h1>
4、在为class使用 v-bind 绑定对象的时候，对象的属性是类名 对象的属性可用引号也可不用
<h1 :class="classobj">this is a big h1.</h1> data:{ classobj:{"red":true,"thin":true,"active":false} }
九、通过属性绑定为元素绑定行内样式
1、 直接通过 v-bind 给 style 绑定一个对象
<h1 :style="{color:'red','font-weight':200}">this is a h1</h1>
2、style绑定一个数组 数组里面为多个对象
<h1 :style="[style1,style2]"></h1> data:{ style1:{color:'red'}, style2:{'font-weight':200} }
