
vue
evior
因为爱 所以爱
展开
-
Vue基础入门---Vue-router
简介: 由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。有的小...转载 2018-09-02 17:23:24 · 2033 阅读 · 2 评论 -
Vue基础入门---Vue-cli 教程
Vue-cli是vue官方出品的快速构建单页应用的脚手架,如果你是初次尝试Vue,我不建议使用,推荐你老老实实用普通引入javascript文件的方式进行学习(你可以去看我的vue视频教程的1-4季),这里牵扯的东西很多,有webpack,npm,nodejs,babel等等,很容易产生从入门就放弃的思想。Vue-cli一、安装vue-cli安装vue-cli的前提是你已经安装了npm...转载 2018-09-02 16:56:57 · 43278 阅读 · 9 评论 -
Vue基础入门----实例和内置组件
概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vue和其他框架一起使用。实例入门-实例属性Vue和Jquery.js一起使用1、下载并引入jquery框架下载可以去官网进行下载,我这里使用的版本是3.1.1,下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jq...转载 2018-09-02 16:43:23 · 353 阅读 · 0 评论 -
Vue基础----选项
propsData Option 全局扩展的数据传递propsData 不是和属性有关,他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识,作一个的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签,我们学了组件,完全可以使用组件来做,这里只是为了演示propsData的用法。代码如下:<!DOCTYPE html><html lang="en"&...转载 2018-09-02 16:34:37 · 374 阅读 · 0 评论 -
Vue基础----全局API(二)
Vue.directive 自定义指令一、什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。二、Vue.directive自定义指令我们在第一季就学习了内部指令,我们也可以定义一些属于...转载 2018-09-02 16:23:54 · 322 阅读 · 0 评论 -
Vue基础----内部指令
编写第一个HelloWorld代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"&转载 2018-09-02 15:57:28 · 986 阅读 · 1 评论 -
vue路由传值与路由跳转
一、用name传递参数两步完成用name传值并显示在模板里:在路由文件src/router/index.js里配置name属性。1234567 routes: [ { path: '/', name: 'Hello', component: Hello } ]模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:1&l...原创 2018-04-06 11:17:38 · 3072 阅读 · 0 评论 -
vue非父子组件之间的通信
1、创建一个vm.js文件 --保证通信组件是一个vue对象2、vm.js的内容/** * Created by Administrator on 2018/3/20. */import Vue from 'vue';/*定义一个常量*/export const NUM='num';/*公共的vue对象 --所有导入的组件为同一个vue*/export var vm=ne...原创 2018-04-06 11:02:26 · 242 阅读 · 0 评论 -
small小碗菜项目-前端-环境搭建
1、安装node 下载地址:http://nodejs.cn/download/2、安装vue-cli npm install vue-cli -g //-g表示全局安装 查看vue-cli的版本 vue -V3、vue init命令来初始化项目 vue init <template-name> <project-name> <tem...原创 2018-04-05 13:32:50 · 237 阅读 · 0 评论 -
vue生命周期和钩子函数的一些理解
一、官网的声明周期图片二、vue1.0与vue2.0生命周期函数介绍三、案例详解1、简单的案例<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vu原创 2018-03-30 21:45:18 · 506 阅读 · 0 评论 -
Vue基础入门---vuex
第1节:初出茅庐 来个小Demo引入vuex 1.利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。npm n install vuex --save需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。2.新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。...转载 2018-09-02 17:35:36 · 494 阅读 · 0 评论