vue学习

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节点进行一些需要的操作。

 

如果错误，请指出，谢谢！