Vue指令学习
# new Vue({ vue所有的数据都是放到data里面的 # data:{ vue对象的数据 # a:1,对象 # b:[] , # } # methods:{vue对象的方法 # dosomthing: function() # { # this.a ++ # console.log(this.a) # } # # } # watch: { vue对象的监听 # 'a': function(val, oldVal) { # console.log(val, oldVal) # # } # } # # }) # 数据渲染 v-text, v-html, {{}} # <p>{{a}}</p> 双向绑定了a # <p v-text="a"></p> # <p v-html="a"></p> html保存了html结构 #这里的a都是对应到了Vue数据源中的a # 控制模块隐藏 v-if,v-show, # <p v-if="isShow"></p> # <p v-show="isShow"></p> # new Vue({ # data:{ # isShow:true, # } # }) #区别if 不渲染这个dom元素 show 是通过css的display:none对元素进行隐藏 #渲染循环列表v-for # <ul> # <li v-for="item in items"> # <p v-text="item.label"></p> # </li> # </ul> # data:{ # items:[ # {label:'apple'}, # {label:'banana'}, # ] # } #事件绑定 v-on #<button v-on:click="doThis" > </button> #<button @click="doThis" > </button> # methods:{ # doThis:function(something){ # # } # } #属性绑定:v-bind # <img v-bind:src="imgSrc"> # <div :class="{red:isRed}"></div> # <div :class="[classA,classB]"></div> # <div :class="[classA,{classB:isB,classC:isC]"></div>