## is
html5規定tbody里面必須是tr標簽,否則是錯誤的.通過is.
ul,ol,select都需要使用這種方式,否則出現bug.
```
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el: '#app',
})
</script>
```
## 子組件中的data不能是對象
```
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
data:function(){ //除了根組件,其他所有子組件中的data都必須是函數才行.因為子組件會被調用多次,每個子組件都應該有自己的數據.不會出現子組件互相影響的情況.
return {
content:'hello'
}
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el: '#app',
})
</script>
```
## 使用ref操作DOM
在開發中不可能完全不操作dom,所以vue提供了ref方法.
```
<div id="app">
<!--引用的名字叫hello-->
<div ref="hello" @click="handleClick">hello world</div>
</div>
<script>
var vm = new Vue({
el: '#app',
methods:{
handleClick:function () {
console.log(this.$refs.hello); //這里的$refs是所有的引用
}
}
})
</script>
```
## $refs 求值
$refs就是全局添加了ref的引用.利用$refs.xxx就可以獲取DOM元素
```
<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter', {
data: function () {
return {
number: 0,
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function () {
this.number++;
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#app',
data: {
total: 0,
},
methods: {
handleChange: function () {
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
```
- 基礎
- MVVM
- 前端組件化
- VUE實例
- 生命周期
- 指令
- v-bind
- 模板語法
- 使用樣式
- class樣式
- 內聯樣式
- v-for
- v-if和v-show
- 過濾器
- 計算屬性
- 方法偵聽器
- 計算屬性的set和get
- watch,computed,methods對比
- 樣式綁定
- 條件渲染
- 組件
- 組件化和模塊化區別
- 使用組件的細節
- 父子組件數據傳遞
- 組件參數校驗與非props特性
- 給組件綁定原生事件
- 非父子組件間的傳值
- 在vue中使用插槽
- 作用域插槽
- 動態組件與v-once指令
- 動畫特效
- vue中CSS動畫原理
- 使用animate
- 同時使用過度和動畫
- JS動畫與velocity的結合
- 多個元素或組件的過度
- vue列表過度
- 動畫封裝
- 路由
- 什么是路由
- VUEX
- 概述
- 安裝
- 訪問倉庫