![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
lql_h
这个作者很懒,什么都没留下…
展开
-
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 · 92 阅读 · 0 评论 -
VUE非父子组件之间的通信
概述- #### 创建一个空实例(bus中央事件总线也可以叫中间组件)- #### 利用$emit $on的触发和监听事件实现非父子组件的通信Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据this.$bus.$on('自定...原创 2019-10-12 13:53:25 · 98 阅读 · 0 评论 -
Vue路由守卫
概述```jsconst router = new VueRouter({ ... }//前置的钩子函数 最后要执行next()才会跳转router.beforeEach((to, from, next) => { // ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => { // ...原创 2019-10-12 09:42:40 · 88 阅读 · 0 评论 -
Vue嵌套路由
概述代码思想1:router-view的细分router-view第一层中,包含一个router-view2:每一个坑挖好了,要对应单独的组件路由配置 - ``` routes: [ { path:'/nav',...原创 2019-10-12 09:37:26 · 104 阅读 · 0 评论 -
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 · 319 阅读 · 0 评论 -
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 · 182 阅读 · 0 评论 -
Vue路由使用
概述路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件1:创建路由对象 `var router = new VueRouter();2:配置路由规则 `router.addRoutes([路由对象]);路由对象`{path:'锚点值',component:要(填坑)显示的组件}`3:将配置好的路由对象交给Vue - ##### 在...原创 2019-10-12 06:12:03 · 159 阅读 · 1 评论 -
Vue路由跳转原理(哈希模式)
概述哈希模式(利用`hashchange` 事件监听 url的hash 的改变)```window.addEventListener('hashchange', function(e) { console.log(e)})```核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面数据,不做跳转。跟传统开发模式url改变后 立刻发起请求,响应整个页面,渲染整个页面...原创 2019-10-12 05:58:07 · 3046 阅读 · 0 评论 -
VUE父子组件的通信
概述- 父传子 - 父用子的时候通过属性传递 - 子要声明props:['属性名'] 来接收 - 收到就是自己的了,随便你用 - 在template中 直接用 - 在js中 this.属性名 用- 子传父 - 子组件里通过$emit('自定义事件名',变量1,变量2)触发 - 父组件@自定义事件名=‘事件名’监听...原创 2019-10-11 16:59:37 · 123 阅读 · 0 评论 -
VUE的slot插槽和ref、$parent
概述- #### slot插槽 - #### slot就是子组件里给DOM留下的坑位 - #### <子组件>DOM</子组件> - #### slot是动态的DOM- #### ref获取子组件实例 - #### 识别:在子组件或元素上使用属性ref="xxxx" - #### 获取:this.$r...原创 2019-10-11 16:30:43 · 1761 阅读 · 0 评论 -
VUE组件化开发
概述创建组件的两种方式 var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明 Vue.component('组件名',组件对象);//全局注册 等于注册加声明了组件类型 - 通用组件(例如表单、弹窗、布局类等) - 业务组件(抽奖、机器分类)...原创 2019-10-11 15:28:28 · 148 阅读 · 0 评论 -
VUE数据监听watch计算属性computed
思考业务场景:1. 类似淘宝,当我输入某个人名字时,我想触发某个效果2. 利用vue做一个简单的计算器概述watch监听单个,computed监听多个当watch监听的是复杂数据类型(数组,对象)的时候需要做深度监听(写法如下)watch:{ msg:{ … },...原创 2019-10-11 15:16:10 · 625 阅读 · 0 评论 -
VUE登录页面的开发
Chrome手机版调试组件使用官方网站https://didi.github.io/cube-ui/#/zh-CN/docs/introductionaxios的安装##官方文档:http://www.axios-js.com/docs/index.htmlnpm install axiosApp.vue <...原创 2019-09-25 13:48:42 · 383 阅读 · 0 评论 -
VUE首页与分类页的实现
router.js{ path: '/botnav', name: 'botnav', component: () => import('./views/Botnav.vue'), children:[ { path: 'index', name: 'index', co...原创 2019-09-26 15:01:18 · 2164 阅读 · 1 评论 -
VUE购物车与我的页面实现
store.jslet store=new Vuex.Store({ state: { token:'', cartarry:JSON.parse(localStorage.getItem('cartarry')) || [],//存储购物车商品的数组 }, mutations: { //设置vuex的token settoken(...原创 2019-09-27 11:04:48 · 2231 阅读 · 1 评论 -
VUE打包APP
Vue-cli3打包后出现空白页面的解决## vue.config.jsmodule.exports = { publicPath: './', assetsDir: 'static',outputDir: 'dist',……##router.js// mode: 'history',Hbuilder打包APP...原创 2019-09-29 14:33:25 · 147 阅读 · 0 评论 -
VUE的引包留坑实例化、插值表达式{{}}
代码<!DOCTYPE html><html><head> <title></title></head><body> <!-- 留坑 --> <div id="app"></div> <!-- 引包 --> <script type="...原创 2019-10-11 13:51:45 · 344 阅读 · 1 评论 -
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 · 310 阅读 · 0 评论 -
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 · 199 阅读 · 0 评论 -
VUE过滤器
概述- 过滤器就是可以对我们的数据进行添油加醋然后再显示- 过滤器有全局过滤器和组件内的过滤器 - 全局过滤器Vue.filter('过滤器名',过滤方式fn );,全局过滤器需要一个一个的定义 - 组件内的过滤器 filters:{ '过滤器名',过滤方式fn },可以定义多个 - 使用方式:{{ msg | 过滤器名}}- 最终都是在过滤方式fn里面return...原创 2019-10-11 14:52:34 · 80 阅读 · 0 评论 -
Vue环境搭建
node环境node是傻瓜式安装的,直接去官网下载安装不断下一步命令行输入node -v查询版本号,有版本号即安装成功C:\Users\Administrator\lql3.x>node -vv8.9.3node自带npm包管理工具(安装好node也可以输入npm -v查看版本号)C:\Users\Administrator\lql3.x>npm -v5...原创 2019-09-24 11:33:51 · 248 阅读 · 0 评论