$ npm
install -g vue-cli (其中的vue-cli是vue官方提供用於搭建vue+webpack+es6專案的腳手架工具)
$ npm
執行該命令之後會出現一些配置資訊,可以適當的修改
2.2.1. v-html 指令用於輸出 html **:
"main"
>
<
/p>
<
/div>
/*vue的模板寫法 */
newvue(}
)<
/script>此時會把message的值渲染到p標籤中
2.2.0.v-text指令無論內容是什麼,只會解析為文字,解析文字使用v-text,需要解析html結構使用v-html
>
"message+』!』"
>}})
2.2.3.v-if指令用於判斷,根據表達值的真假,切換元素的顯示和隱藏(操縱dom元素)
>
data:
})2.2.2. v-bind 指令用於繫結資料,
>
"imgsrc"
>
})
div id=
>
"true"
>我是乙個p標籤
})2.2.4.v-on指令用於監聽dom事件
2.2.5.v-model指令用於實現表單資料的雙向繫結
>
"button" value=
"事件繫結" v-on:click=
"方法"
>
"button" value=
"事件繫結" v-on:monseenter=
"方法"
>
"button" value=
"事件繫結" v-on:dblclick=
"方法"
>
2.2.6.v-show指令用於實現資料是否展現
>
"text" v-model=
"message" />
})
2.2.7.v-for指令可用實現陣列的迴圈
>
"位址" v-show=
"true"
>
})
其中的v-bind,v-on可以簡寫:
2.2.8.axios的使用
"hello"
>
可簡化為:
"hello"
>
"demon"
>
可簡化為:
"demon"
>
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...