el : " " 指定vue所操作的dom範圍,屬性值是你獲取的節點
data 就是vue的model,是存放資料的,屬性值是乙個物件或者是乙個函式,在元件中的data是乙個函式
methods 是vue中的事件方法
指令式渲染:
(1) v-html, v-text 採用}語法 ==>插值運算
(2) v-html:它可以加標籤,它會解析成html
(3) v-text:不能加標籤,如果加了,它會當作字串展示出來
(1)}
(1)預設v-text沒有閃爍的問題,而插值表示式有閃爍問題
(2)v-text 會覆蓋元素中原本的內容,但是插值表示式只會替換自己的這個佔位符,不會把整個元素的內容清空
(1)v-html會解析html格式
(2)v-text與插值表示式會把內容當作文本來解析
(3)v-html和v-text 都會覆蓋元素中原有的內容
(1)v-cloak 能夠解決插值表示式閃爍的問題
}
並在css中設定
[v-cloak]
讓所有設定v-cloak 的元素隱藏,當載入完畢之後,元素身上的v-cloak 就會小時
v-if=" a "
後面的值如果是true節點就顯示,false 就隱藏
改變css中的display
後面的值如果是true 節點就顯示,false 就隱藏
v-if是對節點的刪除和新增,v-show是對display屬性值none 和block的切換
共同點:都是動態顯示dom元素
不同點:
v-if:
v-if是動態的向dom樹內新增或刪除dom元素
v-if 切換乙個區域性編譯/解除安裝的過程,切換時會合適銷毀和重建內部事件監聽和子元件
v-if 是懶惰性的,初始條件=false 什麼也不做 只有在條件第一次=true 時,才開始區域性編譯
v-show 勢在任何體哦阿健下(首次條件是否為真) 都會被編譯,然後快取,而且dom元素保留。
v-if有更高的切換消耗
使用場景:
v-if 適合運營條件不大可能改變
v-show:
v-show 有更高的初始化渲染小號
v-show 只是簡單的基於css切換
v-show 是通過設定dom元素的display實現控制顯隱的
使用場景:
v-show 適合頻繁勤換
迴圈指令: v-for=""
值是乙個陣列 } in 陣列名
值是乙個物件 } in 物件名 value 是屬性值 key是屬性
在v-for中key 的使用注意事項
v-for 迴圈的時候,key 屬性只能使用number 或string 且是唯一的
key在使用的時候,必需使用v-bind 屬性繫結的形式,指定key的值
動態屬性: v-bind:class="a"
v-on:click=「事件名」
縮寫@click=「事件名」
v-model 資料繫結
可以在表單中使用v-model 實現資料雙向繫結
text型別中文字都是字串,v-model中的值相同
核取方塊v-model 中的值是boolean
單選框 v-model 中值是value
v-model 實現的原理
angular是mvc模式,ng-model 是靠髒值檢測
vue靠的是資料劫持和發布者訂閱者模式
資料劫持
object.definepropery() 這個方法
生成物件的方法 字面量 var obj={}/new object()
object.definepropery() 給乙個物件定義新屬性或修改乙個物件的屬性
object.getownpropertydescriptor() 返回關於乙個物件某個屬性的描述符,
第乙個引數是目標物件,第二個引數是 物件的某個屬性
var obj=
console.log(object.getownpropertydescriptor(obj,『age』))
返回屬性的意思:
configurable 配置選項,值為true代表這個屬性可刪除
enumerable 值為true 代表可列舉 可以使用 for in 遍歷
value 這個屬性的值
writeable 代表這個屬性可以更改
如果有了set和get屬性就不能有writeable 和 value屬性
常見的修飾符
azy v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步
Vue的基本語法
每個 vue 應用都需要通過例項化 vue 來實現。語法格式如下 var vm new vue 讓我們通過例項來看下 vue 構造器中需要哪些內容 可以看到在 vue 構造器中有乙個el 引數,它是 dom 元素中的 id。在上面例項中 id 為 vue det,在 div 元素中 這意味著我們接下...
vue 的基本語法
作為國內目前最火的框架,功能強大,語法簡單,基於angular 基礎上,比angular 更輕量,更適配於移動端 先引入vue檔案。和angular 一樣繫結資料到元素 class div 是不是很簡單。new vue 裡面可以隨便寫 array json string 都可以 迴圈遍歷和angul...
Vue的基本語法
首先需要引入vue檔案 插值表示式 表示式為物件的表示式為物件的時候,前後的空格不能省略,兩個花括號為表示式 簡單的數學的運算 插值表示式中需要用到的值必須先在data中存在的,因為vue是資料驅動檢視的 作用域鏈不存在的時候,會error,原型鏈不存在的時候,是undefined 資料發生改變以後...