(1).vue起步

• 1:引包
• 2:啟動(dòng) new Vue({el:目的地,template:模板內(nèi)容});
• options
  • 目的地 el
  • 內(nèi)容 template
  • 數(shù)據(jù) data 保存數(shù)據(jù)屬性
    數(shù)據(jù)驅(qū)動(dòng)視圖

(2).插值表達(dá)式

• {{ 表達(dá)式 }}
  • 對(duì)象 (不要連續(xù)3個(gè){{ {name:‘jack’} }})
  • 字符串 {{ ‘xxx’ }}
  • 判斷后的布爾值 {{ true }}
  • 三元表達(dá)式 {{ true?‘是正確’:‘錯(cuò)誤’ }}
• 可以用于頁面中簡單粗暴的調(diào)試
• 注意: 必須在data這個(gè)函數(shù)中返回的對(duì)象中聲明

(3).什么是指令

• 在vue中提供了一些對(duì)于頁面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
  • 比如html頁面中的屬性 <div v-xxx ></div>
• 比如在angular中 以ng-xxx開頭的就叫做指令
• 在vue中 以v-xxx開頭的就叫做指令
• 指令中封裝了一些DOM行為, 結(jié)合屬性作為一個(gè)暗號(hào), 暗號(hào)有對(duì)應(yīng)的值,根據(jù)不同的值，框架會(huì)進(jìn)行相關(guān)DOM操作的綁定

(4).vue中常用的v-指令演示

• v-text:元素的InnerText屬性,必須是雙標(biāo)簽 跟{{ }}效果是一樣的 使用較少
• v-html: 元素的innerHTML
• v-if : 判斷是否插入這個(gè)元素,相當(dāng)于對(duì)元素的銷毀和創(chuàng)建
• v-else-if
• v-else
• v-show 隱藏元素 如果確定要隱藏, 會(huì)給元素的style加上display:none。是基于css樣式的切換

v-text 只能用在雙標(biāo)簽中v-text 其實(shí)就是給元素的innerText賦值v-html 其實(shí)就是給元素的innerHTML賦值v-if 如果值為false,會(huì)留下一個(gè)<!---->作為標(biāo)記，萬一未來v-if的值是true了，就在這里插入元素如果有if和else就不需要單獨(dú)留坑了如果全用上 v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用v-if和v-else-if都有等于對(duì)應(yīng)的值，而v-else直接寫v-if家族都是對(duì)元素進(jìn)行插入和移除的操作v-show是顯示與否的問題注意: 指令其實(shí)就是利用屬性作為標(biāo)識(shí)符,簡化DOM操作,看：v-model="xxx"v-model 代表要做什么 xxx代表針對(duì)的js內(nèi)存對(duì)象寫在那個(gè)元素上，就對(duì)哪個(gè)元素操作

(5).v-if和v-show的區(qū)別 (官網(wǎng)解釋)

v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。

(6).v-bind使用

• 給元素的屬性賦值

  • 可以給已經(jīng)存在的屬性賦值 input value
  • 也可以給自定義屬性賦值 mydata

• 語法 在元素上 v-bind:屬性名="常量||變量名"

• 簡寫形式 :屬性名="變量名"

• <div v-bind:原屬性名="變量"></div> <div :屬性名="變量"></div>

(7).v-on的使用

• 處理自定義原生事件的,給按鈕添加click并讓使用變量的樣式改變
• 普通使用 v-on:事件名="表達(dá)式||函數(shù)名"
• 簡寫方式 @事件名="表達(dá)式"

(8).v-model

• 雙向數(shù)據(jù)流（綁定）
  • 頁面改變影響內(nèi)存(js)
  • 內(nèi)存(js)改變影響頁面

(9).v-bind 和 v-model 的區(qū)別?

• input v-model="name"
  • 雙向數(shù)據(jù)綁定 頁面對(duì)于input的value改變，能影響內(nèi)存中name變量
  • 內(nèi)存js改變name的值，會(huì)影響頁面重新渲染最新值
