Vue學習筆記(一)

2022-06-08 05:24:09 字數 2164 閱讀 4253

helloworld 工程

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>test your first vue program

title

>

<

style

>

.bgstyle

>

<

script

src=""

>

script

>

head

>

<

body

>

<

div

class

="bg"

>

hello,vue!

}div>

<

script

>

newvue(

})script

>

body

>

html

>

輸出

hello,vue! messages in vue para
二 模板語法

<

div

id>

}<

br>

}<

br/>

<

a v-bind:href

="url"

a>

<

div

v-html

="template"

>

div>

<

button

type

="button"

v-on:click

="submit()"

>mybutton

button

>

div>

<

script

>

newvue(,

methods:}})

script

>

輸出

三 監聽資料

<

div

id>

}<

br>

div>

<

script

>

var=

newvue(,

watch:}})

script

>

四 條件渲染

<

div

id>

<

div

v-if

="count>0"

>

判斷1:大於0

div>

<

div

v-else-if

="count<0"

>

判斷2:小於0

div>

<

div

v-else

>

判斷3:等於0

div>

}<

br>

div>

當vue物件中的count值變化時,會相應渲染「判斷1,」或者「判斷2」,「判斷3」。

五。列表渲染

<

div

id>

<

div

v-for

="item in register_list"

>

}

div>

}<

br>

div>

<

script

>

var=

newvue(,]

}})script

>

輸出john

hans

打的

Vue學習筆記 一

1 vue基本模型 一段html 配合json,再new 處理vue例項。html json格式的資料 vue.js var vm new vue new vue 2.2.2 v for value in json 2.2.3 v for k,v in json 如果有重複的資料 track by ...

vue學習筆記(一)

一.搭建環境 1.如果我們的電腦上有了node和npm,我們就只需要執行下面的命令全域性安裝vue cli腳手架 npm install g vue cli 或者 cnpm install g vue cli 2.構建完腳手架之後,隨便進入乙個我們事先準備好的目錄,比如demo目錄,然後在目錄中做初...

vue 學習筆記(一)

例項生命週期鉤子 1 在beforecreate和created之間,進行資料觀測 data observer 也就是在這個時候開始監控data中的資料變化了,同時初始化事件 2 首先系統會判斷物件中有沒有el選項 有el選項,則繼續編譯過程 沒有el選項,則停止編譯,也意味著暫時停止了生命週期 直...