vue 的基本語法

2022-07-17 15:30:22 字數 1187 閱讀 3271

作為國內目前最火的框架,功能強大,語法簡單,基於angular 基礎上,比angular 更輕量,更適配於移動端

先引入vue檔案。。

和angular 一樣繫結資料到元素

class="

div">

}

是不是很簡單。

new vue 裡面可以隨便寫 array、json 、string 都可以

迴圈遍歷和angular 一樣  但是不再是 ng-repeat 而是 v-for="item in arr"

還有好多angular 的指令 和vue的差不多

比如:v-model

v-if  

v-else

v-show

v-bind等等

vue 的事件比angular 也簡單很多  比如 ng-click="get()"

在 vue 裡是 v-click="get()"  可以簡寫為 @click="get()"

這些事件的方法寫在例項化vue物件裡面

"

button

" value="

按鈕" @click="get

()" />

如果不需要傳參 後面的括號也不用寫。但是為了寫法規範帶上比較好。

class="

div">

"text

" v-model="

a" @keyup.13="

add()

" />

"button

" value="

按鈕" @click="

add()

" />

if="

this.arr.length==0

vue 其實和物件導向的建構函式差不多  

@keyup.13="add()"    keyup是鍵盤事件   13是回車的鍵位碼  

@keyup.enter   也可以寫成英文的 方便記憶

類推下去還有很多 比如

.up  .down  .left   .right   鍵盤上的 上下左右鍵

下次會分享一些vue 其他的比如  過濾器  指令  路由等等

謝謝~~

Vue的基本語法

el 指定vue所操作的dom範圍,屬性值是你獲取的節點 data 就是vue的model,是存放資料的,屬性值是乙個物件或者是乙個函式,在元件中的data是乙個函式 methods 是vue中的事件方法 指令式渲染 1 v html,v text 採用 語法 插值運算 2 v html 它可以加標...

Vue的基本語法

每個 vue 應用都需要通過例項化 vue 來實現。語法格式如下 var vm new vue 讓我們通過例項來看下 vue 構造器中需要哪些內容 可以看到在 vue 構造器中有乙個el 引數,它是 dom 元素中的 id。在上面例項中 id 為 vue det,在 div 元素中 這意味著我們接下...

Vue的基本語法

首先需要引入vue檔案 插值表示式 表示式為物件的表示式為物件的時候,前後的空格不能省略,兩個花括號為表示式 簡單的數學的運算 插值表示式中需要用到的值必須先在data中存在的,因為vue是資料驅動檢視的 作用域鏈不存在的時候,會error,原型鏈不存在的時候,是undefined 資料發生改變以後...