Vue
捷径
- 引入：https://unpkg.com/vue@2.6.14/dist/vue.js
- 下载命令： curl https://unpkg.com/vue@2.6.14/dist/vue.js -o c:vue.js
- 优点
- 减少不必要的数据操作
- 提高渲染效率
- 不需要再操作dom
- 关注于数据逻辑
- 改变为箭头函数，function(){} =====（）=>{} 让函数体内部的this指向与外部保持一致，否则需要在上级指定代指this
函数细节
-
el 操作的选择器
-
data 操作的数据
-
methods 使用的方法，函数，show:function(){}
-
filters 私有过滤器，私有优先，全局往后，里面存放一个类似于methods的构造体，只允许组件内部调用，
-
directives 自定义指令，同上，详情查看指令
-
computed 计算属性，只要用到的data值发生改变，则，会立即更新，会将值缓存，如果不发生改变则后续使用缓存而不重新计算
//将会将所有的该元素全部替换成下列计算返回之值，而且实时更新，他是作为一个变量被调用 computed:{ 'funname':function(){ return this.fname+this.lname } } -
watch 对象内存放监听的对象以及处理方法,参数是旧值和新值,可以监听任何改变
'$route.path'监听路由watch:{ msg:function(newval,oldval){ console.log(newval) console.log(oldval) console.log("发生了改变") } } -
components 定义私有组件
-
<login></login> components:{ login:{ template:"<div>this is div</div>" } } //可以将组件分离通过id进行关联 <template id="tmp1"> <div> this is a div </div> </template> components:{ login:{ template:"#tmp1" } }
-
-
生命周期函数{all}
-
router 路由
插值
- {{msg}} 普通插值
- v-clock 解决插值表达式闪烁问题，当数据获取成功时消失，
- v-text=”msg“ 标签之中插入，影响第一个标签以前的文本，不影响第一个标签后续，没有闪烁
- v-html 标签之间插入一段html代码，影前不影后，没有闪烁
- v-bind 简写为 :title=“msg” 将会特别解析字符串中以变量解析，可以解析表达式（:title=“msg+‘txk’”）
- v-on 事件绑定，简写为@click=”dianji"
- v-model 可以实现双向数据绑定，只能运用在表单元素中
- v-for 迭代对象，（值，键，索引)
- v-if 每次都会重新删除或创建元素，有很高的切换性能消耗
- v-else 与v-if相对，当设置的值不是if等于true，就会显示v-else元素,only one.
- v-show 每次不会重新进行DOM的删除和创建操作，只更改元素的display：none 样式有很高的初始渲染消耗
- 如果不需要频繁切换显示 状态应使用v-if，如果需要频繁切换，需要使用v-show，就算不需要也会创建
- 事件修饰符
- @keyup.修饰符=“绑定事件”
- .码值 下面是默认键盘值
- .enter 监听回车键
- .tab
- .delete 监听删除和退格键
- .esc
- .space
- .up
- .down
- .left
- .right
- @click.修饰符
- .stop 阻止冒泡，只运行当前元素，父元素不允许
- .prevent 阻止默认事件列如a标签跳转，加入后不会触发跳转
- .capture 添加事件侦听器时使用事件捕捉模式，优先使用捕获到的事件，谁写捕捉谁，其他按顺序
- .self 只当事件在该以元素本身（比如不是子元素）触发时触发返回，只有针对他才能触发事件
- .once 事件只触发一次
- eval 方法可以解析字符串并且计算值
- 改变样式
- ：class=“[ “red”,“green” ]” 使用数组来定义样式，
- 可以在数组中使用三元表达式，可以被解析
- 可以放一个对象，类名对应的值如果为ture则应用，否则不应用
- 对象以及标识符，是否启用
内建方法
- 数组
- push（）
将新元素添加到数组末尾 - unshift（）
将新元素添加到数组头部 - findIndex(item=>{})
返回内部成功（需要写配对）的索引位置 - some((item,i)=>{})
item代指每次循环子体，i代指每次循环索引，可以通过内部return false终止 - splice（索引，数量）
删除数组中索引位置的元素 - forEach（item=>{}）
循环，item代指每次循环子体，不能够被打断终止 - filter（item）
遍历每一个元素，在return中如果返回需要的循环子元素，就会组成一个新数组，通过此方法返回
- push（）
- 字符串
- 字符串拼接
{变量}++++{变量}会特别处理大括号内的变量 - includes(str) 如果包含字符串返回ture，如果不包含返回false
- indexOf(str) 如果存在字符串就返回1，不存在返回-1
- replace(“被替换者”/正则，“替换者”) 将字符串中的字符替换成其他
- toString() 转换为字符串
- padStart(位数，“填充体”) 标准位数，使用的填充体，不足则填
- 字符串拼接
- 日期
- 新建日期对象 new date()
- new date(str) 根据给出的字符串创建一个日期对象
- .getFullYear() 得到日期对象的年
- .getMonth() 得到日期对象的月，默认从零开始，加一为正确月数
- .getDate() 得到日期对象的天数
- .getHours() 得到日期对象的小时数
- .getMinutes() 得到日期对象的分钟数
- .getSeconds() 得到日期对象的秒数
特有属性
-
过滤器：做进一步处理，允许自定义过滤器，可以用作一些常见文本格式化，mustachc插值和v-bind表达式
- 创建全局过滤器：
Vue.filter(“过滤器名称”,function（data,arg){ 处理体 }）
可以传递参数 - {{name | nameope(arg)}}
{{ 过滤器传递数据 | 调用的过滤器名称(参数) }} - 过滤器可以叠buff，多次调用
- 创建全局过滤器：
-
键盘码配置
- Vue.config.keyCode.f2 = 113
- 将码值113绑定为f2
-
自定义指令
-
v-diy=" ‘你好’ " 为参数字符串，其他为变量会报红
-
Vue.directive(“focus”,{
inserted:function(el，binding){
el.focus()
}
}) -
行为需要渲染出来后才能执行，而属性可以在构建之处写入
-
第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的js对象
- style 原生js样式
- color 字体颜色
- fontSize 字体大小需要带单位，可以使用parseInt将字符串给转成数字，字符串部位将被丢弃
- backgroundColor
- focus 获得焦点
- style 原生js样式
-
第二个参数binding 表示对象包含以下属性
- name 指令名，不包含v-前缀
- value 指令的绑定值，经过计算
- oldValue 指令绑定的前一个值，仅在update和componentUpdated钩子中可以使用，无论值是否改变都可用
- expression 绑定值的字符串形式，不计算
- arg 传递给指令的参数，v-diy:red arg值是“red"可以用于传值
- modifiers 一个包含修饰符的对象，列如v-diy.stop
修饰符对象的modifiers的值是{stop：true}
-
生命周期内行为
-
bind 只调用一次，指令第一次调用绑定到元素时使用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作，此时没有被渲染出来，可以省略，省略则代表写进bind和update周期内
-
inserted 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
-
update 所在组件更新时调用，但是可能发生在其孩子的vNode更新之前，指令的值可能发生了改变，也有可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新（详细的钩子函数参数见下）
-
componentUpdated 所在组件的VNode及其孩子的VNode全部更新时调用，
-
unbind 只调用一次，指令与元素解绑时调用
-
-
生命周期
生命周期钩子=生命周期函数=生命周期事件
-
主要的生命周期函数分类
-
创建期间的生命周期函数
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性
- created：实例已经在内存中创建成功，此时data和methods已经创建成功，此时还没有编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载/渲染到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
-
运行期间的生命周期函数
- beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是页面上的显示数据还是旧的，因为还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据已经完成更新，界面重新渲染完成
-
销毁期间的生命周期函数
- befoeDestroy : 实例销毁之前调用，在这一步，实例依然完全可用
- destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
-
外部组件
请求
请求地址 因为接口失效暂无
vue-resource依赖于vue，所以需要先导入vue，然后再导入resource
vue-resource.js地址：https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js
-
get：
-
post:
-
jsonp:
- jsonp访问原理
- 由于浏览器安全性限制，不允许AJAX访问，协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全
- 可以通过动态创建script标签的形式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取的方式，称作jsonp（根据jsonp的实现原理，知晓，jsonp只支持get请求）
- jsonp访问原理
-
全局配置根域名
- Vue.http.options.root = ‘根地址’;
- 如果配置了全局的根域名，每次发请求时，应该以相对路径开头，不能带 / 否则不会使用根路径拼接
- Vue.http.options.emulateJSON = true
- 全局配置emulateJSON选项
- Vue.http.options.root = ‘根地址’;
动画
-
进入
- v-enter 进入之前
- v-enter-to 进入之后
- v-enter-active 进入时
-
离开
- v-leave 离开之前
- v-leave-to 离开之后
- v-leave-active 离开时
-
列表多元素
-
v-move 移动时，通常指定动画时间
-
v-leave-active 离开时的动画
-
v-move和v-leave-active配合使用能够实现列表元素动画流畅效果
-
例子：
css部分 <style> .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } .v-move { transition: 0.6s; } .v-leave-active { position: absolute; } </style> body部分 <transition-group appear tag="ul" mode="out-in"> <li @click="del(i)" v-for="(item,i) in list" :key="item.id">{{item.id}}--{{item.name}}</li> </transition-group>
-
特点：进入之前的状态是和离开后的状态是一样的，离开之前是和进入之后是一样的，进入时是和离开时一致状态
mode:动画顺序，先出后进/先进后出
分别为三种状态写对应的类样式，然后为其指定属性
opacity：透明度
transform: 移动方位距离
transition： 动画过渡时长和对象
将需要实现动画的对象用transition包裹起来，更改transition的name属性可以实现更多数量动画，
<style>
.diy-enter-to{
this is css code
}
.diy-leave-to{
this is css code
}
</style>
<transition name = "diy">
<span>test</span>
</transition>
-
对重复的元素进行动画，需要使用transition-group
for循环放在子里面,为子对象设置动画必须包含key，key必须唯一,添加appear可以让动画一开始每一个元素都使用动画入场，tag指定该元素渲染为什么元素，如果不指定，默认渲染为span元素
<transition-group appear tag="ul"> <li v-for="item in list" :key="item.id">{{item.id}}--{{item.name}}</li> </transition-group> -
第三方组件库
- animate.css
- https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
- 通过在transition中指定类名方式添加动画，需添加基本animate类
- :duration=“毫秒” 指定动画持续时间,只传入一个数则对两个指定相同，传入对象{enter:100,leave:200}可以分别对进入以及离开进行指定持续时间
- animate.css
<transition name="diy"
enter-active-class="
animate__animated
animate__bounceIn"
leave-active-class="
animate__animated
animate__bounceOut"
:duration="{enter:200,leave:400}"
>
<h1 class="big" v-if="flag">test</h1>
</transition>
-
动画生命周期
-
实例如下
-
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="op"></div> </transition>
-
-
进入
-
@before-enter= “进入之前”
需要在方法中写入此处的具体方法体,el是作为原生js的对象，方法体给予操作
beforeEnter(el) { el.style.transform = "translate(0,0)" } -
@enter=“进入时”
el作为js的原生对象，done就是afterenter的代指，在此为调用afterenter方法，el.offsetwidth是强制动画刷新，不指定动画不会出现
enter(el, done) { el.offsetWidth el.style.transform = "translate(490px,300px)" el.style.transition = "all 1s ease" done() }, -
@after-enter=”进入之后“
-
@enter-cancelled=“进入取消”
-
-
离开
- @before-leave=“离开之前”
- @leave=“离开时”
- @after-leave=“离开之后”
- @leave-cancelled=“离开取消”
-
组件
组件的出现是为了拆分vue实例的代码量，能够用不同的组件划分不同的功能，
模块化：是以代码逻辑的角度进行划分
组件化：是以ui界面的角度进行划分
-
创建组件
-
extend 先创建模板然后使用component创建组件，然后在模板中使用，模板中如果使用了驼峰命名，就需要将大写给改为小写字母，同时在两个单词之间用 - 连接，如果不使用驼峰，直接使用即可
<body> <myname></myname> <my-name></my-name> </body> <script> var com = Vue.extend({ template:"<h3>this is extend</h3>" }) //component(组件名称，组件的模板) Vue.component("myname",com) Vue.component("myName",com) </script> -
component(“name”,{template:“tamplate”}) 应该只有一个根元素
Vue.component("myname",{tamplate:"<div> <h1> this is h1 </h1> <h3> this is h3,只能有一个根组件 </h3> </div>"}) -
component(“name”{template:“#tmp1”}) 外部定义模板
<template id="tmp1"> <div> this is a div </div> </template> <script> Vue.component("myname",{template:"#tmp1"}) </script> -
var com1 = {}
<div id="app"> //调用 ,将方法show作为func传递给子组件 <com1 @func="show"></com1> </div> <template id="com1"> <div> <h1> this is a son </h1> <input type="button" @click="change"></input> </div> </template> //整个对象完成封装准备扔给注册 var com1 = { template:"#com1", //组件内的数据必须为方法，返回一个对象 data(){ return{ son:{ name:"小头儿子", age:20, } } } methods:{ change(){ //this代指本组件，$emit表示接收到的发射方法，后面跟着传递的数据 this.$emit("func",this.son) } } } var vm=new Vue({ el:"#app", components:{ //注册 com1 }, methods{ show(data){ //当传递的数据为一个元组时，通过键调用 console.log(data.name+data.age) } } })
-
-
组件属性
-
data 可以有自己的data必须是一个方法，必须返回一个对象，组件中的data数据可以在实例中使用一致
Vue.component("myname",{ template:"<div>this is div{{msg}}</div>", data:function(){ return{ msg:"this is msg" } } })
-
-
组件调用
- :里面解析变量，如果是字符串，应该放入‘字符串’
-
组件传值
- v-bind：msg=“msg” 组件传值
- props:[‘msg’] 组件内对值进行重定义，只读不能重新赋值
-
组件传递方法
-
v-on: func = “function”
-
methods:{
show(){
this.$emit(“func”)
}}
-
此中将此组件接收到的方法可以通过 e m i t ( ) 找 到 ， t h i s 代 表 本 组 件 ， 本 组 件 的 emit()找到，this代表本组件，本组件的 emit()找到，this代表本组件，本组件的emit() 的发射器接收到的所对应方法即可，完成方法传递
-
本地存储
-
json
//利用json将数据格式化，正确返回对象，否则返回'[]' var list = JSON.parse(localStorage.getItem("cmts") || "[]") list.unshift(con1) //将数据存入“cmts”与上文保持一致 localStorage.setItem("cmts", JSON.stringify(list)) this.user = this.conent = '' //调用父组件方法 this.$emit("load")
属性
ref
ref引用，可以放在dom元素以及组件上，可以直接使用dom元素的方法以及组件内的方法和属性
路由
后端：对于普通网站，所有的超链接都是url地址，所有的url地址都对应这服务器上的资源
前端：对于单页面应用程序来说，主要通过url中的hash（#）（哈希路由）来实现不同页面之间的切换，同时，hash有一个特点，http请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要通过hash实现，
在单页面中，这种通过hash改变切换页面的方式，被称作前端路由（用于区别后端）
-
容器
<router-view></router-view> -
注册路由
-
var router = new VueRouter({}) children,匹配后续的路径
//为路由组件指定名字，显示指定的路径元素 <router-view name="head"></router-view> var router = new VueRouter({ routes: [ { path:"/", //根路径重定向路由 redirect:"/login" } { //path #匹配的地址 path: "/login", //component 匹配对应的组件 component: login }, { path: "/zhuce", //可以为该路径传入多个组件 defunct 默认匹配的 components: { defunct:head, left:left, center:center, }， children:[ { //会默认添加前路由， path: "login", component: login }, ] }, ] })
-
-
让路由和组件关联
- router:router
//router接受的是一个router对象 router: router,
- router:router
-
跳转路由
-
#/path
<a href="#/login">login</a> <a href="#/zhuce">zhuce</a> <router-view></router-view> -
router-link /login/fisrt 代表子路由，将会进一步解析到该路径的子路由下方
<router-link to="/login/fisrtt">login</router-link> <router-link to="/zhuce">zhuce</router-link> <router-view></router-view>- tag = “span” 默认渲染为a标签，通过tag渲染为其他
-
-
被启动的路由会加上类router-link-exact-active和router-link-active，创建时，使用linkActiveClass自定义激活类
-
this.$routes.query 可以获得路径传过来的get方法值，是一组对象，可以传递多个参数
data(){ return{ msg:this.$routes.query } } -
params 通过路由给路径指定占位符，在传递地址的时候将占位符对应的解析给占位符，作为对象存储在params，如果对应的路径没有对应的值传入，将不会正确匹配地址
<router-link to="/login/10">login</router-link> var router = new VueRouter({ routes: [ { //下面：是占位符 path: "/login/:id", component: login }, })
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
