- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vuex
状态管理模式包含以下三个部分：state，驱动应用的数据源view，以声明方式将 state 映射到视图actions，响应在 view 上的用户输入导致的状态变化store:Vuex 核心 store 是一个容器，包含应用中的状态 (state)Vuex 的状态是响应式的，组件从 store 中读取状态时，状态(state)发生变化时相应的组件会更新不能直接改变 state！...
2019-01-30 23:05:11
238
原创 14-自定义事件 & .native原生事件绑定到组件 & .sync修饰符
事件名: 事件名不存在自动大小写转换,触发事件名需要完全匹配监听事件的名称this.$emit('myEvent')/* 监听名字的 kebab-case 版本不会任何效果 */<my-component v-on:my-event="doSomething"></my-component>自定义组件的 v-model:默认利用 value 的 prop 和...
2019-01-26 01:28:21
329
1
原创 12-父子组件数据传递 & 深入Prop & 非 Prop特性
Prop:向子组件传递数据，在组件上注册的自定义特性当值传递给 prop 特性的时候，Prop就变成组件实例的属性Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>'});/* 在父组件传递 props */<div> <...
2019-01-25 23:14:14
312
原创 11-动态组件、is特性、keep-alive、异步组件
动态组件:在不同组件之间进行动态切换,通过<component’> 元素加一个特殊的 is 特性实现动态组件中可以包括已注册组件名,或组件的选项对象 ( 此例指父级中 data数据 ) <div id="root"> <component :is="type"></component> /* component 中加上 is ...
2019-01-25 22:49:33
264
原创 10-slot插槽 & 作用域插槽
插槽内容: 将 <slot’> 元素作为承载分发内容的出口,可以合成组件/* <slot> 元素将会被替换为 "Your Profile" */<navigation-link url="/profile"> Your Profile</navigation-link>Vue.component('navigation-link',{ te...
2019-01-25 22:21:46
243
原创 9-组件 & 深入组件
组件: 有全局注册和局部注册两种注册类型全局注册:/* 定义一个名为 button-counter 的组件 */Vue.component('but-con', { template: `<button>{{ count }}</button>`, data() { return { count: 0 } }})组件是可复用的 Vue 实例且带有一个...
2019-01-25 22:15:07
114
原创 8-表单 & 基础用法 & 值绑定 & 修饰符
v-model指令可以在表单<input’>,<textarea’>,<select’>上创建双向数据绑定监听输入事件更新数据并且会忽略表单的value、checked、selected的初始值而总是将 Vue 实例的数据作为数据来源文本<input v-model="message" placeholder="edit me"><
2019-01-25 22:05:25
127
原创 7-事件 & 监听 & 修饰符
监听事件: v-on监听 DOM 事件在触发时运行JS代码<div id="example-1"> /* v-on 监听事件 */ <button v-on:click="counter += 1">Add 1</button> <p>{{ counter }}</p></div>va
2019-01-25 21:02:36
404
原创 11-过度动效
过渡动效<router-view’> 是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果 <transition> <router-view></router-view> </transition>单个路由的过渡: 可以在各路由组件内使用 并设置不同的 name const Foo = { t...
2019-01-20 19:49:10
140
原创 10-路由元信息
路由元信息: 定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', com...
2019-01-20 19:47:52
198
原创 8-守卫导航 or 路由钩子函数
导航守卫:表示路由正在发生改变( 路由导航分为：全局的, 单个路由独享的, 或者组件级的 )通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内路由钩子每个守卫方法接收三个参数： to: 要进入的目标路由对象 from: 要离开的路由 next(): 调用该方法 resolve 。执行效果依赖 next 方法的调用参数。 如...
2019-01-20 19:46:05
193
原创 7-HTML5 History 模式
HTML5 History 模式history 模式: 利用 history.pushState API 来完成 URL 跳转而无须重新加载页面( 去除 # ) const router = new VueRouter({ mode: 'history', routes: [...] })mode type: string ( 默认: "hash" (浏览器环境)...
2019-01-20 19:41:10
203
原创 6-路由组件传参 or props 解耦
路由组件传参使用 $route 会组件与其对应路由形成高度耦合，使组件只能在特定的 URL 上使用，不灵活路由组件设置 props保持 props 函数为无状态的，因为它只在路由发生变化时起作用如果需要状态来定义 props，需使用包装组件，这样 Vue 才可以对状态变化做出反应使用 props 将组件和路由解耦 const User = { props: ['id'], ...
2019-01-20 19:39:44
1440
1
原创 5-重定向和别名
重定向: 通过 routes 配置来完成 const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })重定向的目标可以是命名路由 const router = new VueRouter({ routes: [ { path: '/a', re...
2019-01-20 19:37:03
218
原创 4-命名视图
命名视图同时 (同级) 展示多个视图，而不是嵌套展示，如果 router-view 没有设置名字，那么默认为 default <'router-view class="view one"></router-view'> <'router-view class="view two" name="a"></router-view'>
2019-01-20 19:35:36
549
原创 3-编程式导航 & 命名路由
编程式的导航借助 router 的实例方法，通过编写代码来实现router.push() router.push( location, onComplete?, onAbort? ) 导航到不同的 URL，向 history 栈添加新记录，点击后退按钮，回到之前 URL 点击 <router-link :to="..."> 等同于调用 router.push(...)...
2019-01-20 19:31:44
205
原创 2-嵌套路由
嵌套路由URL 中各段动态路径也按某种结构对应嵌套的各层组件被渲染组件同样可以包含自己的嵌套 const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router...
2019-01-20 19:24:03
165
原创 1-动态路由
动态路由匹配动态路径参数使用冒号 : 标记把某种模式匹配到的所有路由，全都映射到同个组件可以在路由 path 选项中使用const User = { template: '<div>User</div>' }const router = new VueRouter({ routes: [{ path: '/user/:id', /* 动态路径参数 以冒...
2019-01-20 18:55:22
283
原创 6-列表渲染 & Vue.set方法
v-for: 根据数组的选项列表进行渲染,使用 item in items 语法,items 是源数组 item 是元素迭代的别名<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>var example1 = new Vue({ el:...
2019-01-12 22:35:19
376
原创 5-条件渲染 & v-if & v-show & v-if vs v-show
v-if: 根据表达式的值的真假条件渲染元素<h1 v-if="ok">Yes</h1>在 <template ‘>’ 元素上使用 v-if 渲染分组,把当做包裹元素使用 v-if,渲染不包含 <template ‘>’<template v-if="ok"> <h1>Title&l
2019-01-12 22:21:05
184
原创 4-Class与Style绑定
Class 与 Style 绑定1、操作元素 class 列表和内联样式,因为都是属性,可以用 v-bind 处理通过表达式计算出字符串结果2、v-bind 用于 class 和 style 时, 表达式结果的类型除了字符串之外，还可以是对象或数组绑定 HTML Class对象语法: 传给 v-bind:class 一个对象，动态地切换 class/* active 这个 class 存...
2019-01-12 22:07:46
165
原创 3-计算属性与侦听器
计算属性在模板中放入太多的逻辑会让模板过重且难以维护,对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> {{ message.split('').reverse().join('') }} </div>基础例子 <div id="example"> <p> {{ reversedMessage }...
2019-01-12 22:01:56
132
原创 2-模板语法 or 插值 & 指令 & 缩写
插值文本：数据绑定最常见的形式就是使用双大括号 ( {{ }} ) 的文本插值<span>{{ msg }}</span> /* 绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新 */通过使用 v-once 指令,能执行一次性地插值,当数据改变时,插值处的内容不会更新但会影响到该节点上的其它数据绑定<span v-once>这个将不会改变...
2019-01-12 21:57:17
316
原创 1-vue实例 & 数据与方法 & 生命周期钩子函数
Vue 实例创建一个 Vue 实例var vm = new Vue({ /* 选项 */ });当创建一个 Vue 实例时，可以传入一个选项对象var vm = new Vue({ el: '#app', data: {}, methods: {}, computed: {}, watch:{}, components: {} ...});所有的 Vue...
2019-01-12 21:47:55
130
原创 React-refs-5
1、ref 即 reference , 组件被调用时会新建一个该组件的实例, 而 refs 就会指向这个实例ref 使用场景1、处理焦点、文本选择或媒体控制2、触发强制动画3、继承第三方 DOM 库2、创建 ref : React.createRef()class MyApp extends Component { constructor( props ){ super...
2018-12-07 20:04:38
156
原创 React-prop & state & this.setState()-4
React组件的数据分两种, props 和 state 。并且【数据是自顶向下单向流动】的,即父组件到子组件。 无论 props 和 state 的改变,都有可能引发组件的重新渲染。 把组件看成一个函数, 那么它接受了 props 作为参数, 内部由 state 作为函数的内部参数,返回一个 Virtual DOM。(也就是说, prop 是组件的对外接口, state 是组件的内部状态,对外用...
2018-12-06 19:44:58
275
原创 14-ES6-Promise
1、 Promise 对象所谓 Promise , 就是一个容器, 里面保存着某个未来事件才会结束的事情( 通常是一个异步操作 )的结果。2、 Promise 对象有以下两个特点:对象的状态不受外界影响。 Promise 有 3 种状态。只有异步操作才能决定当前是哪一种状态,任何时候其他操作都无法改变这个状态。· Pending( 进行中 )· Fulfilled( 已成功 )...
2018-12-05 10:45:25
125
原创 12-ES6-Class类
1、class的基本语法· constructor() 是构造方法· this 代表实例对象· 定义 “类” 的方法时，前面不需要加上 function 这个保留字,直接定义函数即可。· 方法之间不需要用逗号分隔, 加了会报错 class Point { constructor( x, y ){ this.x = x; this.y = y; ...
2018-12-03 01:42:59
136
原创 11-ES6-Proxy
1、Proxy–在目标对象前假设一个"拦截"层，外界对该对象的访问都必须通过这层拦截，提供一种机制可以对外界的访问进行过滤和改写。 Proxy接收三个参数: 参数一: { target } 代表的目标对象； 参数二: { handle } 代表配置对象，定制拦截行为 参数三: receiver let obj = new Proxy( {}, { // 拦截代理所有...
2018-12-02 00:52:51
483
原创 7-ES6-函数的扩展
1、函数参数的默认值 function log( x, y = 'hello' ){ console.log( x, y ); }; log( 'hi' ); // hi hellp log( 'hi', 'world' ); // hi world log( 'hi', '' ); // hi2、函数参数变量是默认声明的，不...
2018-11-29 16:16:10
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人