搜索到
113
篇与
的结果
-
过度与动画 作用：再插入、更新或移除DOM元素时，在合适的时候给元素添加样式名语法：（1）准备样式元素进入的样式v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点（2）使用<transition>包裹要过度的元素，并配置name属性<transition name="demo"> <h1 v-show="isShow"> 孙笑川 </h1> </transition>（3）注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都需要指定key值 -
配置代理 方式一在vue.config.js中添加如下配置：devServer: { proxy: 'http://localhost:5000' }注：（1）该方式配置简单，但不能配置多个代理，且不能灵活的控制请求是否走代理 （2）当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）方式二devServer: { proxy: { '/api': { target: 'http://localhost:5000', //路径重写 pathRewrite: {'^/api':''}, ws: true, //用于空值请求头中的host值（默认值为true） changeOrigin: true }, '/demo': { target: 'http://localhost:5001', pathRewrite: {'^/demo':''}, ws: true, changeOrigin: true } } }注：可以配置多个代理和灵活的控制请求是否走代理（请求时必须加上前缀）
-
全局事件总线（GlobalEventBus） 定义：一种组件间的通信方式，适用于任意组件间通信安装全局事件总线new Vue({ ...... beforeCreate() { //安装全局事件总线 Vue.prototype.$bus = this } })使用：（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，且回调留在A组件自身methods: { demo(data) { ...... } } mounted() { this.$bus.$on('xxx', this.demo) }（2）提供数据：this.$bus.$emit('xxx', data)注：最好在beforeDestroy钩子函数中，使用$off('xxx')解绑当前组件所用到的自定义事件
-
-
webStorage 存储内容一般5MB左右（不同浏览器之间存在差异）；浏览器端通过window.sessionStorage 或 window.localStorage属性来实现本地存储机制API（1）xxxStorage.setItem(key,value) 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名已存在，会更新其对应的值；（2）xxxStorage.getItem(key) 返回键名对应的值；（3）xxxStorage.removeItem(key) 从存储中删除对应的值；（4）xxxStorage.clear() 清空存储中的所有数据；注：（1）sessionStorage存储的数据会随浏览器关闭而消失； （2）localStorage存储的数据需要手动清除； （3）xxxStorage.getItem(key) 如果对应的值不存在，则返回null； （4）JSON.parse(null)的结果依然为null；
-
组件的自定义事件 定义：一种组件间的通信方式，适用于：子传父使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定自定义事件：（1）方式一：<Demo @getName="getName"/> 或 <Demo v-on:getName="getName"/>（2）方式二：<Demo ref="getName"/> mounted() { //this.xxx为回调方法 this.$refs.getName.$on('getName', this.xxx) }（3）若想让自定义事件只触发一次，可以使用once修饰符或$once方法触发自定义事件：this.$emit('getName', 参数)解绑自定义事件：解绑一个：this.$off('getName')解绑多个：this.$off(['getName', 'getAge'])组件上可以使用native修饰符绑定原生DOM事件注：通过this.$refs.getName.$on('getName', this.xxx)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数
-
ref属性、props配置、mixin混入、插件、scoped样式 ref属性被用来给元素或子组件注册引用信息（id的替代者）；应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）；使用方式：标识：<h1 ref="xxx">孙笑川</h1> 或 <Demo ref="xxx"/>获取：this.$refs.xxxprops配置功能：让组件接收外部传过来的数据传递数据：<Demo name="xxx"/>接收数据：//1.简单接收 props: ['name','sex','age'] //2.接收的同时对是数据进行类型限制 props: { name: String, sex: String, age: Number, } //3.类型限制，默认值指定，是否必传 props: { name: { type: String, required: true }, sex: { type: String, required: true }, age: { type: Number, default: 99 } }注：props是只读的，Vue底层会监测你对propos的修改，如果进行了修改，会发出警告；若业务中确实需要修改，可以将该属性复制到data中并定义，修改后定义的数据mixin混入功能：可以把多个组件共用的配置提取成一个混入对象使用方式：定义混合{ data() { ... }, methods: { xxx } }使用（1）全局引入：Vue.mixin(xxx)（2）局部混入：mixins: [xxx]插件功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的参数定义插件：//定义plugins.js export default { install(Vue,x,y,z) { console.log('插件被调用了', Vue,x,y,z) //全局过滤器 Vue.filter('mySlice', function (value) { return value.slice(0,3) }) //自定义全局指令 Vue.directive('fbind', { bind(element, binding) { element.value = binding.value }, inserted(element) { element.focus() }, update(element, binding) { element.value = binding.value } }) //全局混入 Vue.mixin({ data() { return { x: 100, y: 200 } } }) //给Vue原型上添加一个方法 Vue.prototype.hello = () => { alert('给Vue原型上添加一个方法') } } }使用插件：在main.js中import之后使用Vue.use(plugin)scoped样式作用：让样式在局部生效，防止冲突写法：<style scoped>
-
生命周期 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 还有三个待更新定义：又名：生命周期回调函数、生命周期函数、生命周期钩子；Vue在关键时刻帮我们调用的一些特殊名称的函数；名称不可更改，函数的具体内容根据实际情况编写；生命周期函数中的this指向的是vm 或 组件实例对象常用的生命周期钩子：mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等；beforeDestroy：清除定时器、解绑自定义事件、取消订阅等；关于销毁Vue实例：销毁后Vue开发者工具看不到任何信息；销毁后自定义事件会失效，但原生DOM事件依然有效；一般不在beforeDestroy操作数据，在这个钩子函数中即使操作了数据，也不会再触发更新流程<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- <h2 :style="{opacity: opacity}">你好，孙笑川</h2> --> <h2 :style="{opacity}">你好，孙笑川</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { opacity: 1 }, //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted mounted() { console.log('mounted'); setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) { this.opacity = 1 } }, 16) } }) //通过外部的定时器实现（不推荐） /* setInterval(() => { vm.opacity -= 0.01 if (vm.opacity <= 0) { vm.opacity = 1 } }, 16) */ </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分析生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前的n值是：{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">销毁vm</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', // template: ` // <div> // <h2>当前的n值是：{{n}}</h2> // <button @click="add">点我n+1</button> // </div> // `, data: { n: 1 }, methods: { add() { console.log('add'); this.n++ }, bye() { console.log('销毁vm'); this.$destroy(); } }, watch: { n() { console.log('n变了') } }, beforeCreate() { //无法通过vm访问到data中的数据，methods中的方法 console.log('beforeCreate') }, created() { //可以通过vm访问到data中的数据，methods中的方法 console.log('created') }, beforeMount() { //页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效 console.log('beforeMount') }, mounted() { //页面呈现的是Vue编译过的DOM结构，所有对DOM的操作均有效（Vue不推荐直接操作DOM） console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') //页面和数据尚未保持同步 //console.log(this.n) //debugger; }, updated() { console.log('updated') //页面和数据保持同步 //console.log(this.n) //debugger; }, beforeDestroy() { console.log('beforeDestroy') //能访问数据，能调用方法，但销毁之前对数据的所有操作都不再会触发更新 this.add() }, destroyed() { console.log('destroyed') } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 :style="{opacity}">你好，孙笑川</h2> <button @click="stop">停止变换</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { opacity: 1 }, methods: { stop() { clearInterval(this.timer) } }, //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted mounted() { console.log('mounted'); this.timer = setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) { this.opacity = 1 } }, 16) }, beforeDestroy() { clearInterval(this.timer) } }) </script> </body> </html>
