蚊子的vue筆記 基礎知識 指令

2021-09-26 18:44:38 字數 3307 閱讀 8570

建立html檔案,並引入vue的js,如:

src=

"">

script

>

宣告:

var vm = new vue(} 固定寫法,放在script標籤內

el:表示需要渲染的標籤標識

data:需要渲染的資料

>

var vm =

newvue(}

)script

>

插值表示式

>

>

}p>

>

}p>

>

}p>

>

}p>

else}}

-->

div>

v-text: 這是乙個屬性,所以要放置在標籤屬性的位置,新增後不再使用插值表示式}

>

>

}p>

{}}-->

v-text

='msg'

>

p>

div>

v-bind:

v-bind可以用簡寫方式,如「:src」等於「v-bind:src」

>

>

}p>

v-bind:src

="src"

alt="

">

:src

="src"

alt="

">

:href="

'/del?id='+id"

>

刪除a>

:class=""

>

isadd為true的時候文字是藍色的p

>

div>

v-for

>

>

v-for

='(value,index) in arr'

>

} : }li

>

ul>

>

v-for

='(value,key,index) in student'

:key

='key'

>

} : } : }li

>

ul>

div>

>

var vm =

newvue(}

})script

>

v-model:令data資料和頁面輸入框內容做雙向繫結

>

type

="text"

v-model

='msg'

>

type

="button"

value

='提交'

>

div>

>

var vm =

newvue(}

)script

>

v-on:

>

type

="text"

v-model

='msg'

>

type

="button"

value

='提交'

v-on:click

='showmsg'

>

type

="button"

value

='提交'

@click

='showmsg(123,$event)'

>

href

=""@click.prevent

='sayhi'

>

點我點我!a

>

type

="text"

name

='username'

v-model

='username'

@keyup.13

='showname'

>

type

="button"

value

="我可繫結了多個事件^_^"

v-on=''

>

div>

>

var vm =

newvue(,

// 方法(包含事件處理函式)都可以在methods中定義,它是乙個單獨的成員.它是乙個物件

methods:

// showmsg:() => {}

showmsg

(v,k)

,sayhi()

,showname()

,dothis()

,dothat()

}})script

>

v-if和v-show:

>

v-show

='isshow'

>

我是v-showp

>

v-if

='isshow'

>

我是v-ifp

>

>

成績:span

>

v-if

='score>=90'

>

ap>

v-else-if

='score>=80'

>

bp>

v-else-if

='score>=70'

>

cp>

v-else-if

='score>=60'

>

dp>

v-else

>

ep>

div>

>

var vm =

newvue(}

)script

>

v-cloak:待vue編譯完成後去除隱藏的樣式,避免使用者看見未被編譯的**

>

[v-cloak]

style

>

>

v-cloak

>

}p>

div>

>

var vm =

newvue(}

)script

>

Vue基礎知識

vue.js的基本使用 1.引入vue.js 1 cdn 3 模組化安裝 npm i vue d s cnpm i vue yarn add vue 2.初始化vue 1 必須有乙個html容器,決定vue.js的作用範圍 2 初始化 new vue options data 資料 3 資料繫結 宣...

VUE基礎知識

1 全域性定義 每個元件的命名不可重複 2 字串模板 缺乏語法高亮,可讀性較差 1 屬性 屬性書寫方式 props type name list 屬性時單向資料流,不可在子元件更改父元件傳遞的值,可通過onchange方法修改。2 事件 3 插槽 插槽是元件的一塊html模板,其顯示與否由父元件決定...

Vue基礎知識

資料雙向繫結 指令帶有v 的,表示vue特有的屬性,他們會在渲染的dom上,應用特殊的響應式行為 或者 click me v model 會忽略所有表單元素的 value checked selected attribute 的初始值 而總是將 vue 例項的資料作為資料 你應該通過 j ascri...