vue从入门到精通之基础篇（一）语法概要
生活随笔
收集整理的這篇文章主要介紹了
vue从入门到精通之基础篇（一）语法概要
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
(1).vue起步
- 1:引包
- 2:啟動 new Vue({el:目的地,template:模板內容});
- options
- 目的地 el
- 內容 template
- 數據 data 保存數據屬性
數據驅動視圖
(2).插值表達式
- {{ 表達式 }}
- 對象 (不要連續3個{{ {name:‘jack’} }})
- 字符串 {{ ‘xxx’ }}
- 判斷后的布爾值 {{ true }}
- 三元表達式 {{ true?‘是正確’:‘錯誤’ }}
- 可以用于頁面中簡單粗暴的調試
- 注意: 必須在data這個函數中返回的對象中聲明
(3).什么是指令
- 在vue中提供了一些對于頁面 + 數據的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
- 比如html頁面中的屬性 <div v-xxx ></div>
- 比如在angular中 以ng-xxx開頭的就叫做指令
- 在vue中 以v-xxx開頭的就叫做指令
- 指令中封裝了一些DOM行為, 結合屬性作為一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的綁定
(4).vue中常用的v-指令演示
- v-text:元素的InnerText屬性,必須是雙標簽 跟{{ }}效果是一樣的 使用較少
- v-html: 元素的innerHTML
- v-if : 判斷是否插入這個元素,相當于對元素的銷毀和創建
- v-else-if
- v-else
- v-show 隱藏元素 如果確定要隱藏, 會給元素的style加上display:none。是基于css樣式的切換
(5).v-if和v-show的區別 (官網解釋)
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
(6).v-bind使用
-
給元素的屬性賦值
- 可以給已經存在的屬性賦值 input value
- 也可以給自定義屬性賦值 mydata
-
語法 在元素上 v-bind:屬性名="常量||變量名"
-
簡寫形式 :屬性名="變量名"
- <div v-bind:原屬性名="變量"></div> <div :屬性名="變量"></div>
(7).v-on的使用
- 處理自定義原生事件的,給按鈕添加click并讓使用變量的樣式改變
- 普通使用 v-on:事件名="表達式||函數名"
- 簡寫方式 @事件名="表達式"
(8).v-model
- 雙向數據流（綁定）
- 頁面改變影響內存(js)
- 內存(js)改變影響頁面
(9).v-bind 和 v-model 的區別?
- input v-model="name"
- 雙向數據綁定 頁面對于input的value改變，能影響內存中name變量
- 內存js改變name的值，會影響頁面重新渲染最新值
- input :value="name"
- 單向數據綁定 內存改變影響頁面改變
- v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
- v-bind就是對屬性的簡單賦值,當內存中值改變，還是會觸發重新渲染
(10).v-for的使用
- 基本語法 v-for="item in arr"
- 對象的操作 v-for="item in obj"
- 如果是數組沒有id
- v-for="(item,index) in arr" :class="index"
- 各中v-for的屬性順序(了解)
- 數組 item,index
- 對象 value,key,index
(11).過濾器filter
- filters
- 將數據進行添油加醋的操作
- 過濾器分為兩種
- 1:組件內的過濾器(組件內有效)
- 2:全局過濾器(所有組件共享)
局部過濾器的使用
- 先注冊,后使用
- 組件內 filters:{ 過濾器名:過濾器fn } 最終fn內通過return產出最終的數據
- 使用方式是 {{ 原有數據 | 過濾器名 }}
- 過濾器fn:
- 聲明function(data,argv1,argv2...){}
- 使用{{ 數據 | 過濾器名(參數1,參數2) }}
全局過濾器的使用
- 語法：Vue.component('過濾器的名字',fn)
- 調用：跟局部組件調用方式一樣
(12).偵聽器watch
-
watch 監視單個屬性和對象
watch:{//監視復雜類型,無法監視的原因是因為監視的是對象的地址 // obj:function(newV,oldV) {// console.log(newV,oldV);// },// key是屬于data屬性的屬性名，value是監視后的行為 fn中的參數（新值，舊值）msg:function (newV,oldV) {console.log(newV,oldV);if (newV==='alex') {console.log('sb');}},// 深度監視 ：object ||arraystus:{deep:true,//深度監視handler:function (newV,oldV) {console.log(newV[0].name)}}小結： 基本數據類型 簡單監視，復雜數據類型深度監視
(13).計算屬性computed
-
computed 同時監視多個屬性
? 默認computed只有getter方法
(14).獲取DOM元素
- 救命稻草, document.querySelector
- 1: 在template中標識元素 ref=“xxxx”
- 2: 在要獲取的時候, this.$refs.xxxx 獲取元素
- 創建組件,裝載DOM,用戶點擊按鈕
- ref在DOM上獲取的是原生DOM對象
- ref在組件上獲取的是組件對象
- $el 是拿其DOM
- 這個對象就相當于我們平時玩的this,也可以直接調用函數\
-特殊情況
// 需求：input輸入框 獲取焦點 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更新循環結束之后執行延遲回調，在修改數據之后使用$nextTick 可以在回調中獲取到更新后的DOMthis.$nextTick(function() {// 更新之后的DOMthis.$refs.input.focus();})}}new Vue({el: '#app',data: function() {return {}},template: `<App />`,components: {App}});總結
以上是生活随笔為你收集整理的vue从入门到精通之基础篇（一）语法概要的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript设计模式（二）之单例
- 下一篇： vue从入门到精通之基础篇（二）组件