1.引入vue<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.把html元素與vue關聯起來
<div id="div">
</div>
<script>
new Vue({
el: "#div"
})
</script>
3.差值運算式{{}} 里面只能寫值和運算式
注意語法：前后空格不空格會識別不了物件
注意：data可傳值過來
console.log(vm.$data)可取到data物件
console.log(vm.$el)可取到el的值
注意：data里面的值也會放到VM里面去 console.log(vm.a) console.log(vm.b)
注意：頁面更新是異步的
<div id="div">
{{ "1" }}
{{ 1 }}
{{ true }}
{{ false }}
{{ [1,2,3] }}
{{ {aa:"1",bb:"2"} }}
{{ undefinde }}
{{ null }}
{{ 1+1 }}
{{ 1/2 }}
{{ 1*10 }}
{{ a }}
{{ b }}
{{ c }}
</div>
<script>
const vm = new Vue({
el: "#div",
data: {
a: 10000,
b: 'aaaa',
c: ['a', 'b', 'c']
}
})
console.log(vm.$data)
console.log(vm.$el)
console.log(vm.a)
console.log(vm.b)
console.log(vm.c)
vm.a=111;
vm.a=555;
vm.a=666;
console.log(vm.$el.innerHTML) //結果是1000因為資料更新是異步的
所以得把最后一行執行完才會修改頁面上的資料所以vm.$el.innerHTML獲取的
還是原來頁面上的資料
vm.$nextTick(()=>{//是一個異步的方法等dom更新完畢之后才會執行這個方法
console.log(vm.$el.innerHTML) //結果是666
})
</script>
3.可以把el換成vm.$mout('div')
<div id="div">
{{ "1" }}
</div>
<script>
const vm = new Vue({
data: {
a: 10000,
b: 'aaaa',
c: ['a', 'b', 'c']
}
})
vm.$mout('#div')
</script>
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/114128.html
標籤：JavaScript
上一篇：前端網頁制作