vue.js(vue简单指令)
HTML页面: <div id="app">{{message}}</div>
页面中的数据就是data中的数据
模版指令:控制模块的内容
v-text (控制元素的文本内容) eg: <p v-text="a"></p> --> a 是data中的a
v-html(控制元素的内容,包括内部结构 ) eg:<p v-html="a"></p>
控制模块隐藏
v-if eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏
v-show eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏
渲染循环列表
v-for
eg: <ul>
<li v-for="item in items">
<p v-text="item.label"></p> -->item是items里的每一个对象,items是data里的数组
</li>
</ul>
事件绑定
v-on eg:<button v-on:click="doSomething"></button> click 可以是hover,focus等事件
eg: <button @click="doSomething"></button> 简写形式
属性绑定
v-bind eg:<img v-bind:src="imageSrc"> src属性赋值 imgSrc
(简写)eg: <div :class="{red:isRed}"></div> isRed:true:加上类red,false:不加类red
eg: <div :class="[classA, classB]"></div> 绑定多个类名
eg: <div :class="[classA,{classB: isB, classC: isC}]"></div>
js:var app = new Vue({
el:"#app",
data:{ 这里填写数据,以键值对的形式
a:"heollo",
demo:1,
items:[{label:"vue1"},{label:"vue2"}]
},
methods:{这里可以写自己定义的函数,
doSomething:function(){
console.log(this.a); --> this指代的是vue的对象, a 是data里的a
}
},
watch:{ 监听,监听demo的变化, 参数是变化前后的值变化
'demo':function(val, oldVal){
console.log(val, oldVal);
}
}
});