剛接觸一門程式語言或者框架，我們都應該先熟悉其基本語法，以及使用框架的基礎步驟，即使你是程式設計高手，熟悉並且熟練使用這些語法之後，首先可以提高編碼效率，其次，編碼的過程中也會運用的得心應手，順手拈來！
學習基本語法，我們就以其實就是採用的是模板語法將資料渲染進dom!
>
}div
>
>
newvue(}
)script
>
data欄位中宣告message字段，然後通過}雙大括號的形式將data中message的值渲染出來，這種方式vue官方成為宣告式渲染！
html元素的屬性也可以通過vue提供的v-bind指令渲染到dom中，這也屬於宣告式渲染的一類，在vue中，所有帶v-字首的，都表示它們為vue提供的特殊特性。
>
}v-bind:title
="spantitle"
>
我是乙個spanspan
>
v-bind:src
="imgsrc"
v-bind:alt
="imgalt"
>
div>
>
newvue(}
)script
>
spantitle、imgalt和imgsrc三個資料，通過v-bind:指令將資料渲染進dom！
這種宣告式渲染的時候可能會因為網路卡頓，無法渲染出資料的時候會把模板語言標籤直接渲染出來，或者本地重新整理的時候會有一瞬間看見模板標籤一閃而過的跡象，這種現象產生的原因是vue 尚未編譯到關聯例項的時候，指令還無法被解析而造成的。
vue提供了乙個v-cloak指令來解決這種閃爍問題。一般這個指令必須要配合css來使用！
v-cloak
>
}div
>
>
[v-cloak]
style
>
v-if和v-show兩個指令！
>
v-if
="isif === 1"
>
isif為1的時候展示：}
div>
v-else-if
="isif === 2"
>
isif為2的時候展示：}
div>
v-else
>
isif不為1或者2的時候展示：}
div>
v-show
="isshow"
>
當isshow為true的時候展示：}
div>
div>
>
newvue(}
);script
>
v-for指令，其實就是迴圈輸出，採用item in items這種語法方式對陣列或者物件的選項列表進行渲染！
v-
for=
"(item, index) in items"
items為資料來源，item為每一條資料的別名,index是每條資料的索引，以陣列為例索引即陣列的下標，陣列的下標總是從0開始！
>
>
v-for
="(item, index) in items"
v-if
="item.isshow"
v-bind:key
="index"
>
>
}p>
>
}p>
>
￥}p>
li>
ul>
div>
>
newvue(,
]}})
;script
>
v-
for=
"(value, key, index) in datasource"
value(屬性值)、key(屬性)、index(屬性的索引) !
>
>
v-for
="(value, key, index) in datasource"
v-bind:key
="index"
>
>
}. }: }
p>
li>
ul>
div>
>
newvue(}
});script
>
這種方式雖然成功的為物件新增了乙個新字段，但沒有被實時渲染出來，可以通過vue提供的另外一種方式進行新增並實時渲染！
用法：
vue.
set'newkey'
,'newkey'
)
vue.
delete
'name'
)
name字段已經被刪除！
下面列舉一下vue可以檢測到的變化和無法檢測到的變化。
vue 可以檢測的變化
現有資料字段的變化：item[0].isshow = true;
通過vue.set(object, key, value)的方式新增的屬性
通過vue.delete(object, key)的方式刪除的屬性
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
filter()
concat()
slice()
利用索引去設定新的資料時：items[indexofitem] = newitem;
直接修改陣列的長度時：items.length = newlength;
Vue模版基礎語法 Vue筆記 一
在vue模版中資料寫在 內，可以與vue例項data中的資料實現單向繫結，資料改變檢視改變 可為以下型別 1 js 資料 2 表示式輸出表示式執行結果 3 三元運算子運算結果 4 data中的key的vlaue 5 methods中函式執行的return返回值 data vue例項下的物件，valu...
vue學習筆記 vue基礎（一）
vue框架提供了乙個vue的建構函式 類 我們通過例項化vue，產生乙個vue物件，來構建應用 例如 new vue 在例項化vue的時候，傳入一些配置引數這些配置引數在vue官網的api中可以找到 選項 new vue 使用者看到的介面 產生頁面檢視的基礎結構 html 插值表示式 new vue...
Vue基礎語法
指令 1.1 資料繫結指令 v pre 填充原始資訊 1.顯示原始資訊跳過編譯過程 v once 只編譯一次 應用場景 顯示的資訊後續不需要修改。1.2 雙向資料繫結type text v model username 1.3 事件繫結type button v on click num type ...