vue 我的學習記錄

html

v- Vue 提供的特殊特性
v-bind: 綁定屬性 ：
v-on: 綁定事件 @

v-bind:href="" 綁定屬性 :href="屬性"
v-on:click="" 綁定事件 @click="方法 clicks"

v-text="model" 填充 <p v-text="model"></p> var data={model:"模型，數據"};
v-model="model" 填： <input type="" v-model="model" name=""> var data={model:"模型，數據"};

條件渲染：
v-if="seen" 控制添加刪除節點 <div id="app" v-if="seen" > var data={ seen:true };

v-if="能作判斷"
v-else-if=""
v-else 連着v-if用
<template v-if="ok"> //template包裹元素 不顯示在頁面上
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

v-if 用 key 管理可複用的元素：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

v-show="seen" 切換元素的 CSS 屬性 display。 <div id="app" v-if="seen" > var data={ seen:true }; 不支持 <template> 元素，也不支持 v-else。

數組列表渲染： in 能替換成 of
v-for="item in data"// item.msg
v-for="(item , index) in data"// item.msg index索引

對象列表渲染：
v-for="value in object"
v-for="(value, key) in object" //鍵名
v-for="(value, key, index) in object" //index索引

組件列表渲染：
v-for="item in data"// key值要有
<main1 v-for="(item,index) of datas" :list="item.msg" :key="index"></main1>
Vue.component('main1',{
props: ["list"], //註冊
template:`<div> <p>{{list}}</p></div>`
})

產生一堆節點 ：
v-for="n in 10"

//template包裹元素 不顯示在頁面上

顯示過濾/排序結果
1.
v-for="n in evenNumbers"
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
2.
v-for="n in even(numbers)"
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
數組更新檢測：
1.變異方法 vm.datas.push({ msg: 'Baz' ,isOk:true})
push() 追加
pop() 移除列表中的一個元素(默認最後一個元素),
shift() 第一個元素從其中刪除
unshift() 向數組的開頭添加一個或更多元素
splice() 向/從數組中添加/刪除項目
sort() 排序
reverse() 反轉
2.替換數組 非變異方法
filter()過濾
concat()
slice()

對象更改檢測：
1.添加方法
Vue.set(object, key, value)
vm.$set(object, key, value)
Vue.set(vm.object, 'age', 27)
vm.$set(vm.object, 'age', 27)
2. 刪除
Vue.delete(object, key)
vm.$delete(object, key)
3.追加
vm.object=Object.assign({}, vm.object,object1);

綁定事件：
事件源 .on事件=事件處理函數
v-on:click="click1"
<button v-on:click="click1"> Submit</button>
methods:{
click1:function(event){ //event 是原生 DOM 事件

}
}
<button v-on:click="click2('hello', $event)"> Submit</button>
methods:{
click2:function(event){ //event 是原生 DOM 事件

}
}
vm.click1() 調用

事件修飾符： event.preventDefault() 阻止默認行爲 event.stopPropagation()阻止冒泡
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>

按鍵修飾符：
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

別名:
.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
自定義：
// 能夠使用 `v-on:keyup.f1` 給F1註冊別名
Vue.config.keyCodes.f1 = 112
組合鍵：
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
鼠標按鈕修飾符：
.left
.right
.middle

 

表單：
// msg:"measureText",
<input type="" name="" v-model="msg" />
//msg:"measureText",
<textarea v-model="msg" ></textarea>
// checked:true,
<input type="checkbox" id="checkbox1" v-model="checked">
綁定：
// 當選中時vm.checked === 'yes'
// 當沒有選中時vm.checked === 'no'
// checked:"yes", yes:"value", no:"value"
// checked:true,

<input type="checkbox" v-model="checked"
true-value="yes"
false-value="no"
>

// checkedNames:["Jack"],
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" >
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label> {{ checkedNames }}

// picked:"One"
<input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked"> <label for="two">two</label> {{picked}}
綁定：
//v-bind:value="a" 選中
<input type="radio" v-model="picked" v-bind:value="a">

