VUE2.0
关注
分享
扫一扫
文章平均质量分 79
eighthroute
这个作者很懒，什么都没留下…
展开
-
1.Vue环境搭建(2017.10.20)
由于 vue 开发需要使用 npm 工具，而 npm 需要 node.js 支持，故先安装 node.js。而 npm 在使用时可能会很慢，我们可以使用淘宝镜像 cnpm 命令代替。Node.js : http://nodejs.cn/淘宝NPM: https://npm.taobao.org/ 1.安装node.js：前往node.js官网下载并安装工具(windows见附件node-v8.9....原创 2018-04-28 10:47:11 · 223 阅读 · 0 评论 -
2.Vue基础(2018.01.10)
1.Vue简介：Vue为复杂的单页面应用提供驱动，所有东西都是响应式的。所有的 Vue 组件都是 Vue 实例。当一个 Vue 实例被创建时，它向 Vue 响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生"响应"，即更新为新的值。2.模板语法:数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值，其表现形式：{{ 语法 }}...原创 2018-04-28 10:46:56 · 214 阅读 · 0 评论 -
3.Vue组件(2018.01.11)
1.Vue组件介绍：Vue组件 (Component) 是 Vue.js 最强大的功能之一。项目都是由组件构建起来的，组件也可以重用。所有的 Vue 组件同时也都是 Vue 的实例。2.Vue单文件组件包含三个部分：template视图部分，只能存在一个根元素。script逻辑部分，其中 data 必须是函数。style样式部分，建议使用 scoped 确保样式只在当前组件内生效。模板如下：<...原创 2018-04-28 10:46:39 · 139 阅读 · 0 评论 -
4.Vue过渡与动画 (2018.01.12)
1.我们只对CSS过渡与动画进行简单介绍，详细用法请参考官网文档。 2.单元素/组件的过渡：Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡：1). 条件渲染 (使用 v-if)。2). 条件展示 (使用 v-show)。3). 动态组件。4). 组件根节点。案例：<template> <div...原创 2018-04-28 10:46:22 · 172 阅读 · 0 评论 -
5.Vue可复用性与组合(2018.01.13)
1.自定义指令：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。1). 自定义全局指令：案例：当页面加载时，input 将获得焦点。①.在 main.js里面注册全局指令：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { inserted: function (el) { el.fo...原创 2018-04-28 10:46:09 · 209 阅读 · 0 评论 -
6.Vue组件之与后台交互Axios(2018.01.14)
1.Axios介绍：在实际Vue项目开发过程中，一般都是前后端分离开发，前端UI人员开发Vue，后端服务器人员通过接口向前端人员提供数据，在前后台通信过程中，可以使用Axios组件进行数据的传递，而不用我们自己去写具体的实现。Axios中文文档：https://www.kancloud.cn/yunye/axios/234845 github地址：https://github.com/axi...原创 2018-04-28 10:45:58 · 680 阅读 · 0 评论 -
7.Vue生命周期钩子(2018.01.15)
1.实例生命周期钩子：<template> <div> {{ msg }} <button @click="clickMe" >点击我</button> </div></template><script> export default {原创 2018-04-28 10:45:43 · 116 阅读 · 0 评论 -
8.Vue组件之路由VueRouter(2018.01.16)
1.VueRouter简介：当我们的项目中要使用导航栏或者页面切换跳转时，我们就需要用到路由VueRouter。2.使用案例：1).安装： cnpm install --save vue-router2).新建组件 Home.vue，Foo.vue，Bar.vue，NotFoundComponent.vue：①. Home.vue：<template> <div> ...原创 2018-04-28 10:45:31 · 228 阅读 · 0 评论 -
9.Vue组件之状态管理Vuex(2018.01.17)
1.Vuex介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单地说，Vuex 就是管理组件之间数据通信的容器，此处的组件通信是 Vue 里面所有组件，而不仅仅包括父子组件之间的通信。2.使用案例：1).安装： cnpm install --save vuex 2).在 src 目录下新...原创 2018-04-28 10:45:13 · 188 阅读 · 0 评论 -
10.Vue框架之element-ui(2018.01.18)
1.前人栽树，后人乘凉：如果每个组件都要自己亲自去开发，那工作量将会巨大，我们可以直接使用别人开发好的组件，加快开发效率。element-ui文档参考：http://element-cn.eleme.io/#/zh-CN/component/installation2.直接引入使用（不建议）:如果 element 里面的插件能完全满足你项目需求，可以使用该方法。案例：<!DOCTYPE ht...原创 2018-04-28 10:44:58 · 439 阅读 · 0 评论 -
11.Vue框架之iView(2018.01.19)
1.前人栽树，后人乘凉：如果每个组件都要自己亲自去开发，那工作量将会巨大，我们可以直接使用别人开发好的组件，加快开发效率。iView文档参考：https://www.iviewui.com/docs/guide/install2.直接引入使用（不建议）:如果 iView 里面的插件能完全满足你项目需求，可以使用该方法。案例：<!DOCTYPE html><html><...原创 2018-04-28 10:44:26 · 496 阅读 · 0 评论 -
12.Vue其他(2018.01.20)
1.注意事项：1). 全局样式放到顶级vue文件里面，例如 App.vue 。2). 每个组件里面的style必须加上scoped，<style scoped>，顶级组件除外。3). 必须初始化属性：①. 由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值：var vm = new Vue({ data: { mes...原创 2018-04-28 10:44:14 · 134 阅读 · 0 评论 -
1.Laravel5.4 + vue2.0 + vue-router + Element2.3 的搭建（2018.05.06）
1.请先安装 Composer：windows下安装软件请见附件【Composer-Setup.zip】，解压安装即可。查看是否安装成功：composer --version2.安装 Laravel：通过 Composer 的 create-project 命令来安装 Laravel 应用，blog 为项目名称：composer create-project --prefer-dist larav...原创 2018-06-03 15:55:50 · 1076 阅读 · 0 评论