- 博客(16)
- 收藏
- 关注
RSS订阅原创 VUE周期
官网https://cn.vuejs.org/v2/guide/instance.html概述created 和 beforeCreate - #### A 可以操作数据 B 数据没有初始化mounted 和 beforeMount - #### A 可以操作DOM B 还未生成DOMupdated 和 beforeUpd...
2019-10-12 15:43:08
97
原创 VUE非父子组件之间的通信
概述- #### 创建一个空实例（bus中央事件总线也可以叫中间组件）- #### 利用$emit $on的触发和监听事件实现非父子组件的通信Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据this.$bus.$on('自定...
2019-10-12 13:53:25
103
原创 Vue路由守卫
概述```jsconst router = new VueRouter({ ... }//前置的钩子函数 最后要执行next（）才会跳转router.beforeEach((to, from, next) => { // ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => { // ...
2019-10-12 09:42:40
95
原创 Vue嵌套路由
概述代码思想1:router-view的细分router-view第一层中，包含一个router-view2:每一个坑挖好了，要对应单独的组件路由配置 - ``` routes: [ { path:'/nav',...
2019-10-12 09:37:26
109
原创 Vue路由的传参与取参
概述1. 查询参数配置（传参） :to="{name:'login',query:{id:loginid}}"获取（取参） this.$route.query.id2.路由参数配置（传参）:to="{name:'register',params:{id:registerid} }"配置路由的规则 { name:'detail',path:'/det...
2019-10-12 07:02:47
334
原创 Vue路由的跳转
概述路由的跳转方式有：1.通过标签：`<router-link to='/login'></router-link>`2.通过js控制跳转`this.$router.push({path:'/login'})`区别：this.$router.push() 跳转到指定的url，会向history插入新记录this.$router.replace() ...
2019-10-12 06:29:53
189
原创 Vue路由使用
概述路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件1:创建路由对象 `var router = new VueRouter();2:配置路由规则 `router.addRoutes([路由对象]);路由对象`{path:'锚点值',component:要(填坑)显示的组件}`3:将配置好的路由对象交给Vue - ##### 在...
2019-10-12 06:12:03
180
1
原创 Vue路由跳转原理（哈希模式）
概述哈希模式（利用`hashchange` 事件监听 url的hash 的改变）```window.addEventListener('hashchange', function(e) { console.log(e)})```核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...
2019-10-12 05:58:07
3063
原创 VUE父子组件的通信
概述- 父传子 - 父用子的时候通过属性传递 - 子要声明props:['属性名'] 来接收 - 收到就是自己的了，随便你用 - 在template中 直接用 - 在js中 this.属性名 用- 子传父 - 子组件里通过$emit('自定义事件名',变量1，变量2)触发 - 父组件@自定义事件名=‘事件名’监听...
2019-10-11 16:59:37
125
原创 VUE的slot插槽和ref、$parent
概述- #### slot插槽 - #### slot就是子组件里给DOM留下的坑位 - #### <子组件>DOM</子组件> - #### slot是动态的DOM- #### ref获取子组件实例 - #### 识别：在子组件或元素上使用属性ref="xxxx" - #### 获取：this.$r...
2019-10-11 16:30:43
1783
原创 VUE组件化开发
概述创建组件的两种方式 var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明 Vue.component('组件名',组件对象);//全局注册 等于注册加声明了组件类型 - 通用组件（例如表单、弹窗、布局类等) - 业务组件（抽奖、机器分类）...
2019-10-11 15:28:28
158
原创 VUE数据监听watch计算属性computed
思考业务场景：1. 类似淘宝，当我输入某个人名字时，我想触发某个效果2. 利用vue做一个简单的计算器概述watch监听单个，computed监听多个当watch监听的是复杂数据类型(数组，对象)的时候需要做深度监听（写法如下）watch:{ msg:{ … },...
2019-10-11 15:16:10
633
原创 VUE过滤器
概述- 过滤器就是可以对我们的数据进行添油加醋然后再显示- 过滤器有全局过滤器和组件内的过滤器 - 全局过滤器Vue.filter('过滤器名',过滤方式fn );，全局过滤器需要一个一个的定义 - 组件内的过滤器 filters:{ '过滤器名',过滤方式fn }，可以定义多个 - 使用方式：{{ msg | 过滤器名}}- 最终都是在过滤方式fn里面return...
2019-10-11 14:52:34
81
原创 VUE单双向数据流及事件绑定
概述#vue单向数据流绑定属性值 v-bind: (属性)，简写:(属性)例子：`<input v-bind:value="name" v-bind:class="name">`- 单向数据绑定 内存改变影响页面改变- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染vue双向数据流 v-model ，只作用于有value属性的元...
2019-10-11 14:34:41
204
原创 VUE常用指令v-xxx
概述在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。 譬如在HTML页面中这样使用`<div v-xxx=''></div>`在vue中v-xxx就是vue的指令指令就是以数据去驱动DOM行为的,简化DOM操作常用指令- v-text 不可解析html标签- v-html 可解析html标签- v-if 做元...
2019-10-11 14:07:22
321
原创 VUE的引包留坑实例化、插值表达式{{}}
代码<!DOCTYPE html><html><head> <title></title></head><body> <!-- 留坑 --> <div id="app"></div> <!-- 引包 --> <script type="...
2019-10-11 13:51:45
364
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人