• input :value="name"
  • 單向數(shù)據(jù)綁定 內(nèi)存改變影響頁面改變
• v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
• v-bind就是對(duì)屬性的簡單賦值,當(dāng)內(nèi)存中值改變，還是會(huì)觸發(fā)重新渲染

(10).v-for的使用

• 基本語法 v-for="item in arr"
• 對(duì)象的操作 v-for="item in obj"
• 如果是數(shù)組沒有id
  • v-for="(item,index) in arr" :class="index"
• 各中v-for的屬性順序(了解)
  • 數(shù)組 item,index
  • 對(duì)象 value,key,index

(11).過濾器filter

• filters
  • 將數(shù)據(jù)進(jìn)行添油加醋的操作
  • 過濾器分為兩種
    • 1:組件內(nèi)的過濾器(組件內(nèi)有效)
    • 2:全局過濾器(所有組件共享)

局部過濾器的使用

• 先注冊(cè),后使用
• 組件內(nèi) filters:{ 過濾器名:過濾器fn } 最終fn內(nèi)通過return產(chǎn)出最終的數(shù)據(jù)
• 使用方式是 {{ 原有數(shù)據(jù) | 過濾器名 }}
• 過濾器fn:
  • 聲明function(data,argv1,argv2...){}
  • 使用{{ 數(shù)據(jù) | 過濾器名(參數(shù)1,參數(shù)2) }}

全局過濾器的使用

• 語法：Vue.component('過濾器的名字',fn)
• 調(diào)用：跟局部組件調(diào)用方式一樣

(12).偵聽器watch

• watch 監(jiān)視單個(gè)屬性和對(duì)象

  watch:{//監(jiān)視復(fù)雜類型,無法監(jiān)視的原因是因?yàn)楸O(jiān)視的是對(duì)象的地址 // obj:function(newV,oldV) {// console.log(newV,oldV);// },// key是屬于data屬性的屬性名，value是監(jiān)視后的行為 fn中的參數(shù)（新值，舊值）msg:function (newV,oldV) {console.log(newV,oldV);if (newV==='alex') {console.log('sb');}},// 深度監(jiān)視 ：object ||arraystus:{deep:true,//深度監(jiān)視handler:function (newV,oldV) {console.log(newV[0].name)}}

  小結(jié)： 基本數(shù)據(jù)類型 簡單監(jiān)視，復(fù)雜數(shù)據(jù)類型深度監(jiān)視

(13).計(jì)算屬性computed

• computed 同時(shí)監(jiān)視多個(gè)屬性

  ? 默認(rèn)computed只有g(shù)etter方法

(14).獲取DOM元素

• 救命稻草, document.querySelector
• 1: 在template中標(biāo)識(shí)元素 ref=“xxxx”
• 2: 在要獲取的時(shí)候, this.$refs.xxxx 獲取元素
  • 創(chuàng)建組件,裝載DOM,用戶點(diǎn)擊按鈕
• ref在DOM上獲取的是原生DOM對(duì)象
• ref在組件上獲取的是組件對(duì)象
  • $el 是拿其DOM
  • 這個(gè)對(duì)象就相當(dāng)于我們平時(shí)玩的this,也可以直接調(diào)用函數(shù)\

-特殊情況

// 需求：input輸入框 獲取焦點(diǎn) var App = {data: function() {return {isShow : false}},template: `<div class='app'><input type="text" v-show = 'isShow' ref = 'input'/></div>`,mounted: function() {this.isShow = true;console.log(this.$refs.input);// $nextTick 是在DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用$nextTick 可以在回調(diào)中獲取到更新后的DOMthis.$nextTick(function() {// 更新之后的DOMthis.$refs.input.focus();})}}new Vue({el: '#app',data: function() {return {}},template: `<App />`,components: {App}});

總結(jié)

以上是生活随笔為你收集整理的vue从入门到精通之基础篇（一）语法概要的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。