vue学习一（慕课网学习笔记）

一. 安装略过

二. 创建项目

     #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>