随笔分类 - vue学习
摘要：全局事件总线可以实现任意组件间的通信 Vue 原型对象上包含事件处理的方法 1) $on(eventName, listener): 绑定自定义事件监听 2) $emit(eventName, data): 分发自定义事件 3) $off(eventName): 解绑自定义事件监听 4) $once
阅读全文
摘要：sync是组件通信方式的一种也可以实现父子数据的同步 看案例 父组件 <template> <div> 小明的爸爸现在有{{ money }}元 <h2>不使用sync修改符</h2> <Child :money="money" @update:money="money = $event"></Ch
阅读全文
摘要：v-model是vue中的指令，结合表单元素使用（文本框，表单），主要作用是收集表单中的数据，属于组件通信方式的一种 <template> <div> <input type="text" v-model="msg"> <span>{{msg}}</span> </div> </template>
阅读全文
摘要：事件的注意事项 事件分为： 1、系统事件 ： click、双击、鼠标事件等 2、自定义事件 不管是系统事件还是自定义事件都要注意事件源（事件是给谁绑定的）、事件的类型、事件的回调 1>系统事件 原生DOM绑定的系统事件 <template> <div> <!-- 原生DOM事件 --> <butto
阅读全文
摘要：打包 运行：npm run build，随后会生成一个dist文件夹 项目打包之后，代码都是经过压缩加密的，如果运行报错，输出的错误信息无法准确得知是哪里的代码报错 有了.map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错，但是.map文件通常比较大，如果不需要这个文件可以去掉 说白了
阅读全文
摘要：子组件 <template> <div class="pagination"> <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button> <button v-if="startNumAndEndNu
阅读全文
摘要：打开powershell终端面板 输入命令：vue ui 此时就会弹出一个面板 点击创建 选择好路径和文件夹之后点击在此创建新项目 然后点击下一步 然后下一步 在功能面板中选择项目需要使用到的功能，比如vue-router，vuex等 然后点击下一步 然后点击创建项目，此时就会提示你是否保存预设（想
阅读全文
摘要：由于组件的封装性，此时我们如果想修改某一个ui组件的样式，传统修改css类名的方式可能行不通 比如我们要给某个ui组件添加样式 1 .van-tabs__wrap{ 2 border:2px solid blue; 3 } 这样写的代码是不行的，因为我们此时虽然修改了代码，但是并没有真正的触发到ui
阅读全文
摘要：如何创建vue-cli2？ 第一步输入命令 vue init webpack my-vue 此时我们可以会少安装一些全局的依赖，安装这个依赖即可 webpack配置 webpack是一个基于NodeJS的工具，实现了网页中的模块化开发，说白了，就是浏览器原来不认识require、exports这两个
阅读全文
摘要：当template内部的结构代码在编译的时候发生了什么？ 比如我们下面的代码 1 <template> 2 <div> 3 <h1>123456789</h1> 4 </div> 5 </template> 我们平常写template里面所使用的模板是HTML语法组件的页面，其实在vue中都会被编译
阅读全文
摘要：vue的数据核心是双向数据绑定，其根本机理就是通过object.defineProperty()和发布-订阅模式（观察者模式）进行实现的 object.defineProperty()方法 object.defineProperty()是vue实现数据功能的核心方法。该方法直接在一个对象上定义一个新
阅读全文
摘要：看下面的element-ui表格结构 1 <el-table :data="tableData" border style="width: 100%"> 2 <el-table-column fixed prop="date" label="日期" width="150"> 3 </el-table
阅读全文
摘要：如果我们在手动输入路由的过程中，没有匹配到对应的页面，此时我们应该抛出一个404无页面的状态，而不是空白页面 1 { 2 // *指的是匹配所有没有匹配到的页面 3 path: '*', 4 // 重定向，重定向到404的路由 5 redirect: '/404' 6 } *代表的是任意路由匹配，指
阅读全文
摘要：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中，导航守卫主要分三种，全局的, 单个路由独享的, 或
阅读全文
摘要：路由跳转有两种形式：声明式导航、编程式导航 声明式导航没有这类问题，因为vue-router底层已经处理好了 如果我们重复点击路由跳转的时候会遇到报错的情况 那么，为什么编程式导航进行路由跳转的时候，就有这种警告错误呢 现在vur-router的最新版本是3.5.3 "vue-router": "^
阅读全文
摘要：$router其实就是VueRouer的实例，对象包括了vue-router使用的实例方法，还有实例属性，我们可以理解为$router有一个设置的含义，比如设置当前的跳转，比如设置当前的返回 $route指的是当前跳转到该路由页面的相关路由属性 fullPath：完成解析后的url，包含查询参数和h
阅读全文
摘要：vue-router的跳转主要有两种方式hash和history hash即地址栏URL中的#号，比如http://baidu/#/home这种路由就是hash路由，hash虽然后出现在url中，但是不会被包括在HTTP请求中，对后端没有影响 history利用了HTML5的History Inte
阅读全文
摘要：编程式导航是通过js进行导航驱动，之前声明式是通过点击元素进行跳转 基本使用 1 <template> 2 <div> 3 <!--显示区域--> 4 <router-view></router-view> 5 <div class="box"> 6 <div class="left" @click
阅读全文
摘要：1 const path=require("path") 2 function resolve(dir){ 3 return path.join(__dirname,dir) 4 } 5 module.export={ 6 chainWebpack:(config)=>{ 7 // 第一参数@$代表
阅读全文
摘要：路由懒加载也叫延迟加载 现在我们路由使用情况 1 import vue from "vue" 2 import vueRouter from "vue-router" 3 import Home from "../views/Home.vue" 4 import Sport from "../vie
阅读全文
浙公网安备 33010602011771号