-
*VUE語法規則：
冒號是對象數據定義寫法，冒號前是屬性名，冒號后是屬性值。等號是賦值運算符
對于某些不需要新增屬性名的操作，如數據綁定，直接用等號對應上變量名或者內容即可。
插值表達式
{{number}}：插值表達式，也就是把number的值插入到h1之中；
v-text
v-text="number"：h1的內容由number這個變量決定，v-text是Vue中的一個指令，這個指令里面的東西跟著的是一個變量，它告訴h1顯示的內容就是"number"這個變量，對應賦值的內容會轉義為純文本；
v-html
v-html="c ontent"：v-html與v-text的區別是，v-html不會轉義，對應內容會直接展示為HTML語法；
v-on
v-on:click="handleClick"：通過v-on給元素綁定一個Click事件，事件觸發方法。
例子中元素是div，事件是他的Click，通過v-on綁定了handleClick的方法，就會直接執行在methods里的對應function。
this.content會直接對應到vue實例自己的data中的content內容。
查看全部 -
掛載點、模板與實例之間的關系---vue只會對它所對應的掛載點內的內容產生作用
掛載點：也就是Vue實例中el屬性對應的id的dom節點，Vue只會處理掛載點的內容。
模板：掛載點內部的內容都稱作模板內容，其中模板還可以放置在Vue的實例中進行編寫，如果使用Vue實例方式，則需要使用標簽把數據包起來。
實例：實例需要指定掛載點，還可以指定模板和數據，并且Vue會自動結合模板和數據進行展示。
查看全部 -
雙向數據綁定的意義：
頁面（DOM）與數據之間互相同步。
與之相對應的，非雙向綁定的模式是數據到頁面（DOM）的單向傳遞。
對應VUE語法：
v-model=：雙向數據綁定，隨著數據的修改與之對應的DOM也會修改
查看全部 -
VUE語法的縮寫，屬性綁定相關的部分：
v-bind:可以縮寫成:，如“v-bind:title”可以縮寫成“:title”
v-on:可以縮寫成@，如“v-on:click”可以縮寫成“@click”
查看全部 -
模板指令基本概念：
如果直接用title="title"，就是把字符串title賦值給變量title。
使用模板指令之后，等號后面的雙引號里就是JS表達式，而非文本數據。
查看全部 -
v-on簡寫是@查看全部
-
{{msg}}查看全部
-
創建一個vue實例，并且實現和掛載點綁定。 el參數表示實例和哪個節點（標簽）綁定。 data參數表示實例里的數據。{{msg}}查看全部
-
子組件 Vue.component和父組件todo-item傳遞通過發布訂閱模式
監聽子組件delete事件，監聽到了進行handledelete函數<!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>
查看全部 -
每一個組件（相當于一個實例）里邊都可以寫data，methods這些組件查看全部 -
定義全局組件todo item（簡單常用）
局部組件
必須要在vue里邊注冊聲明
props接收組件查看全部 -
將inputvalue的值加到list中在通過v-for顯示出來 最后把inputvalue清空，準備下一次輸入查看全部
舉報