vue学习笔记

#?vue项目结构##?前置准备1.node.js2.vue-cli3.创建项目：????????????-vue?ui????????????-vue?create?项目名????????????项目名不能是纯vue作为名字##?项目结构node_modules//依赖?插件包?可以删，因为包...

#?vue项目结构 ##?前置准备 1.node.js 2.vue-cli 3.创建项目： ????????????-vue?ui ????????????-vue?create?项目名 ????????????项目名不能是纯vue作为名字 ##?项目结构 node_modules//依赖?插件包?可以删，因为包里面的插件全部是在一个网站里npmjs.com 【重点】public?//公共目录，存放着我们唯一的html模板 【重点】src??//源代码，项目的核心所在，不能删也不能改名字 .gitignore??//git过滤清单 babel.conf.js??//解析es6转成es5的插件配置 【重点】package.json??//?包管理器文件，存放着依赖的名字，运行项目的命令 README.md??//项目的说明书
##?初始化项目依赖 当我们拿到别人的项目的时候一般情况下是没有node_modules包，需要使用命令初始化依赖 `npm?install`?or?`npm?i` `yarn?install` 【前提！】项目里必须有package.json ? #??指令 ###??v-model 数据双向绑定，用于表单元素 ###??v-text 渲染文本内容的插值｛｛｝｝等价 ###??v-html 渲染dom片段，且拥有v-text全部特性(防注入攻击，自动过滤) ###?v-noce 让元素只显示第一次渲染的内容，之后不再受数据更新的影响 ###?v-if 有三条同组指令：v-if?v-else-if??v-else,控制元素加载与销毁，v-if可以单独使用，后面两个必须跟在v-if后面才能生效 如果链式使用v-if则其中一条规则符合条件剩余的判断不会执行 ###?v-show 控制元素的显示与与隐藏，底层原理是修改的css样式的display的属性（如果频繁切换应使用v-show） [注意]频繁切换显示隐藏优先显示v-show，这样可以避免页面的回流，减少浏览器的性能开销 ###?v-for 语法:`<div?v-for='(value值,index下标)?in?arr'?v-bind:key='index'>{{value}}</div>` --特性必须在被循环的元素上加key，且key的值对元素是隐藏的，只是给diff算法用的； 【不要在循环元素使用v-if】 --循环渲染为什么要加key：v-for语法中循环渲染虚拟dom时使用diff算法计算中用于优化算法的。key必须保证在作用域中每一个值都是唯一不可重复的。 官方不推荐使用下标，且不可以使用时间戳，随机数 --作用：每个元素拥有独立的key值，key相当于人类的身份证(key值是唯一的) 推荐使用value+sshkey，sshkey=index?||?value+value2 ##?v-for渲染值类型 数组，对象（value，key，index），字符串，数字 渲染对象?v-for='(value值,key属性名,index下标)?in?obj'??v-bind:key='index' ##?diff算法 渲染快的原理：当数据发生改变的时候会生成新的虚拟dom树（object）。层层对比，用新的节点对比旧的节点，一旦发现不一样的节点就直接用新的替换旧的 ###?v-bind 绑定属性指令，简写?:?，它用来给元素绑定动态属性,一旦使用，里面的值必须是一个数据变量，如果是字符串必须使用引号引起来，它既可以绑定原生属性，也可以绑定自定义属性，一般情况下，自定义属性用来组件通讯 ###?v-on 绑定事件指令，简写`@` ? ##?开发规范 1.assets存放静态资源的（写死的东西） 2.components存放组件的，公告组件 3.views存放视图组件的表示独立的页面 ##?命名规范 1.函数命名：fn_name 2.对象：o_name 3.数组：a_name 4.小组合租开发的时候：页面的名字+功能的名字+自己名字的缩写+工号 ? #?循环渲染 ###?语法 1.渲染数组v-for='(value值,index下标)?in?data'?v-bind:key='index' ##?可以遍历的值类型 数组，对象，字符，串数字 2.渲染对象?v-for='(value值,key属性名,index下标)?in?obj'??v-bind:key='index' 3.【注意】被循环的元素上必须加上key(key值不能重复) 4.循环渲染为什么要加key：v-for语法中循环渲染虚拟dom时使用diff算法计算中用于优化算法的。key必须保证在作用域中每一个值都是唯一不可重复的。 官方不推荐使用下标，且不可以使用时间戳，随机数 推荐使用value+sshkey，sshkey=index?||?value+value2 5.作用：每个元素拥有独立的key值，key相当于人类的身份证(key值是唯一的) ##?diff算法 渲染快的原理：当数据发生改变的时候会生成新的虚拟dom树（object）。层层对比，用新的节点对比旧的节点，一旦发现不一样的节点就直接用新的替换旧的
#?事件 ##?事件的绑定 `v-on:eventName`简写`@eventName` 事件的回调函数来自于methods里的函数 ##?事件修饰符 -?.stop?阻止事件冒泡 -?.prevent?阻止默认事件 自定义按键修饰符 Vue.config.keyCodes.back?=?8 ###?props?:?属性 ??属性是父组件传进来的数据，子组件不能直接修改 ??props和data数据很相似，都是属于存放数据的 ??props只接受属性，函数不能在这里接收 ###???按键修饰符 ??.enter或者.13监听回车 ###???自定义按键修饰符 `Vue.config.keyCodes.myCode=keyCodes` ? #?生命周期 ##?概念 初始化，完成渲染，更新页面，卸载页面（销毁程序）===程序 ##?定义 事物在不同阶段的不同表现，叫做生命周期。 即初始化，挂载，更新，销毁四个阶段 ##?api ###?初始化/创建阶段 -beforeCreate?创建前 -created?创建后 ###?挂载/渲染阶段 -beforeMount??挂载前 -mounted?挂载完成 ###?更新阶段 -beforeUpdate?更新前 -updated?更新后 ###?卸载/销毁阶段 -beforeDestroy?卸载前 -destroyed?卸载后 ##?总结 1.生命周期里，mounted用于组件渲染完成后发起的ajax请求（里面写我们要获取的数据） 2.beforeDestroy用于组件销毁前清除常驻内存的数据
server就是在内存打包后的build代码 如果把图片地址赋给变量，需要用require语法 require就是nodejs导入模块的意思 等价于import ? ? #?form? ##?专属指令v-model ##?标签类型 -?input ??-文本:text ??-密码:password ??-日期:date ??-数字:number ??-单选框:radio??v-model绑定的是它的value值 ??-复选框:checkbox ??-按钮：button -?select ??v-model写在select标签上但是获取的值是来自于包裹的option标签上的value值 ? #?组件 ##?局部组件 在单独的vue文件里使用components注册的组件 只能在当前组件内使用，叫做局部组件 ##?全局组件 使用全局Vue对象的component方法注册的组件， 可以在任意的vue文件使用，叫做全局组件 $开头的变量都是vue内置的 ref就是获取dom元素的 ? #?组件通讯 ##?props属性 1.普通写法：`props:['p1','p2']` 2.配置写法： ```js export?default{ ??props:{ ??//简单验证 ??props:string, ??//设置默认值 ??obj:{ ????//如果是对象或数组使用函数 ????type:Object, ????default:function?()?{ ????????return?{ ???? ????} ??}, ??//简单的初始值 ??count:{ ????type:string, ??} } }
``` 3.注意的是在子组件内修改简单类型的值props会报错， 如果修改的是对象或数组里的值，则不报错 4.定义：props是上游组件传递的数据，子组件不可以修改 5.props是父传子最常见的通信方式 ##?父传子 1.父组件向子组件通过绑定属性，传递一个数据 子组件通过props接收父组件传递的属性值（数据） 2.$children 获取所有子元素的集合，直接操作子元素或调用子元素的方法【不推荐】 ##?子组件 1.常规方式$emit调用父级传过来的函数 2.$parent获取父组件实例对象，直接修改或调用【非常不推荐，别使！！！】 ##?双向通讯 ###?v-model 作用：使父子组件进行双向的修改，双向的伪绑定 语法：1.父传子v-model绑定带子组件上 2.子传父：this.$emit('input',newData) 概念：当我们在子组件上使用v-model绑定值的时候 会自动的向子组件注入一个value值和一个input函数 子组件如果想修改value就是用$emit调用input函数名
??.tirm:去掉两头空格 ??.number：尝试把输入内容转成数字 ????.lazy:当失去焦点时赋值
###?.sync?属性修饰符 作用：使父子组件进行双向的修改，双向的伪绑定 语法：1.父传子：叫v-bind：prop.sync='prop' 2.子传父：this.$emit("update:prop",nweData)

##?props?父传子【常用】 ##?$emit?&?$on?子传父【常用，来自于自定义事件】 ##?$parent?&?$children【应急方案，不推荐】 ##?$attrs?&?$listeners【夸组件层级，简单，推荐】 ##?provide?&?inject【开发高阶组件，不推荐。跨组件层级】 ##?vuex【强大，适合大项目，跨组件层级】 ?