1. 程式人生 > 其它 >Vue基礎知識一

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的第二種寫法函式式(學習元件後必須使用函式式)不能寫成箭頭函式