总有那么一个想法
我想去走走
菩提
刷新
世界很大,真的很大
欢迎使用Family_Notes!登录后,点击上方左侧导航,查看对应模块的笔记;点击上方右侧昵称,编辑自己的笔记;
Vue2.0
基础内容
一、入门 1、环境准备 1)、安装谷歌浏览器插件扩展程序 vue2.x:vue_dev_tools.crx; vue3.x:vue3_dev_tools.crx; 2、注意细节 1)、函数写法:(确定当前 this -> 箭头函数会丢失当前 this -> 函数里面再用到 this 会往外去找 -> 确定外层 this 对象 -> 根据需求确定是用箭头函数还是普通函数) 所有被Vue管理的函数,最好写成普通函数,不要箭头函数,这样this的指向才是vm 或 组件实例对象。 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。 目的都是为了使用 vm 中的 this; 3、一些常用方法 1)、过滤:从数组中筛选符合添加的元素 let persons = [ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] let val = "周"; let filtArray = persons.filter((p)=>{ return p.name.indexOf(val) !== -1 }) 2)、排序:对一个数组进行快速升序、降序 let arr = [1,435,32,1,23,45,46]; arr.sort((a,b)=>{ return a-b;//升序 //return b-a;//降序 }) 属性修改 -> 响应式 setter -> 模板解析 -> 虚拟 dom 对比 -> 真实 dom 渲染; vue set方法,增加响应式属性 //**************************************************************************** 二、赋值 1、给“标签体内容”赋值,使用“插值语法”即可
你好,{{name}}
2、给“标签属性”赋值,使用“指令语法”即可 1)、单向绑定 v-bind //
点我去{{school.name}}学习1
点我去{{school.name}}学习2
2)、双向绑定 v-model:数据不仅能从data流向页面,还可以从页面流向data;双向绑定一般都应用在表单类元素上(如:input、select 等有 value 属性的元素上) //
3、给对象赋值(数据代理):Object.defineProperty(对象, 属性名, {...});//vue_basic/06_数据代理; 4、Vue实例 new Vue({ el:'#root', data:{ name:'jack', school:{ name:'尚硅谷', url:'http://www.atguigu.com', } } }) //**************************************************************************** 事件处理 一、绑定点击事件 1、完整指令写法:
点我提示信息
2、简便写法:
点我提示信息1(不传参)
3、传参写法,使用占位符传递 event 事件,同时传递参数:
点我提示信息2(传参)
4、vue 实例 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', }, methods:{ showInfo1(event){ // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好!') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好!!') } } }) 二、滚动事件 1、页面滚动条滚动事件
2、鼠标滚轮滚动事件
三、键盘事件 1、@keydown:按下即触发(不需要抬起) 2、@keyup:按下并抬起,才触发; 3、指定键盘按钮事件,例如按下回车触发:@keyup.enter="demo" 1)、常用键盘事件 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊,必须配合keydown去使用) 2)、方向键 上 => up 下 => down 左 => left 右 => right 四、事件修饰符(
点我提示信息
) 1、prevent:阻止默认事件(常用); 2、stop:阻止事件冒泡(常用); 3、once:事件只触发一次(常用); 4、passive:事件的默认行为立即执行,无需等待事件回调执行完毕; //**************************************************************************** 属性操作(data 里面的属性操作) 一、计算属性(computed): 1、原理: 函数里面当所依赖的属性被修改了,就触发函数; 计算属性的属性,不用在 data 里面声明; 初次读取会触发一次; 需要有返回值,作为计算属性的值; 2、实现 1)、准备好一个容器
姓:
名:
全名:
{{fullName}}
2)、计算属性:fullName const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', }, computed:{ //完整写法 /* fullName:{ get(){ console.log('get被调用了') return this.firstName + '-' + this.lastName }, set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } */ //简写 fullName(){ console.log('get被调用了') return this.firstName + '-' + this.lastName } } }) 二、监视(侦听)属性(watch): 1、原理: 监视一个值,这个值需要在 data 中声明; 当被监视的属性变化时, 触发回调函数; 设置 immediate 可以初始化时候触发; 设置 deep 可以深度监视; 不需要返回值,里面直接干活即可; 2、实现: 1)、可以放在实例中监视: const vm = new Vue({ ... watch:{ isHot:{ // immediate:true, //初始化时让handler调用一下 //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) 2)、也可以在实例外面监视(侦听): const vm = new Vue({...}) vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) 3、深度监视(侦听):当一个属性的值有嵌套结构时,想要监听嵌套里面任意一层数值的变化,只要默认值即可(deep:true,) numbers:{ //immediate:true, //初始化时让handler调用一下 deep:true,//深度监视 handler(){ console.log('numbers改变了') } } *4、深度监视(侦听)简写方式,不需要 immediate、deep 时可以简写: 1)、vue 实例里面写法 const vm = new Vue({ ... watch:{ isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } }) 2)、vue 实例外面的写法: vm.$watch('isHot',function(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) }) 三、计算属性 computed 与监视属性 watch 的对比 1、两者都可以实现 c=a+b ,用来计算 c 的值; 2、使用计算属性 computed 实现起来比较方便; 3、使用监视属性 watch 可以实现异步(例如等待1秒之后计算),但是计算属性 computed 目前无法实现异步; watch:{ firstName(val){//val 就是 newvalue,第一个是 newvalue,此处简写了 setTimeout(()=>{ console.log(this)//注意这里需要用到 vm 的 this,所以得借助箭头函数处理一下; this.fullName = val + '-' + this.lastName },1000); } } 4、注意用到 this 时,需要考虑使用普通函数还是箭头函数; //**************************************************************************** 样式控制 一、属性赋值,通过 class 来控制: 1、通过变量值控制: 1)、原理:借助了 vue 的属性赋值(指令 v-bind),申明一个动态classname,然后给 class 属性动态赋值,通过 classname 来控制样式; 2)、适用范围:样式的类名不确定,需要动态指定; 3)、举例:
{{name}}
data 里面维护 mood 属性,然后根据需要动态指定不同样式 class 名称即可; 2、通过数组来控制: 1)、原理:属性赋值,然后动态添加 class 是操作 class 数组; 2)、适用范围:要绑定的样式个数不确定、名字也不确定; 3)、举例:
{{name}}
classArr 是一个数据,在事件方法中动态控制 calss; 3、通过对象来控制: 1)、原理,属性赋值,先有一个对象,对象中有多个 map 形式的样式值,通过控制 value 是否选中来控制是否启用样式; 2)、适用范围:要绑定的样式个数确定、名字也确定,但要动态决定用不用 3)、举例:
{{name}}
classObj 是一个 map 对象; 4、vue 实例: const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', mood:'normal', classArr:['atguigu1','atguigu2','atguigu3'], classObj:{ atguigu1:false, atguigu2:false, } } }) 二、指令控制 1、页面是否展示(v-show、v-if) 1)、高切换频率的场景使用 v-show:v-show="表达式"
欢迎来到{{name}}
2)、低切换频率的场景使用 v-if:v-if="表达式"(v-else-if="表达式";v-else="表达式")
欢迎来到{{name}}
//v-if与template的配合使用,不会破坏页面结构,template 最终不会被渲染;
你好
尚硅谷
北京
2、遍历渲染(v-for),of/in 都可以; 1)、数组遍历(注意 key 的选用,要是唯一标识,例如 id;尽量不要使用下标)
{{p.name}}-{{p.age}}
2)、对象遍历
{{k}}-{{value}}
*3)、字符串遍历
{{char}}-{{index}}
4)、vue 实例: new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奥迪A8', price:'70万', color:'黑色' }, str:'hello' } })