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 · 111 阅读 · 0 评论 -
VUE非父子组件之间的通信
概述- #### 创建一个空实例（bus中央事件总线也可以叫中间组件）- #### 利用$emit $on的触发和监听事件实现非父子组件的通信Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据this.$bus.$on('自定...原创 2019-10-12 13:53:25 · 121 阅读 · 0 评论 -
Vue路由守卫
概述```jsconst router = new VueRouter({ ... }//前置的钩子函数 最后要执行next（）才会跳转router.beforeEach((to, from, next) => { // ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => { // ...原创 2019-10-12 09:42:40 · 115 阅读 · 0 评论 -
Vue嵌套路由
概述代码思想1:router-view的细分router-view第一层中，包含一个router-view2:每一个坑挖好了，要对应单独的组件路由配置 - ``` routes: [ { path:'/nav',...原创 2019-10-12 09:37:26 · 126 阅读 · 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 · 367 阅读 · 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 · 213 阅读 · 0 评论 -
Vue路由使用
概述路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件1:创建路由对象 `var router = new VueRouter();2:配置路由规则 `router.addRoutes([路由对象]);路由对象`{path:'锚点值',component:要(填坑)显示的组件}`3:将配置好的路由对象交给Vue - ##### 在...原创 2019-10-12 06:12:03 · 209 阅读 · 1 评论 -
Vue路由跳转原理（哈希模式）
概述哈希模式（利用`hashchange` 事件监听 url的hash 的改变）```window.addEventListener('hashchange', function(e) { console.log(e)})```核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...原创 2019-10-12 05:58:07 · 3120 阅读 · 0 评论 -
VUE父子组件的通信
概述- 父传子 - 父用子的时候通过属性传递 - 子要声明props:['属性名'] 来接收 - 收到就是自己的了，随便你用 - 在template中 直接用 - 在js中 this.属性名 用- 子传父 - 子组件里通过$emit('自定义事件名',变量1，变量2)触发 - 父组件@自定义事件名=‘事件名’监听...原创 2019-10-11 16:59:37 · 142 阅读 · 0 评论 -
VUE的slot插槽和ref、$parent
概述- #### slot插槽 - #### slot就是子组件里给DOM留下的坑位 - #### <子组件>DOM</子组件> - #### slot是动态的DOM- #### ref获取子组件实例 - #### 识别：在子组件或元素上使用属性ref="xxxx" - #### 获取：this.$r...原创 2019-10-11 16:30:43 · 1917 阅读 · 0 评论 -
VUE组件化开发
概述创建组件的两种方式 var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明 Vue.component('组件名',组件对象);//全局注册 等于注册加声明了组件类型 - 通用组件（例如表单、弹窗、布局类等) - 业务组件（抽奖、机器分类）...原创 2019-10-11 15:28:28 · 177 阅读 · 0 评论 -
VUE数据监听watch计算属性computed
思考业务场景：1. 类似淘宝，当我输入某个人名字时，我想触发某个效果2. 利用vue做一个简单的计算器概述watch监听单个，computed监听多个当watch监听的是复杂数据类型(数组，对象)的时候需要做深度监听（写法如下）watch:{ msg:{ … },...原创 2019-10-11 15:16:10 · 659 阅读 · 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 · 415 阅读 · 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 · 2235 阅读 · 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 · 2295 阅读 · 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 · 169 阅读 · 0 评论 -
VUE的引包留坑实例化、插值表达式{{}}
代码<!DOCTYPE html><html><head> <title></title></head><body> <!-- 留坑 --> <div id="app"></div> <!-- 引包 --> <script type="...原创 2019-10-11 13:51:45 · 399 阅读 · 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 · 349 阅读 · 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 · 224 阅读 · 0 评论 -
VUE过滤器
概述- 过滤器就是可以对我们的数据进行添油加醋然后再显示- 过滤器有全局过滤器和组件内的过滤器 - 全局过滤器Vue.filter('过滤器名',过滤方式fn );，全局过滤器需要一个一个的定义 - 组件内的过滤器 filters:{ '过滤器名',过滤方式fn }，可以定义多个 - 使用方式：{{ msg | 过滤器名}}- 最终都是在过滤方式fn里面return...原创 2019-10-11 14:52:34 · 104 阅读 · 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 · 280 阅读 · 0 评论