//selected: 'B'
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
</select>
<span>Selected: {{ selected }}</span>
//循環加載option
//selected: ["1"],
// option:[
// {test:"A",value:"1"},
// {test:"B",value:"2"},
// {test:"C",value:"3"},
// {test:"D",value:"4"}
// ]
<select v-model="selected">
<option v-for="options in option" v-bind:value="options.value">
{{options.test}}
</option>
</select>
<span>Selected: {{ selected }}</span>
綁定：
// 當選中時 typeof vm.selected // => 'object' vm.selected.number // => 123
<select v-model="selected">
// <!-- 內聯對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>

表單修飾符：
//msg:"measureText", .lazy change 事件 離開時同步
<input type="" name="" v-model.lazy="msg" />
//輸入值轉爲數值類型
<input v-model.number="msg" type="number">

//過濾用戶首尾空白字符
<input v-model.trim="msg">

 

watch:{
msg:function(newVlaue,old){ }
}
vm.$watch("msg",function(newVlaue,old){ 監控屬性改變
})

 

methods:{ 事件 clicks() 每次都計算五緩存
clicks:function(){

}
}
filters:{ 處理文本 過濾器
a:function(value,msg1,msg2){
return value + a
}
}

computed:{計算 有緩存 不改變的話不計算
// 計算屬性的 getter
msg1:function(){ 默認get console.log(vm.msg1) 也能讀取
// `this` 指向 vm 實例
return this.msg.split('').reverse().join('');
}
}
computed: {
msg1: {
// getter
get: function () { 默認get console.log(vm.msg1) 讀取值
return this.msg + ' ' + this.lastName
},
// setter
set: function (newValue) { vm.msg1="設置值"
return newValue;
}
}
}

 

 

 

生命週期：
created:function(){ 建立以後執行
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
},

created、mounted(鉤子函數 數據加載)、updated （數據改變） 和 destroyed （結束）

 

js

Object.freeze()，阻止修改現有的屬性

綁定class
1. 對象語法 添加多個類 兩種方法
數據屬性
一個的
v-bind:class="{red:iscls}" var datas_1={ iscls:false }
v-bind:class="{red:iscls,bg:isbg}" var datas_1={ iscls:false,isbg:true }
多個的
v-bind:class="classObj" var datas_1={ classObj:{ red:false,bg:true } }

計算屬性
computed: {
classObj: function () { //默認get console.log(vm.msg1) 讀取值
return {red:this.iscls,bg:this.isbg}
}
}
2.數組語法
v-bind:class="[{ red:iscls }, bg]"

綁定內聯樣式
,隔開 自動添加前綴-webkib- -o-

1.對象語法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
activeColor: 'red',
fontSize: 30
}

<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

 

 

組件：

組件 `號 能夠換行：
<main1></main1>
註冊 全局組件：
Vue.component('main',{
props: ["tiaoshu", "dsahjk"], 註冊
template:`<div v-on:click="alert">1231231212 <p>1321231</p></div>`
})

局部組件： 規範 不能用駝峯寫法

一、components:{"main":{
template:`<div v-on:click="alert">1231231212 <p>1321231</p></div>`
}}

二、var 組件={ template:`<div v-on:click="alert">1231231212 <p>1321231</p></div>`}
components:{"main":組件}

註冊組件 以後初始化實例：
var vm=new Vue({
el:"#app"
})

is用法：
<table>
<tr is="main"></tr>
</table>
模板 解析字符串：
<script type="text/x-template" id="temp1">
<div v-on:click="alert">1231231212 <p>1321231</p></div>
</script>
var 組件={ template:"#temp1"}
components:{"main":組件}

組件配置：
template:""
props: [] 屬性
data:function(){
return{
msg:"1"
}
}
methods:{
jiajia:function(){
return this.msg++;
}
}

父向子 props: { propB: [String, Number],}子向父 $emit非父子 定義到鉤子函數裏 mounted:function(){ bus.$on("passid",function(arg1,arg2,arg3...){ }) } 定義事件 觸發事件 vm.$emit("passid",arg1,arg2,arg3)