Vue基礎知識一
1、模板語法
(1)插值語法——容器中的兩個{}
用於解析標籤體(即開始標籤和結束標籤間的內容):{{xxx}},xxx是表示式且可以讀取data中的所有屬性
(2)指令語法——用於解析標籤(包括標籤屬性、標籤體內容、繫結事件......)
v-bind:可以簡寫成:
Vue中有很多指令,形式為v-???,此處拿v-bind舉例
<body>
<!-- 準備一個容器 -->
<div id="root">
<h1>指令語法</h1>
<a v-bind:href="url">vue官網1</a>
<a :href="url">vue官網2</a>
</div>
<script>
//阻止vue在啟動時生成生產提示
Vue.config.productionTip = false
//建立Vue例項
var vm = new Vue({
//el用於指定當前vue例項為哪個容器服務,值通常是css選擇器字串
el: '#root',
data: {
// data中用於儲存資料,資料供el所指定的容器去使用\
// 值暫時寫成一個物件,在元件中寫成一個函式
name : 'ljl',
url: 'https://cn.vuejs.org/'
}
})
</script>
</body>
2、資料繫結
(1)單向資料繫結——v-bind,資料只能從data流向頁面
(2)雙向資料繫結——v-model:v-model只能應用在表單類元素(輸入類元素):有value值上,因此v-model:value可簡寫為v-model
<div id="root">
單向資料繫結:<input type="text" v-bind:value="name"><br>
雙向資料繫結:<input type="text" v-model:value="name">
</div>
注意:el和data的另外寫法:data的第二種寫法函式式(學習元件後必須使用函式式)不能寫成箭頭函式