第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

<div>

????<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>

</div>

全局組件

Vue.component('todo-item', {

????props:['content'], //接收content這個(gè)參數(shù)

????template:"<li>{{content}}</li>"??

})?

?

局部組件

var TodoItem = {

????template:"<li>item</li>"

}

new Vue({

????el:"#root",

????data:{},

????components:{? ?//在vue實(shí)例里面要先用components注冊(cè)這個(gè)組件

????????todo-item:TodoItem

????},

????methods:{}

})

<input v-model="inputValue"/>

<button @click="handleSubmit">提交</button>

<li v-for="(item, index) of list" :key="index">

<li v-for="(item, index) of list" :key="index">

var vue = new Vue({

????el:"#root",

????data:{

????????inputValue:'hello',

????????list:[]

????},

????methods:{

????????handleSubmit:function(){

????????????this.list.push(this.inputValue)

????????????this.inputValue = ''

????????}

????}

})

基礎(chǔ)知識(shí)->案例實(shí)踐->todolist->vue-cli->todolist

綁定事件? v-on:? ? ?，觸發(fā)的方法和vue實(shí)例的methods對(duì)應(yīng)

v-on:? ? 簡(jiǎn)寫? ?@? （省略了v-on:）

在vue里面要改變數(shù)據(jù)的顯示，不需要改變dom，只需要改變數(shù)據(jù)就行了。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)候，vue會(huì)自動(dòng)更新dom

vue只會(huì)處理掛載點(diǎn)里面的內(nèi)容

在掛載點(diǎn)里面的內(nèi)容都叫模板內(nèi)容

new Vue({

????el:"#root",

????template:"<h2>{{msg}}</h2>",

????data:{

????????msg:"hello world"

????}

})

*? vue會(huì)根據(jù)模板和數(shù)據(jù)生成最終的內(nèi)容，放在掛載點(diǎn)之中

計(jì)算屬性? computed? 是一些數(shù)據(jù)里沒有的屬性

偵聽器 watch? 當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，開始被偵聽

v-show不會(huì)每次都創(chuàng)建dom，所以性能高一些

用v-for的時(shí)候，記得加上:key="index"，提升每一項(xiàng)渲染的效率性能

創(chuàng)建vue實(shí)例，注意位置和標(biāo)簽的匹配

1. 在data中配置任意數(shù)據(jù)名

• {{number}}：插值表達(dá)式

• v-text：是一個(gè)指令，他的內(nèi)容可以調(diào)用{{number}}的變量

• v-on：click 是點(diǎn)擊事件指令，點(diǎn)擊事件必須定義在methods事件下，簡(jiǎn)寫的方法是@click

? ?2. methods：事件需要放在這個(gè)方法里面

1. 掛載點(diǎn)：指Vue實(shí)列中el后面的ID

2. 模板：在掛載點(diǎn)內(nèi)部的內(nèi)容都叫模板內(nèi)容

3. template：可以放各種標(biāo)簽與smg申明
   

1. el：指與id做綁定

2. data：用于放數(shù)據(jù)

3. msg：用戶放具體數(shù)據(jù)
   

v-model：雙向數(shù)據(jù)綁定，隨著數(shù)據(jù)的修改與之對(duì)應(yīng)的也會(huì)修改。

<div?id="root">
????<div?:title="title">hello?world</div>
????<input?v-model="content"?/>
????<div>{{content}}</div>
</div>
<script>
????new?vue({
????????el:"#root",
????????data:{
????????????title:"this?is?hello?world",
????????????content:"this?is?content"
????????}
????})
</script>

插值表達(dá)式：

v-text指令：

v-html指令：

v-text和v-html的區(qū)別：

v-html不會(huì)將輸出內(nèi)容進(jìn)行轉(zhuǎn)義，而v-text會(huì)。

v-on：綁定事件

綁定事件的簡(jiǎn)寫：

v-on:click——>@click

掛載點(diǎn)，模板，實(shí)例之間的關(guān)系：

????掛載點(diǎn)：el中的值對(duì)應(yīng)了某dom節(jié)點(diǎn)的id值，這個(gè)dom節(jié)點(diǎn)就是掛載點(diǎn)

????模板：在掛載點(diǎn)下面的所有內(nèi)容都是模板 【模板不僅可以寫在掛載點(diǎn)下，還可以寫在vue實(shí)例中，如圖：

】

????實(shí)例：指定掛載點(diǎn)，然后寫上模板，vue會(huì)自動(dòng)結(jié)合模板和數(shù)據(jù)，生成展示內(nèi)容，最后將內(nèi)容放在掛載點(diǎn)下

????

vue與傳統(tǒng)js的對(duì)比