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>`
})

局部组件： 规范 不能用驼峰写法

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

2、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)