Vue笔记(1)
1.vue
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
与jq的区别:
vue不操作dom,面向数据
jq,js库,封装dom,动画,ajax
2.使用
let vm=new Vue({
el:'',//绑定的dom节点
data:{
msg:'hello'
},//数据模型
methods:{
//在vue实例内访问vue实例身上的属性和方法使用this
changMsg(){
this.msg='world'//更改msg
}
}//函数/节点
})
{}内this都指向vm
在vue实例中访问内部的属性和方法,使用this访问
在vue实例外访问内部的属性和方法,使用实例本身访问
<div>
在模板内访问vue实例数据模型中的数据
{{msg}}//hello
</div>
事件绑定:@事件名=“函数名”
<button @click=“changeMsg”>点击我改变msg
修改数据:
1>函数内修改 this.msg=‘world’
2>vue实例对象外部修改 vm.msg=‘world’
3.vue 虚拟操作 虚拟dom树 虚拟节点
补丁算法 哪里变了补哪里
A vdom树 数据:a b c A更改a,仅更改使用a的部分
a块(代码发生变化) b块 c块 A vdom树 重新渲染到页面上
<p>{{a}}</p>
vnode节点 虚拟的dom节点
4.MVVM模式
Model 数据模型
View 视图
VM ViewModel 视图模型
数据模型中的数据更改,会自动映射到视图
5.生命周期(钩子函数)
beforeCreate(){}创建实例之前 初始化了事件处理程序,生命周期
created(){}实例创建好了,可以访问数据模型中的数据 初始化了数据和方法,将他们绑定在实例上
beforeMount(){}挂载之前 已经有模板了
mounted(){}挂载之后
beforeUpdate(){}更新之前
updated(){}更新好了
beforeDestroy(){}销毁实例之前
destroyed(){}实例销毁完毕
6.渲染
1>基本渲染 {{}}
2>列表渲染(循环渲染)v-for指令
<li v-for='(item,index) in arr' :key='index' :title="msg">
<!-- 属性渲染 key:当前作用域/数据模型 使用变量:key 唯一区分每次遍历出来的内容不一样-->
<!-- 有几个item生成几个li -->
{{index+1}}.{{item}}
</li>
指令存在的位置就是属性存在的位置
3>条件渲染 v-if v-else v-show
<div v-if='isLogin'>欢迎您</div>
<!-- true显示欢迎您 false查看器里没有-->
<div v-else>请登录</div>
<!-- false显示请登录 true查看器里没有-->
<div v-show='isLogin'>测试是否显示</div>
<!-- true显示 查看器里一直有-->
##### 4>简写
<!-- v-html 将html代码片段放入div中做子节点-->
<div v-html="htmlStr"></div>
<!-- v-bind:属性名 绑定属性 属性渲染-->
<div v-bind:title="msg">属性绑定</div>
<div :title="msg">属性绑定</div>
<!-- v-on:事件名='事件处理程序' 绑定事件 -->
<div v-on:click='test'>弹框</div>
<div @click='test'>弹框</div>
let vm=new Vue({
el:"#app",
data:{
msg:'hello',
htmlStr:'<span>123</span>',
},
methods:{
test(){
alert(1);
}
},
})
5>样式 跟对象或数组
<div v-bind:style='styleObj'>Hello</div>
<div :style="{color:currentColor}">World</div>
<div :style="[styleObj,styleObj2]">HelloWorld</div>
属性有重复,在数组内靠后的生效
6>class 跟对象或数组 对象内是类名:true/false
<div class="red" :class='{size:true}'>Hello</div>
<div :class='{red:false,size:true}'>World</div>
<div :class='[{red:true},{size:false}]'>hello world</div>
7.事件传参
函数后加(参数)
<button @click="toEdit($event,item)">修改</button>
//($event(事件对象),item)
methods:{
toEdit(e,item){
console.log(e,item);
}
}
8.事件修饰符(“事件处理程序”)
只有纯粹的数据逻辑,而不是去处理dom事件细节
.stop 停止事件冒泡 <div class="inner" @click.stop="inner">
.prevent 阻止事件默认行为 <a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a>
.capture 在事件捕获阶段执行事件处理函数 <div class="outer" @click.capture="outer">
.self 只当在event.target是当前元素自身时触发事件处理函数 <div class="outer" @click.self="outer">
.once 事件处理函数执行一次后解绑
.passive 滚动事件的默认行为(即滚动行为)将会立即触发,一般与scroll连用,能够提升移动端的性能
<div class="outer" @scroll.passive="outer">
按键修饰符:一般与keyup事件类型配合使用
<input type=“text” @keyup.enter=“keyupHandler”>
鼠标修饰符:.left .right .middle
9.表单数据绑定v-model
在表单控件元素上创建双向数据数据绑定,忽略所有表单元素的初始值,只会选择Vue实例对象来作为具体的值
数据模型中的数据发生改变时,视图跟着变;视图改变时,数据模型中的数据也跟着变
原理:
数据模型->视图
stu.username="tom";
监听对象的属性值发生变化
Object.defineProperty(obj,"username",{
configurable:true,
enumerable:true,
getter(){
return 1;
},
setter(param){
//123
input.value=param;
}
})
console.log(obj.username);
obj.username="jerry";
视图->数据模型
在input上监听键盘抬起事件,获取input的value值,设置给数据模型stu.username
input.onkeyup=function(){
stu.username=this.value
}
v-model="数据模型中的变量名/数据模型中的对象的属性值"
<input type="text" v-model="stu.username">
v-model.lazy="stu.username" .lazy在change发生后才更改
v-model.trim="stu.username" .trim去除数据前后空格
<input type="text" v-model.number="stu.age">
年龄:number类型 number修饰符 采集到的数据转为number类型再存到数据模型中
<input type="radio" value="male" v-model="stu.gender">男
<input type="radio" value="female" v-model="stu.gender">女
性别:checked 同一组单选按钮,绑同一个v-model
<input type="checkbox" value="basketball" v-model="stu.hobby">篮球
<input type="checkbox" value="swimming" v-model="stu.hobby">游泳
<input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
复选按钮绑定同一个v-model,需要给定默认数组
<select v-model="stu.city">
<!-- 没有给默认值的情况下,多选自动生成数组 -->
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="beijing">北京</option>
</select>
data:{
msg:"hello",
stu:{
// username:"",//当做绑定表单控件的value值
// age:"",
hobby:[],//复选框默认给空数组作为初始值
}
}
10.计算属性
计算属性 有依赖关系的数据
total a b
有依赖关系的数据发生变化,计算属性也发生变化
computed:{
// 计算属性的属性名是函数的方法名
total(){
return this.a + this.b;
}
}
11.监听属性
监听属性:监听某一属性变化
watch:{
// 函数的名字是监听数据的名字
a(newValue,oldValue){
// console.log(newValue,oldValue);
this.total=this.a + this.b;
}
}
普通监听只监听地址变化
深度监听还要监听内部数据属性的变化
obj:{
handler(newValue,oldValue){
console.log("obj数据发生了变化--");
},
deep:true//核心
}
12.组件
内部封装html代码,高级自定义的html代码元素
组件是可复用的vue实例,接收与new Vue相同的选项
创建组件
let myCom = {
data(){
return {
comMsg:"组件数据"
}//该组件的数据模型,数据模型之间相互独立
},
//模板,只能有一个根节点,本身数据来源->组件内
template:`
<div>
<span>{{comMsg}}</span>
<button @click="comMsg='新数据'">更改数据模型中的数据</button>
</div>
`
};
组件使用
在html中使用 标签<my-com></my-com>
1>组件注册
全局注册:注册a组件
组件被注册在全局范围内,在任何一个实例对应的模板中都可以使用该组件。
每个组件内数据模型可能一样,但地址不同
Vue.component("my-com",myCom);//组件名,组件
局部注册:注册在哪个组件内,哪个组件可以使用
my-comB 注册a组件 只能在my-com-b中使用
如果再有my-com2 不可以使用a组件,a组件没有注册在my-com2中
let myComB={
//局部注册A组件
components:{
"my-com-a":myComA
},
template:`
<div>
B组件
<my-com-a></my-com-a>
</div>
`
}
2>组件交互 数据通信
子组件使用父组件数据
a.父组件传递数据给子组件
静态属性/动态属性/横线拼接的数据
<my-com title="" :msg="msg" attr-a=""></my-com>
b.子组件接受并处理数据
接收父组件传递的数据,驼峰命名法接收
{
props:["title","msg","attrA"],
template:``
}
父组件使用子组件数据
<my-com @my-event="myEventHandler" :title="msg" static-attr="父组件给子组件的静态数据"></my-com>
【事件】发射 自定义事件
methods:{
toEmit(){
//发射 参数:(自定义事件名称,事件处理程序实参/发射的数据)
// 函数触发my-event事件
this.$emit("my-event",this.comMsg,100);
}
}
在子组件内发射,在父组件内接受
methods:{
//my-event事件处理程序
myEventHandler(a,b){
console.log(a,b, "--");
this.aa=a;
}
}
子组件发射时机:
a.手动按钮发送
b.监听子组件内数据变化,然后发射
在子组件内监听comMsg的变化,this.$emit("",this.comMsg)
父组件的事件处理程序调用,可以更改父组件数据模型中的数据,同步反映到父组件视图中
父组件给子组件数据时,子组件可以定义数据类型
静态传参,传字符串类型
:动态传参,可以传(number类型,布尔类型,对象,数组)/变量
<my-com :title="hello" :flag="true" :a="1" :obj="{name:'tom'}"></my-com>
{
//props:["title","staticAttr","obj"]
props:{
title:String
obj:Object
}
}
单项数据流(数据更改方向):
子组件使用父组件数据props 父子组件使用子组件数据emit
父可以改子,子不能改父
父组件可以改给子组件的数据 子组件不可以改父组件的数据
3>数据校验props
null、undefined可以通过任何校验
<my-a :msg="msg" sub-msg="父给子的数据" :stus="[1,2,3]" :is-active="true" :age="60"></my-a>
props:{
msg:String,
subMsg:String,
// stus:Array,
stus:{
type:Array,
// 数组给默认值
//错误
// default:[6,7,8]
//正确 Object/Array要一个工厂函数返回默认值
default(){
return [6,7,8];
}
},
// isActive:Boolean,
isActive:[String,Boolean],
name:{
type:String,
//必填项
// required:true
default:"jerry"
},
//自定义校验规则
age:{
type:Number,
//校验器 value是形参,实参是将来父组件给子组件传递的数据
validator(value){
return value>50;//if value>50,return true,else return false
}
}
}