import Vue from 'vue'
new Vue({
el: '#root',
template: `
<div>
<div :class="[{ active: !isActive }]" :style="[styles, styles2]">
数据绑定
</div>
<div :class="{ active: !isActive }" :style="[styles, styles2]">
数据绑定
</div>
<div v-once>{{text}}</div>
<div v-pre>{{表达式不会被解析}}</div>
<div v-on:click="">Text: {{text}}</div>
<div v-if="text === 0">if content</div>
<div v-else-if="text === 1">else if content</div>
<div v-else>else content</div>
<div v-html="html"></div>
<input text="text" v-model="text">
<input type="checkbox" v-model="active">
<div>
<input type="checkbox" :value="1" v-model="arr">
<input type="checkbox" :value="2" v-model="arr">
<input type="checkbox" :value="3" v-model="arr">
</div>
<div>
<input type="radio" value="one" v-model="picked">
<input type="radio" value="two" v-model="picked">
</div>
<ul>
<li v-for="(item, index) in arr" :key="item">{{item}}:{{index}}</li>
</ul>
<ul>
<li v-for="(val, key, index) in obj">{{val}}:{{key}}:{{index}}</li>
</ul>
</div>
`,
data: {
// 遍历数组
arr: [1, 2, 3],
// 遍历对象
obj: {
a: '123',
b: '456',
c: '789'
},
picked: '',
text: 0,
active: true,
html: '<span>this is html</span>',
isActive: false,
styles: {
color: 'red',
appearance: 'none'
},
styles2: {
color: 'black'
}
}
})
// v-on原理:若是dom节点,通过document.addEventListener()绑定事件;如是组件,通过vue.$on()绑定事件
// v-model.number 只能输入数字
// v-model.trim 去除首尾空格
// v-model.lazy 默认绑定input事件,.lazy绑定change事件,失去焦点之后改变
执行结果
与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!