vue實例
每個 Vue 實例都會代理其 data 對象里所有的屬性：
<script type="text/javascript">
var vm= new Vue({
el : "#box",
data : {
a : 999,
data : 666
}
});
// alert(vm.a); //999
// alert(vm.$data.a); //999
// alert(vm.data); //666
// alert(vm.$data.data); //666
// alert(vm.$el === document.getElementById("box"));
//data.a = 3
//vm.a -> 3
//監(jiān)聽a的值亏拉，一旦改變隶债，就執(zhí)行回調(diào)函數(shù)
vm.$watch("a",function(newvalue,oldvalue){
console.log(newvalue,oldvalue)
});
</script>
生命周期
鏈接
beforeCreate created(觀察數(shù)據(jù)了讨，初始化事件)
beforeMount mounted（把實例掛載到元素上）
beforeUpdate updated（數(shù)據(jù)發(fā)生更新）
beforeDestory destoryed
vue 選項卡
每個tab頭有自己的身份值献汗，每個tab內(nèi)容有自己的身份值暇赤，tab頭和tab內(nèi)容的身份值會有對應(yīng)的關(guān)系
給tab頭綁定事件耙蔑，事件用來修改總身份值摹迷，把該tab頭的身份值作為參數(shù)傳給事件
在tab頭綁定class疟赊，當(dāng)自己的身份值和總身份值相等時，class生效
在tab內(nèi)容區(qū)綁定v-show峡碉，當(dāng)自己的身份值和總身份值相等時近哟，該欄內(nèi)容顯示
鏈接
刪除循環(huán)中的一項
在循環(huán)項中綁定事件，把循環(huán)的index作為參數(shù)傳入事件鲫寄，
在事件中用數(shù)組的splice(index,1)刪除index對應(yīng)的循環(huán)數(shù)組項
<ul>
<li v-for="item in list">{{item}} <input type="button" value="刪除" v-on:click="shanchu($index)"></li>
</ul>
"shanchu" : function(index){
this.list.splice(index,1); //使用數(shù)組的splice方法
}
渲染多個元素塊
如同 v-if 模板吉执，把v-for綁定到template上,v-show不能寫在template上
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
v-for迭代對象
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
使用原生事件
只需要在定義事件函數(shù)中，把event作為參數(shù)傳入即可
<div id="example-2">
<button v-on:click.stop="greet">Greet</button> //v-on:click.stop阻止事件冒泡
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
// `this` 在方法里指當(dāng)前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調(diào)用方法
example2.greet() // -> 'Hello Vue.js!'
一個單文件組件怎么寫
<template>
<div></div> //必須要有一個根元素
</template>
<style>
</style>
<script>
export default{ //使用es6導(dǎo)出模塊
data:function(){
return {
msg:'msg' //組件的data必須在函數(shù)的返回對象里
}
}
}
</script>
components:{
NavHeader //是 NavHeader : NavHeader 的縮寫
}
vue cli下的webpack配置
config 下的index.js 和 build 下的webpack.base.conf.js 是比較常用到的webpack配置文件 （可以配置dev端口等）
