-
3.2 組件拆分
<div id="root">
<div>
<input? v-model='inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-iteim v-for="(item,index) of list :key="index" :content="item">
</todo-iteim>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
查看全部 -
新建一個(gè)實(shí)例 將這個(gè)實(shí)例于dom上對應(yīng)的id綁定起來 new vue（｛ el：“#id” ｝）查看全部
-
v-html不會轉(zhuǎn)義，而v-text會進(jìn)行一次轉(zhuǎn)義
查看全部 -
computed? 計(jì)算屬性
watch? 偵聽屬性
查看全部 -
v-on 簡寫? @? 事件綁定
v-bind 簡寫 :? ?單向綁定
v-model? ?雙向綁定
查看全部 -
2.5 TODOLIST功能
<div id="root">
<div>
<input? v-model='inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for = "(iteim,index) of list" :key="index"
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
查看全部 -
腳手架工具里 data是使用函數(shù) ?不是之前的使用對象
查看全部 -
<div id="root">
????<div v-show="show"> hello world</div>
????<button @click = "handleClick">toggle</button>
????<ul>
????????<li v-for="(item,index) of list" : key="index"{{iteim}}"</li>
????</ul>
</div>
<script>
????new Vue({
????????el:"#root",
????????data:{
????????????show:true,
????????????list:[1,2,3]
????????},
????????methods:{
????????????handleclick:function(){
????????????????this.show = ! this.show;
????????}
查看全部 -
v-text無法渲染數(shù)據(jù)中html元素，而v-html能夠?qū)?shù)據(jù)中的html元素渲染出來。
查看全部 -
.
查看全部 -
在vue中 每一個(gè)組件都是一個(gè)vue實(shí)例
查看全部 -
<script>
new Vue({
? el:"#root",
????data:{
????????firstName:'',
?????????lastName;'',
????????count:0????
????},
????computed: {
????????fullName:function(){
????????????return this.firstName + ' ' + this.lastName
????????},
????watch : {
????????fullName : function(){
????????????this.count ++?
????????}
????}
})
????
查看全部 -
computed代表一個(gè)屬性從其他屬性計(jì)算而來
查看全部 -
屬性綁定和數(shù)據(jù)雙向綁定
<div id="root">
????<div v-bind:title="title>hello world</div>
? ? <!--? v-bind:title 可以縮寫成 :? -->
? ? <input v-model="content" />
? ? <div>{{content}}</div>
<div>
<script>
????new Vue({
????????el:"#root",
????????data:{
????????????title: "this is hello world",
????????????content:"this is a content"
? ? ? ? }
})
查看全部 -
偵聽器 watch
查看全部
舉報(bào)