vue 初始複習

vue 初始複習

• data 中的數據最終都是掛載到 vm 實例中
• template 屬性會整個代替 app 的內容
• el 的優先級高於.$mount

指令

• v-text:至關於小鬍子{{}} -->v-text='name'
• v-html:能夠渲染字符串中的標籤 -->v-html='name'
• v-once:該標籤只渲染一次 -->後面不加內容
• v-cloak:解決網速慢時顯示小鬍子的問題 -->後面不加內容
• v-pre：有這個屬性的元素，vue 不會對該元素及全部子元素進行 DOM 編譯，只是理解成普通的 DOM 結構
• v-model:用於 input 標籤

對象

想要觸發視圖更新：兩個前提：1.該屬性有 get 和 set 方法 2.該屬性在 html 模板中有用到 四個方法：1.自定義一個無關變量 2.建立一個新對象 3.上來就寫死 4..$set(target,key,value)

數組

• v-for:能夠循環數組|對象|字符串|數字
• 數組:v-for="(val,i) in arr" val 屬性值 i 索引
• 對象:v-for="(val,i,a) in obj" val 屬性值 i 屬性名 a 對應索引
• 字符串：

<ul> <li v-for="val in obj.a">{{val}}</li> </ul> <ul> <li v-for="val in 'sssssss'">{{val}}</li> </ul> 

• 數字：v-for="val in 10"

事件

• <button v-on:click="fn">點點點點</button>
• <button @click="fn">點點點點</button>
• data裏的fn，this指window
• methods裏的fn,this指實例 Vue

<button v-on:click="fn">點點點點</button><button @click="fn()">點點點點</button> 不加括號時，默認把事件對象傳給對應函數,加小括號,用$event來獲取函數對應的事件對象 加括號時，括號裏寫什麼就給該函數傳遞什麼參數，不會默認傳遞事件對象

button彈索引小案例

todoList小案例

• this.msg = this.msg.trim();//去除首尾空格
• <input type="text" v-model="msg" @keyup="fn"> 鍵盤事件
• @keyup.enter='fn' 只有按鍵是enter纔會觸發fn 按鍵修飾符
• @keyup.13 只有按鍵的keyCode是13纔會觸發fn

v-model之checkbox

<input type="checkbox" v-model="val" value="1">🍉西瓜 <input type="checkbox" v-model="val" value="2">🍓草莓 <input type="checkbox" v-model="val" value="3">🍌香蕉 <input type="checkbox" v-model="val" value="3">🍊橙子 <input type="checkbox" v-model="val" value="3">🍍菠蘿 

• 一個checkbox時，要不就是true,要不就是false
• 多個checkbox時，咱們綁定同一個變量，而且這個變量須要是同一個數組；而且每個input必須有value值
• ary中的每一項都是選中的input中的value值
• ary裏的初始值爲對應的value值時，能夠默認選中

v-model之radio

<input type="radio" v-model="sex" value="0">男 <input type="radio" v-model="sex" value="1">女 

• sex的值是選中的input的value值
• sex的初始值爲默認value時，能夠默認選中該對應項

v-model之select

<select name="" id="" v-model="val" @change="fn"><!--onchange事件--> <option value="" disabled>請選擇</option> <option value="1">🍎蘋果</option> <option value="2">🍌香蕉</option> <option value="3">🍊橙子</option> <option value="4">🍇葡萄</option> <option value="5">🍉西瓜</option> </select> 

• v-model綁定的值 是用戶選中的option的value值；每個option都有一個對應的value
• 用戶選中某個option,會觸發select框的change事件，當咱們須要有一個默認選中option時，只要把val的默認值給對應的option的value值便可
• 當咱們有提示用戶的選項時，添加一個value爲空的option便可，並把初始的val設置成空字符串,不想讓用戶選中該提示，給該提示加disabled屬性便可

axios

經常使用的請求接口的東西

• OPTIONS https://www.souyidai.com/soeasy/invest/onlinelistnet::ERR_SPDY_PROTOCOL_ERROR
• 至關於敲門的，若後臺開門，帶着數據 跨域會遇見

axios的方法和post 請求攔截 和 響應攔截

<!-- axios 的get 和 post 怎麼用？怎麼傳參 便可 axios.defaults.baseURL = '' // 設置基礎路徑 axios.get(url,{params:參數對象}) .then((data)=>{}) .catch((err)=>{console.log(err)}) axios.post(url,參數對象).then().catch() //請求攔截器 axios.interceptors.request.use((config)=>{ config.data.pc = true; return config },(err)=>{ return Promise.reject(err) }) //響應攔截器 axios.interceptors.response.use((res)=>{ return res.data },(err)=>{ return Promise.reject(err) }) --> 

v-bind

簡寫: :src="val" 用來處理行內屬性