-
*VUE語(yǔ)法規(guī)則：
冒號(hào)是對(duì)象數(shù)據(jù)定義寫法，冒號(hào)前是屬性名，冒號(hào)后是屬性值。等號(hào)是賦值運(yùn)算符
對(duì)于某些不需要新增屬性名的操作，如數(shù)據(jù)綁定，直接用等號(hào)對(duì)應(yīng)上變量名或者內(nèi)容即可。
插值表達(dá)式
{{number}}：插值表達(dá)式，也就是把number的值插入到h1之中；
v-text
v-text="number"：h1的內(nèi)容由number這個(gè)變量決定，v-text是Vue中的一個(gè)指令，這個(gè)指令里面的東西跟著的是一個(gè)變量，它告訴h1顯示的內(nèi)容就是"number"這個(gè)變量，對(duì)應(yīng)賦值的內(nèi)容會(huì)轉(zhuǎn)義為純文本；
v-html
v-html="c ontent"：v-html與v-text的區(qū)別是，v-html不會(huì)轉(zhuǎn)義，對(duì)應(yīng)內(nèi)容會(huì)直接展示為HTML語(yǔ)法；
v-on
v-on:click="handleClick"：通過(guò)v-on給元素綁定一個(gè)Click事件，事件觸發(fā)方法。
例子中元素是div，事件是他的Click，通過(guò)v-on綁定了handleClick的方法，就會(huì)直接執(zhí)行在methods里的對(duì)應(yīng)function。
this.content會(huì)直接對(duì)應(yīng)到vue實(shí)例自己的data中的content內(nèi)容。
查看全部 -
掛載點(diǎn)、模板與實(shí)例之間的關(guān)系---vue只會(huì)對(duì)它所對(duì)應(yīng)的掛載點(diǎn)內(nèi)的內(nèi)容產(chǎn)生作用
掛載點(diǎn)：也就是Vue實(shí)例中el屬性對(duì)應(yīng)的id的dom節(jié)點(diǎn)，Vue只會(huì)處理掛載點(diǎn)的內(nèi)容。
模板：掛載點(diǎn)內(nèi)部的內(nèi)容都稱作模板內(nèi)容，其中模板還可以放置在Vue的實(shí)例中進(jìn)行編寫，如果使用Vue實(shí)例方式，則需要使用標(biāo)簽把數(shù)據(jù)包起來(lái)。
實(shí)例：實(shí)例需要指定掛載點(diǎn)，還可以指定模板和數(shù)據(jù)，并且Vue會(huì)自動(dòng)結(jié)合模板和數(shù)據(jù)進(jìn)行展示。
查看全部 -
雙向數(shù)據(jù)綁定的意義：
頁(yè)面（DOM）與數(shù)據(jù)之間互相同步。
與之相對(duì)應(yīng)的，非雙向綁定的模式是數(shù)據(jù)到頁(yè)面（DOM）的單向傳遞。
對(duì)應(yīng)VUE語(yǔ)法：
v-model=：雙向數(shù)據(jù)綁定，隨著數(shù)據(jù)的修改與之對(duì)應(yīng)的DOM也會(huì)修改
查看全部 -
VUE語(yǔ)法的縮寫，屬性綁定相關(guān)的部分：
v-bind:可以縮寫成:，如“v-bind:title”可以縮寫成“:title”
v-on:可以縮寫成@，如“v-on:click”可以縮寫成“@click”
查看全部 -
模板指令基本概念：
如果直接用title="title"，就是把字符串title賦值給變量title。
使用模板指令之后，等號(hào)后面的雙引號(hào)里就是JS表達(dá)式，而非文本數(shù)據(jù)。
查看全部 -
v-on簡(jiǎn)寫是@查看全部
-
{{msg}}查看全部
-
創(chuàng)建一個(gè)vue實(shí)例，并且實(shí)現(xiàn)和掛載點(diǎn)綁定。 el參數(shù)表示實(shí)例和哪個(gè)節(jié)點(diǎn)（標(biāo)簽）綁定。 data參數(shù)表示實(shí)例里的數(shù)據(jù)。{{msg}}查看全部
-
子組件 Vue.component和父組件todo-item傳遞通過(guò)發(fā)布訂閱模式
監(jiān)聽子組件delete事件，監(jiān)聽到了進(jìn)行handledelete函數(shù)<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<script?src="./vue.js"?type="text/javascript"></script>
</head>
<body>
????<div?id='root'>
????????<input?v-model="inputvalue"/>
????????<button?@click="handlesubmit">提交</button>
????????<ul>
????????????<todo-item?v-for="(item,index)?of?list"?
????????????:key="index"
????????????:content="item"
????????????:index="index"
????????????@delete="handledelect"
????????????>
????????????</todo-item>
????????</ul>
????</div>
????<script>
????????
????????Vue.component("todo-item",{
????????????props:?['content','index'],
????????????template:?'<li?@click="handleclick">{{content}}</li>?',
????????????methods:{
????????????????handleclick:function(){
????????????????????this.$emit('delete',this.index)
????????????????}
????????????}
????????})
????????
????
????????new?Vue({
????????????el:"#root",
????????????data?:{?
????????????????inputvalue:'',
????????????????list:[]
????????????},
????????????methods:{
????????????????handlesubmit:?function(){
????????????????????this.list.push(this.inputvalue)
????????????????????this.inputvalue=''
????????????????},
????????????????handledelect:?function(index)?{
????????????????????this.list.splice(index,1)
????????????????}
????????????}???????????
????????})
????</Script>
</body>
</html>
查看全部 -
每一個(gè)組件（相當(dāng)于一個(gè)實(shí)例）里邊都可以寫data，methods這些組件查看全部 -
定義全局組件todo item（簡(jiǎn)單常用）
局部組件
必須要在vue里邊注冊(cè)聲明
props接收組件查看全部 -
將inputvalue的值加到list中在通過(guò)v-for顯示出來(lái) 最后把inputvalue清空，準(zhǔn)備下一次輸入查看全部
舉報(bào)