vue基礎語法點

2021-10-24 16:11:32 字數 1578 閱讀 7324

$ npm

install -g vue-cli (其中的vue-cli是vue官方提供用於搭建vue+webpack+es6專案的腳手架工具)

$ npm
執行該命令之後會出現一些配置資訊,可以適當的修改

"main"

>

<

/p>

<

/div>

/*vue的模板寫法 */

newvue(}

)<

/script>此時會把message的值渲染到p標籤中

2.2.0.v-text指令無論內容是什麼,只會解析為文字,解析文字使用v-text,需要解析html結構使用v-html

>

"message+』!』"

>}})

2.2.1. v-html 指令用於輸出 html **:

>

data:

})2.2.2. v-bind 指令用於繫結資料,

>

"imgsrc"

>

})

2.2.3.v-if指令用於判斷,根據表達值的真假,切換元素的顯示和隱藏(操縱dom元素)

div id=

>

"true"

>我是乙個p標籤

})2.2.4.v-on指令用於監聽dom事件

>

"button" value=

"事件繫結" v-on:click=

"方法"

>

"button" value=

"事件繫結" v-on:monseenter=

"方法"

>

"button" value=

"事件繫結" v-on:dblclick=

"方法"

>

2.2.5.v-model指令用於實現表單資料的雙向繫結

>

"text" v-model=

"message" />

})

2.2.6.v-show指令用於實現資料是否展現

>

"位址" v-show=

"true"

>

})

2.2.7.v-for指令可用實現陣列的迴圈

其中的v-bind,v-on可以簡寫:

"hello"

>

可簡化為:

"hello"

>

"demon"

>

可簡化為:

"demon"

>

2.2.8.axios的使用

Vue基礎語法

指令 1.1 資料繫結指令 v pre 填充原始資訊 1.顯示原始資訊跳過編譯過程 v once 只編譯一次 應用場景 顯示的資訊後續不需要修改。1.2 雙向資料繫結type text v model username 1.3 事件繫結type button v on click num type ...

Vue 基礎語法

lang en charset utf 8 模板語法 v指令入門title src script head root div div div v html test2 my.age div div 物件,裡面有兩個最基本屬性,是固定屬性 要寫在 id 為 root 的 div 下面 const co...

Vue基礎語法

常用控制項 基本練習 class繫結 使用方式 v bind class expression expression的型別 字串 陣列 物件 style繫結 v bind style expression expression的型別 字串 陣列 物件 vue通過由點 表示的指令字尾來呼叫修飾符,st...