一. 安装略过
二. 创建项目
#vue init webpack fristProject
#cd fristProject
#npm run dev
三. 语法
1.组件的选项
new Vue({
data:{ //数据
a:1,
b:[]
},
methods:{ // 方法
doSomething:function(){
this.a ++;
}
},
watch:{ //监听:a变化前后的值
a:function(val,oldVal){
console.log(val,oldVal)
}
}
})
2.模板指令
//数据渲染
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>
//控制模块隐藏
<p v-if="isShow"></p> //不渲染
<p v-show="isShow"></p> //渲染
//循环列表
<li v-for="item in items">
<p v-text="item.label"></p>
</li>
//事件绑定
<button v-on:click="doThis"></button>
<button @click="doThis"></button> //简写
//属性绑定
<img v-bind:src="imgSrc"/>
<div :class={red:isRed}></div>
<div :class=[classA,classB]></div>