今天我學(xué)習(xí)了vue.js這是我第一次接觸vue這個(gè)東西,今天學(xué)了半天感覺不算難羞秤,下面談?wù)勛约旱囊稽c(diǎn)心得验烧。
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架持舆,創(chuàng)始人是華人尤雨溪。
創(chuàng)建vue.js
<div class="dc">
{{msg}} ?調(diào)用vue msg
<div>
<script src="vue.js"></script> ?引入vue
<script>
new Vue{(
? ? ? ?el:".dc", ? 選擇器 el的意思就是element
? ? ? ?data:{
? ? ? ? ? ?msg:"hellow world"
? ?}
)}
循環(huán)數(shù)組對(duì)象
v-for 循環(huán)可以遍歷值和下標(biāo)
v-for指令基于一個(gè)數(shù)組渲染一個(gè)列表伪窖,它和JavaScript的遍歷語法相似:
v-for=“(value,index) in 對(duì)象名”
雙向數(shù)據(jù)
v-model=“”
v-on指令用于給監(jiān)聽DOM事件逸寓,它的用語法和v-bind是類似的,例如監(jiān)聽元素的點(diǎn)擊事件:
語法:V-on:click=“事件回調(diào)函數(shù)的名稱”
定義事件的回調(diào)函數(shù)覆山,在vue的實(shí)例化對(duì)象的methods屬性中定義
Methods他的值是一個(gè)對(duì)象
對(duì)象是屬性名稱表示事件的回調(diào)函數(shù)名稱
對(duì)象的屬性值是一個(gè)函數(shù)竹伸,就是事件的回調(diào)函數(shù)
他的this指向的是vue實(shí)例化對(duì)象,因此通過它我們可以獲取或者設(shè)置vue實(shí)例化對(duì)象上屬性
它默認(rèn)有個(gè)參數(shù)是事件對(duì)象簇宽,這個(gè)事件對(duì)象可以訪問該事件的相關(guān)信息$event傳遞參數(shù)可以訪問到事件對(duì)象
當(dāng)我們?cè)谑褂檬录r(shí)候勋篓,可以傳遞一些參數(shù),此時(shí)在vue的事件回調(diào)函數(shù)中它的參數(shù)與事件使用時(shí)候傳入的參數(shù)是一致的
下面是一個(gè)點(diǎn)擊事件
綁定事件 v-on:事件名=“函數(shù)(方法)”
簡寫@:事件名="函數(shù)(方法)"
<button v-on:click="alt"></button>{
? ? ? ? ? ? ? ? ? alert(vm.msg) ? vm變量