随笔分类 - vue
关于js框架vue的相关内容
摘要：什么是脚手架？ Yeoman是什么？ 实现自定义脚手架 基于Yeoman实现Vue-cli 一、什么是脚手架？ 手脚架从功能上来讲就是创建项目初始文件，这其中包括生成功能模块配置、自动安装依赖、自动生成标准化（结构的）文件，提高项目创建速度降低手动操作可能发生的低级错误。 关于手脚架在周俊鹏的《前端
阅读全文
摘要：注册一个全局指令：实现在document上注册注册全局点击事件 关于自定义指令的相关参数解析 一、注册一个全局指令 示例代码： 1 // 自定义指令: v-document-click（全局点击事件） 2 Vue.directive('document-click', { 3 bind: funct
阅读全文
摘要：配置第三方图标库的相关（博客）教程： https://www.cnblogs.com/linyihai/p/10575668.html https://www.cnblogs.com/ceceliahappycoding/p/10821966.html 制作svg图标字体可以参考下面这些连接的内容：
阅读全文
摘要：browserslist简介与基本应用 如何配置browserslist browserslist配置如何作用于项目 一、browserslist简介与基本应用 1.1browserslist是什么？ browserslist是用来配置项目的目标浏览器和nodejs版本范围，也就是通常说的兼容哪些浏
阅读全文
摘要：非父子组件传值 vuex 一、非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码： 1 <template> 2 <div> 3 <!-- 学员展示 --> 4 <add-student @add="add"></add-student> <!--监听子组件自定义事件add，触发
阅读全文
摘要：1.导航被触发 2.在失活的组件里调用离开守卫：beforeRouteLeave —— 组件内守卫（离开组件）。 3.调用全局的beforeEach守卫 —— 全局守卫（进入组件）。 4.在重用组件里调用deforeRouteUpdatar守卫（2.2+）—— 组件内守卫（组件复用时调用/foo/:
阅读全文
摘要：vue路由安装与基本使用 vue嵌套路由 vue动态路由（路由组件传参） vue路由重定向和一些其他的路由相关 官方手册：https://router.vuejs.org/zh/ 一、vue路由安装与基本使用 在项目根文件夹下执行以下命令安装vue-ruoter: 执行命令后会有以下提示： 这个提示
阅读全文
摘要：如何设置？ 选择或创建 配置代码 如何使用？ 一、如何设置？ 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configure User Snippets或者之前的记录被清除的话，这个选项不会出现在第一行，这时候你可以在搜索栏输入
阅读全文
摘要：vue-cli安装、创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一、vue-cli简介、安装、创建项目 Vue-cli是基于Vue.js进行快速开发的完整系统，提供： 通过@vue/cli搭建交互式的项目脚手架。 通过@vue/cli + @vu
阅读全文
摘要：vue实例渲染的底层实现 vue实例生命周期 vue实例渲染的生命周期与钩子函数详解 一、vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法：第一种在实例化vue时以el属性实现，第二种是通过vue.$mount()方法实现挂载。不管是哪种挂载都不影响vue实例化组件的执行流程和
阅读全文
摘要：模板：（template）模板声明了数据和最终展现给用户的DOM之间的映射关系。 初始数据：（data）一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。 接收外部参数：（props）组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式声明为双向绑定。
阅读全文
摘要：基本应用 修饰符 为什么要在HTML中使用事件监听 Demo 一、基本应用 1.通过v-on指令绑定事件，例如： <button v-on:click="">提交</button> ； 在vue官方教程上第一个示例是直接在表达式中写入一个可执行计算代码： 2.通过methods实现事件函数绑定，例如
阅读全文
摘要：v-for渲染列表 维护状态 数组变异方法与替换数组 $set、$remove 对象属性实现列表渲染 一、v-for渲染列表 语法：v-for="item in items" 先来看示例： 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 list-style:
阅读全文
摘要：v-if v-show v-else 一、v-if:生成或者移出一个元素 v-if表达式采用boolean值切换元素生成与删除，由于节点生成和删除会有较高的性能消耗，如果需要一次生成和删除多个元素时，可以采用<template>元素作为包装元素，在包装元素上使用v-if指令，最终的渲染结果不会包含包
阅读全文
摘要：对象语法 数组语法 一、对象语法 1.1对象语法绑定HTML Class 语法：v-bind:class="{'className1':boolean1,'className2':boolean2}" 1 <style> 2 div{ 3 width: 100px; 4 height: 100px;
阅读全文
摘要：methods watch computed 关于方法、监听器、计算属性的使用和适应场景 一、methods-方法 在数据渲染是需要基于多个数据时第一种方法，可以采用methods属性中的方法计算返回值来实现，先来看示例： 1 <div id="example">{{describe()}}</di
阅读全文
摘要：vuejs使用及HTML的模板语法，可以实现声明式将DOM绑定至底层VUE实例的数据。通过模板语法将数据渲染进DOM的系统，结合响应系统，在应用状态改变时，Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上。 VUE的模板语法的内容包括：插值、指令。 插值包括：文本插值、原始HTML插值、特
阅读全文
