一.{{}} - 鬍鬚表達式
表達式裏面寫在哪裏？ - 表達式寫在HTML的標籤中
表達式裏面寫什麼？ - 可以直接寫data中的數據，也可以寫基本的js語句
<template>
<div>
<p>{{name}}</p>
<p>{{num == 1 ? name : num}}</P>
</div>
</template>
<script>
export default{
data(){
return {
name:'xxx',
num: 1
}
}
}
</script>
二.基本配置項
el: // 掛載dom
data: // 準備數據
components: {
“標籤名”: 引入的組件的變量名 // 註冊組件
}
watch:{} //監聽
methods:{} //書寫方法
computed:{ //計算屬性
函數名() { 整個函數的返回結果 可以直接使用函數名，把函數當成一個普通屬性使用。
return 結果
}
}
filters:{ // 過濾器
函數名(msg) { // 函數中，可以對msg進行各種格式處理，返回什麼，頁面就能輸出什麼
return xxx
}
}
注意：
(1)計算屬性，函數必須有返回值，函數的名字接收返回值，當成一個屬性來使用。
(2)計算屬性，有依賴緩存，只有依賴的數據發生改變，纔會重新計算，否則，不會重新計算，直接使用緩存
(3)計算屬性有getter和setter，但是一般都不用setter
（4）filter的使用：<h1> {{ msg | 過濾器函數名 }} </h1>
三.基本指令
1.什麼是指令？
指令是寫在標籤上的一種自定義屬性，主要是把vue實例中的數據，輸出到html中（vue實例對象和html關聯）。
<標籤 id=”” class=”” v-*=”xxx”></標籤>
2.常用指令
(1)v-text <div id=”” class=”” v-text=”xxx”></div> =》 <div id=”” class=””>xxx</div>
(2)v-html - 可以解析標籤
(3)v-show - 頻繁的切換 - 修改的display屬性
(4)v-if - 用戶權限之類的 - 刪除或重建DOM
(5)v-else-if
(6)v-else
<h3 v-if=' score > 50'>xxx</h3> //>50顯示
<h3 v-else-if=' score > 20'>xxx</h3> //>20顯示
<h3 v-else=' score > 10'>xxx</h3> //>10顯示
(7)v-for 遍歷
<li v-for='(item,index) in arr' :key='index'>{{item}}</li> //遍歷數組
<li v-for='(item,key,index) in obj' :key='index'>{{item}}</li> //遍歷對象
注意：v-for遍歷操作數組，實現改變時-
如： arr[index] = [1,2,5,] // 數組自身改變，不能更新Dom結構
vue內部對數組的方法進行了重寫 - 繼續原生js操作，然後進行更新了界面
因此，要界面數據更新，必須使用vue重寫後的方法
(8) v-model 雙向數據綁定 - 只能使用於表單，讓表單和數據雙向綁定。
適用的標籤： input(輸入框 單選框 多選框) select textarea
(9) v-on - 綁定事件 （簡寫 @）
<標籤 v-on:事件類型=”函數名”></標籤>
v-on @click
阻止默認事件 - @click.prevent =
阻止冒泡事件 - @click.stop =
按enter鍵觸發 - @click.enter = /@click.13
傳遞一個值 @click='geta(12,$event)' //默認函數不傳值，會自動傳入$event
geta(num,event){
console.log(event.target.innerHtml)
}
(10）v-bind - 給屬性綁定動態數據
語法： <標籤 v-bind:屬性=”表達式” ></標籤>
簡寫： <標籤 :屬性=”表達式” ></標籤>
v-bind綁定style
語法： <標籤 :style=”{ color: ‘red’, backgroundColor: ‘green’ }” ></標籤>
v-bind綁定class
語法：<標籤 v-bind:class=”{ 類名1: flag1, 類名2: flag2 }” ></標籤>
注意：flag是true，就有這個類，是false，就沒有這個類
