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
//监听a的值，一旦改变，就执行回调函数
vm.$watch("a",function(newvalue,oldvalue){
console.log(newvalue,oldvalue)
});
</script>
生命周期
链接
beforeCreate created(观察数据，初始化事件)
beforeMount mounted（把实例挂载到元素上）
beforeUpdate updated（数据发生更新）
beforeDestory destoryed
vue 选项卡
每个tab头有自己的身份值，每个tab内容有自己的身份值，tab头和tab内容的身份值会有对应的关系
给tab头绑定事件，事件用来修改总身份值，把该tab头的身份值作为参数传给事件
在tab头绑定class，当自己的身份值和总身份值相等时，class生效
在tab内容区绑定v-show，当自己的身份值和总身份值相等时，该栏内容显示
链接
删除循环中的一项
在循环项中绑定事件，把循环的index作为参数传入事件，
在事件中用数组的splice(index,1)删除index对应的循环数组项
<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); //使用数组的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>
使用原生事件
只需要在定义事件函数中，把event作为参数传入即可
<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` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'
一个单文件组件怎么写
<template>
<div></div> //必须要有一个根元素
</template>
<style>
</style>
<script>
export default{ //使用es6导出模块
data:function(){
return {
msg:'msg' //组件的data必须在函数的返回对象里
}
}
}
</script>
components:{
NavHeader //是 NavHeader : NavHeader 的缩写
}
vue cli下的webpack配置
config 下的index.js 和 build 下的webpack.base.conf.js 是比较常用到的webpack配置文件 （可以配置dev端口等）
