1.
实现双向数据绑定
v-bind:href
缩写 :href
v-bind:class="{ active: isActive, 'text-danger': hasError }"
v-bind:style 直接设置样式
2.
监听 DOM 事件
v-on
例:v-on:click="dosomething" 缩写 @click="dosomething"
v-on:submit="onSubmit"
v-on:submit.prevent="onSubmit"
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
3.
条件
<p v-if="seen">现在你看到我了</p>
seen:true/false
div v-else-if="type === 'B'">
<div v-else>
4.
v-show 指令来根据条件展示元素
true/false
5.
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
迭代对象
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术,更是梦想!'
}
}
})
6.
Vue.js 计算属性
computed vs methods
效果上两个都是一样的,
但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
7.
Vue.js 监听属性
watch,我们可以通过 watch 来响应数据的变化。
8.
v-model 指令在表单控件元素上创建双向数据绑定。
9.
Vue.js 组件,组件可以扩展 HTML 元素,封装可重用的代码。
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
<div id="app">
<runoob></runoob>
</div>
10.
vue生命周期:
执行顺序:created->computed->mounted
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
如果错误,请指出,谢谢!