Vue.js
文章平均质量分 69
littlebirdflying
这个作者很懒,什么都没留下…
展开
-
Vue中的组件通信-初步了解
1. 父子组件1.1 父组件传数据给子组件通过props 1.2 子组件通知父组件通过$emit发布事件,父组件通过v-on(@)监听事件,然后做出更改。 2. 爷孙组件爷孙组件无法直接通信,可转换成父子组件进行通信,利用props和$emit进行连接。3. 兄弟组件可以通过eventHub来实现通信. 结合emit和emit和emit和on进行...原创 2018-06-11 11:15:54 · 139 阅读 · 0 评论 -
Vue-router之配置
modehash / histoty配置路由 history 模式作为有服务端渲染的应用,不希望有 #,上述是 hash 模式,# 更多是用来做定位的,同时它不会被搜索引擎解析,导致网站 SEO 效果不好。在 router options 中使用 mode: ‘history’export default () => { return new Router({ ...原创 2018-09-09 21:00:10 · 6720 阅读 · 0 评论 -
Vue核心知识-Vue的生命周期方法
有哪些生命周期方法把所有生命周期打印一遍import Vue from 'vue'const app = new Vue({ // el: '#root', template: '<div>{{text}}</div>', data: { text: 0 }, beforeCreate () { console.log(t...原创 2018-09-06 14:38:44 · 494 阅读 · 4 评论 -
Vue核心知识-Vue的数据绑定
模板绑定{{}} 中可以进行简单的一元、二元运算,但不能写语句import Vue from 'vue'new Vue({ el: '#root', template: ` <div>V {{isActive ? 'active' V: 'not active'}} {{arr.join(' ')}} </div&g...原创 2018-09-06 16:00:32 · 148 阅读 · 0 评论 -
Vue核心知识-computed和watch的使用场景和方法
computed不使用 computed通过简单的字符串拼接import Vue from 'vue'new Vue({ el: '#root', template: ` <div> <span>Name: {{firstName + ' ' + lastName}}</span> </div&g...原创 2018-09-06 21:39:18 · 1934 阅读 · 0 评论 -
Vue-router之路由参数传递
params// client/config/routes.jsexport default [ { path: '/app/:id', }]// client/app.vue<template> <div id="app"> <router-link to="/app/123">app</router-l...原创 2018-09-10 09:57:38 · 305 阅读 · 0 评论 -
Vue核心知识-Vue的原生指令
v-text标签中显示的内容。与双大括号写法类似,区别是没有双大括号灵活,如<div v-text="'Text:' + text"></div>,双大括号<div>Text: {{text}}</div>import Vue from 'vue'new Vue({ el: '#root', template: ` ...原创 2018-09-07 09:30:15 · 347 阅读 · 0 评论 -
Vue核心知识-Vue的组件之组件的定义
最简单的声明组件import Vue from 'vue'new Vue({ el: '#root', template: '<div>123</div>'})全局注册组件官方推荐,定义组件名,大写开头以及驼峰式命名,在模板中使用时,使用小写连接符的方式。const component = { template: '<di...原创 2018-09-07 14:19:22 · 664 阅读 · 0 评论 -
Vuex之模块
module 中的 state// store.jsexport default () => { return new Vuex.Store({ modules: { a: { // a 模块 state: { text: 1 } }, b: { // b 模块 st...原创 2018-09-13 09:10:46 · 222 阅读 · 0 评论 -
Vuex之热更新
vuex 热更新// store.jsimport Vuex from 'vuex'import defaultState from './state/state'import mutations from './mutations/mutations'import getters from './getters/getters'import actions from './a...原创 2018-09-13 09:16:51 · 604 阅读 · 0 评论 -
Vue-router之导航守卫
导航守卫全局导航守卫全局钩子// client/index.jsrouter.beforeEach((to, from, next) => { // 跳转前 console.log('before each invoked') next() // next 必须执行,才能跳转})router.beforeResolve((to, from, next) =...原创 2018-09-11 08:44:00 · 328 阅读 · 0 评论 -
Vue核心知识-Vue实例
VUE事例的创建和作用创建new Vue 的方式new Vue({ el: '#root', template: '<div>this is content</div>'})通过 $mountimport Vue from 'vue'const app = new Vue({ // el: '#root', te...原创 2018-09-06 09:26:39 · 548 阅读 · 0 评论 -
Vue-router之集成
在项目中使用 vue-router项目中新建文件笔记所在项目新建 client/config/新建 client/router.js新建 client/routes.js安装 vue-routernpm i vue-router -S设置路由映射关系routes.jsimport Todo from '../views/toto/todo.v...原创 2018-09-09 10:53:18 · 376 阅读 · 0 评论 -
Vue中v-if和v-show的使用场景
1. 官方文档https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show2. v-if 和 v-show 的区别2.1 官方解释v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一...原创 2018-06-17 12:43:17 · 6316 阅读 · 0 评论 -
vue.js基础知识整理
1. Vue 实例1.1 创建一个Vue实例一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。demo1.2 数据与方法数据的响应式渲染当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。(...原创 2018-06-29 20:35:53 · 1574 阅读 · 0 评论 -
使用vue-cli创建项目模板
打开终端(我用的是git bash,windows下) cd ~/Desktop npm install -g vue-cli 全局安装 vue-cli vue init webpack blog-client 提示(vue命令不能使用,网上有其他解决办法,这里不使用) 参...原创 2018-06-19 22:34:18 · 545 阅读 · 0 评论 -
在vue项目中使用elementUI
1. 官方文档http://element-cn.eleme.io/#/zh-CN2. 安装在vue项目目录下,执行 npm i element-ui -S3. 引入在项目中按照说明引入,在main.js中,引入elementUI(这里选完整引入,省心) 4. 使用选择自己需要的组件,复制到vue项目中即可 ...原创 2018-06-20 16:03:35 · 3357 阅读 · 0 评论 -
Vue核心知识-Vue的组件之组件的继承
用法Vue.extend( options )参数:{Object} options 用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数Vue实例使用 extend,属性的合并下例中,通过 propsData 对 props 进行设置。设置 dat...原创 2018-09-07 19:29:00 · 11748 阅读 · 0 评论 -
Vue核心知识-Vue的组件之自定义双向绑定
实现类似 v-model 的功能实现数据双向绑定在组件内,添加 props;组件修改数据时 emit 事件,并把改的新值传出去;从而实现数据的双向绑定。import Vue from 'vue'const component = { props: ['value'], template: ` <div> <input type="t...原创 2018-09-07 23:04:10 · 344 阅读 · 0 评论 -
Vuex之state和getters
store 常规使用方式直接在 new Vuex.store 选项中去写,不太好,常规方式是创建文件创建 client/store/state/创建 client/store/state/state.js创建 client/store/mutations/创建 client/store/state/mutations.js分模块写// state.js ...原创 2018-09-11 11:17:20 · 918 阅读 · 0 评论 -
Vuex之mutation和action
mutation同步操作基本使用创建文件创建 client/store/mutations/创建 client/store/state/mutations.js声明 mutations// mutaions.jsexport default { updateCount (state, num) { state.count = num }...原创 2018-09-11 12:40:08 · 221 阅读 · 0 评论 -
Vue核心知识-Vue的组件之高级属性
插槽slot 是 vue 的内置组件。简单使用定义一个布局组件,里面放什么会在调用组件时决定,我们不会在布局组件里进行内容设置。在组件标签内部写的内容,可以通过 slot 在组件内部模板中进行使用。import Vue from 'vue'const component = { template: ` <div :style="style"> ...原创 2018-09-08 17:24:00 · 1298 阅读 · 0 评论 -
Vue核心知识-Vue的组件之render函数
render function类型:(createElement: () => VNode) => VNode详细:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提...原创 2018-09-08 18:58:26 · 4096 阅读 · 0 评论 -
Vuex之集成
安装 vuexnpm i vuex -S创建文件夹创建 client/ store/创建 client/store/store.js 应用入口声明 store// store.jsimport Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)const store = new Vuex.Store(...原创 2018-09-11 09:36:28 · 184 阅读 · 0 评论