引用 <script><script>
關(guān)鍵詞:
new Vue({
el:"#xxx"
data:{}
method:{}
computed: { ( fullname: {set:function(){}/get:function(){}})}
watch:{}
beforeCreate/created/beforeMount/mouted/beforeUpdate/updated/beforeDestory/destoryed
})
v-bind :
v-on @
v-show
v-if
v-else-if
v-else
在v-if/xxx中使用key來確立不要復(fù)用v-for
v-model
v-html
v-once
{{}}
component 因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例象浑,所以它們與 new Vue 接收相同的選項(xiàng),例如 data、computed、watch钻蔑、methods 以及生命周期鉤子等辑奈。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。
prop
data: function (){ return xxxx}is
<slot> 元素有一個(gè)特殊的特性:name缤骨。這個(gè)特性可以用來定義額外的插槽:
Vue 包含一組觀察數(shù)組的變異方法浮禾,所以它們也將會(huì)觸發(fā)視圖更新伏嗜。這些方法如下:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
為了解決這個(gè)問題,Vue.js 為 v-on 提供了事件修飾符伐厌。之前提過,修飾符是由點(diǎn)開頭的指令后綴來表示的裸影。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
import xxx from
export default
為了在必要的情況下支持舊瀏覽器挣轨,Vue 提供了絕大多數(shù)常用的按鍵碼的別名:
- .enter
- .tab
- .delete (捕獲“刪除”和“退格”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl
.alt
.shift
.meta
2.2.0 新增
- .left
- .right
- .middle
這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕轩猩。
表單
.lazy
在默認(rèn)情況下卷扮,v-model
在每次 input
事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy
修飾符均践,從而轉(zhuǎn)變?yōu)槭褂?change
事件進(jìn)行同步:
.number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型晤锹,可以給 v-model
添加 number
修飾符:
<input v-model.number="age" type="number">
這通常很有用,因?yàn)榧词乖?type="number"
時(shí)彤委,HTML 輸入元素的值也總會(huì)返回字符串鞭铆。如果這個(gè)值無法被 parseFloat()
解析,則會(huì)返回原始的值焦影。
.trim
如果要自動(dòng)過濾用戶輸入的首尾空白字符车遂,可以給 v-model
添加 trim
修飾符:
<input v-model.trim="msg">
v-for的時(shí)候最好都加上key
html調(diào)用vue的方法
1.html中引用用vue寫的js, vue.js中用 var aaa=vue{el:'#vue-html'},要綁定對應(yīng)的id
2.html引用vue是有兩種
標(biāo)簽內(nèi)部引用斯辰, {{ name }}, {{ getname() }}
屬性中引用舶担, <button v-bind:click="xxxx xxxxx">, 這個(gè)xxxx同樣可以是js里vue的元素或者對象。
vue語句
v-for
v-if v-else-if
注意v-show和v-if的區(qū)別彬呻,前者是在dom里面的衣陶,只是設(shè)置了display:none
<ul>
<li v-for="x in vars"> {{ var }}<>
<ul/>
v-for是可以有index的,(content,index)
<template>標(biāo)簽可以代替div闸氮,不會(huì)被加到dom里面去
注意模板有且只有一個(gè)跟標(biāo)簽
method / 計(jì)算屬性computed / 偵聽屬性watch
1.method式調(diào)用就一定會(huì)運(yùn)行剪况。
2.computed計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,依賴變了才會(huì)重新執(zhí)行湖苞,沒變的就不跑函數(shù)了拯欧,直接返回結(jié)果。即只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值财骨。注意Date.now() 不是響應(yīng)式依賴這種不是響應(yīng)依賴式镐作。
3.watch 一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)
4.computed里面可以分get/set來處理類似watch的功能
5.watch用來做更通用的偵聽器
#######axios
這式ajax的一個(gè)封裝藏姐,和vue無關(guān)。
.watch方法用來接收錯(cuò)誤
.then方法用來在處理正確的情況下執(zhí)行的內(nèi)容
- label與form控件的關(guān)聯(lián),
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
input與label關(guān)聯(lián)的方式