随笔分类 - VUE
摘要：使用二级路由 会显示父路由下面的子路由 且父子路由同时显示 因为父子同时显示 路由地址在同一级别/ 路由的显示模式有两种（都是为了减少数据库后台请求次数） #hash模式（#是特殊字符，很多场合不满足，微信支付，分享url作为参数传递时候不行） 地址栏不改变，不会发送请求。#后面后台不获取 hist
阅读全文
摘要：快速构建一个项目（流行的做法：采用前后端分离的方式进行web架构） 完整的前端环境搭建有更高的要求有：预编译模版，合并压缩资源，模拟生产环境，注入依赖 等等一系列 这些vue-cli都可以实现 协助，配合，帮助我们来构筑一个项目 相比人工：高效，安全。 //vue-cli 平台无关 功能齐全 内存占
阅读全文
摘要：指令作用： 给元素的属性赋值 它是一个 vue 指令，用于绑定 html 属性 写法： 正常写法 <div v-bind:原属性名="变量||"常量""></div> // 注意常量要引号内加引号 简写 <div :属性名="变量"></div> ///1 绑定class 支持直接变量 数组 对象（
阅读全文
摘要：有三个指令达到的效果是一样的 {{JS表达式}} 差值表达式 v-text="JS表达式" v-html="JS表达式" //会自动解析tag js表达式： "变量||"常量"" 也可以有运算元和运算符（可选）构成。并产生运算结果的语法结构 ！！！模版语法中不要有逻辑在里面 只显示（例如{{a +
阅读全文
摘要：v-if 本质：vue-if是动态的向DOM树内添加或者删除DOM元素 优点：更加灵活 <li v-for="(item, index) in scene" v-if="item.share" @click="openScene(item, item.pid)"> <span>{{ item.sha
阅读全文
摘要：列表渲染语法 v-forv-for 循环对象 <article v-for="(item, key, index) of info">{{item}} {{key}} {{index}} </article> 修改： info.name = "" 增加 需要从新引用 当不需要循环变更数据的时候可以用
阅读全文
摘要：<head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"> </script> </head> <body> <section class="app"> <fade :showw="show"> <article
阅读全文
摘要：Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数（e l） el为这个元素 @enter=""处理函数收到二个参数（e l， done）done（） 为动画结束 @after-enter=""处理函数收到一个参数（e l
阅读全文
摘要：<script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <style> /*@keyframes bounce-in {*/ /* 0% {*/ /* transform:scale(0);*/ /* }*/
阅读全文
摘要：Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式，然后自动构建一个动画流程 transition标签中 name=“fade”如果不写默认v 1.动画即将执行的时候增加两个css fade-ent
阅读全文
摘要：f vue中的插槽 1.<slot>默认内容</slot> 当副组件不传递信息的时候 显示默认内容 2.<slot></slot> 显示的是插槽中所有的数据 不具名插槽只有一个 具名插槽(可以有多个) 父：<div slot="h"></div> 子： <slot name="h"></slot>
阅读全文
摘要：非父子组件传值 轻量级 视图层框架 复杂组件间传值，引进其他的工具或者设计模式 1.vuex 2.总线机制 //main line 1.在main.js中注册全局的bus Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用：this.bus.$emit('自定义事
阅读全文
摘要：ref 当ref写在一个标签元素中，通过this.$refs.name 获取的是标签对应的dom元素 <section id="app" ref="froggy" @click="handleClick">{{name}}</section><script> var vm = new Vue({ e
阅读全文
