随笔分类 - Vue
摘要：一、初始化项目并安装Vuex依赖 1、初始化一个项目vuex-demo 运行vue init webpack-simple vuex-demo 运行cd vuex-demo 运行cnpm install 2、安装vuex 运行cnpm install vuex -S （安装vuex生产依赖） 3、新
阅读全文
摘要：一、Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了
阅读全文
摘要：一、简介 1、全局组件（插件） 全局插件（又叫全局组件），是指可以在main.js中使用Vue.use()进行引入的插件，在其他组件中都可以使用。如：vue-router，在main.js中的写法如下： import VueRouter from 'vue-router' //引入全局组件（插件）
阅读全文
摘要：一、路由与动画结合 路由可以与动画结合使用。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由与动画结合</title> 6 <style> 7 /*设置链接点击后的颜色
阅读全文
摘要：一、路由实例的方法 1、router.push() 添加路由，功能与<router-link>相同 2、router.push() 替换路由，不会产生历史记录 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="
阅读全文
摘要：一、路由嵌套参数的传递 传参数的两种方式： 1.使用查询字符串（例如：login?name=tom&psw=123），通过{{$router.query}}获取参数 2.rest风格url（例如：login/tom/123），通过{{$router.params}}获取参数 二、代码实现 1 <!D
阅读全文
摘要：一、简介 路由嵌套是在路由配置的时候，使用children配置子路由。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由嵌套</title> 6 <style> 7 /*
阅读全文
摘要：一、vue-router简介 使用vue.js开发SPA（Single Page Application，单页面应用）。根据不同url地址，显示不同的内容，但显示在同一页面中，称为单页面应用。（很多移动端产品使用SPA） 二、vue-router的安装 1、运行cnpm install vue-ro
阅读全文
摘要：一、slot内容分发简介 slot的本意是位置、槽。slot的作用：获取组件中原有的内容，类似于angular中的transclude指令。 二、代码实现 1、slot简单用法（直接使用<slot></slot>） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he
阅读全文
摘要：一、简介 非父子组件间的通信，我们可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监视事件。 二、实现方法 第一步：定义空的Vue实例，实现事件的触发和侦听 var Event = new Vue(); 第二步：触发事件 Event.$emit('事件名',数据) 第三步：侦
阅读全文
摘要：一、单向数据流简介 props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态（这会让应用的数据流难以理解）。而且不允许子组件直接修改父组件的数据（会报错）。 1、子组件修改数据，不影响到父组件。 解决方式：如果子组件想把它作为局部数据来使
阅读全文
摘要：一、父子组件 在一个组件内部定义另一个组件，称为父子组件。 子组件只能在父组件内部使用。 默认情况下，子组件不能访问父组件的数据，每个组件实例作用域都是独立的。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"
阅读全文
摘要：一、内置组件component 1、component简介 有的时候，在不同组件之间进行动态切换是非常有用的。这时候就需要使用动态组件。 通过 Vue 的 <component> 元素加一个特殊的 is 属性来实现，写法： <component :is=''> </component> 多个组件使用
阅读全文
摘要：一、引用模板 引用模板就是把组件的内容放到<template></template>中并引用。一般当组件的内容比较多的时候使用引用模板的方式。 二、代码实例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">
阅读全文
摘要：一、组件的分类 组件可以分类为：全局组件和局部组件。 1、全局组件 全局组件可以在所有的vue实例中使用。使用Vue.component定义全局组件。 2、局部组件 局部组件只能在当前vue实例中使用。使用Vue中的components选项定义局部组件。 1 <!DOCTYPE html> 2 <h
阅读全文
摘要：一、组件component 1、什么是组件 组件是vue。js最强大的功能之一，组件可以扩展html元素，封装可重用的代码。组件就是自定义的元素，组件也是自定义的对象。 2、如何自定义组件？ 方式1：使用组件构造器定义组件（太麻烦，不推荐使用） 先使用Vue.extend创造组件构造器，由组件构造器
阅读全文
摘要：一、多元素动画 需要使用transition group组件。 <transition group> </transition group> 二、实例 动画显示搜索结果。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U
阅读全文
摘要：一、安装animate.css 1、运行cpm install animate.css --save 2、找到下载的animate.css文件夹 3、拷贝animate.css源文件 二、引入animate.css 1、在项目中新建文件夹css存放所有css源文件，将animate.css源文件存放
阅读全文
摘要：一、过渡的简介 Vue在插入、更新或移除DOM的时候，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation。 二、基本用法 使用transition组件，将要执行动画的元素包含在该组件内。 <transition> </transition> 说明：t
阅读全文
摘要：一、需求 实现方块在屏幕上任意拖拽的功能。 二、代码实现 自定义指令drag，实现拖动功能。div绑定自定义指令v-drag，实现div的拖动功能。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <t
阅读全文
浙公网安备 33010602011771号