Vue(十七)模块化开发
import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router' import routerConfig from './router.config.js' //使用vue-router
Vue.use(vueRouter); const router = new vueRouter(routerConfig) new Vue({
el: '#app',
render: h => h(App),
router
})
<template>
<div id="app">
<h3>{{msg}}</h3>
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
console.log(this.$route)
},
watch:{
$route:function(newView,oldView){
console.log('路由发生变化,跳转到' + newView.path + ',旧的路由地址' + oldView.path)
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>

import Home from './components/Home.vue'
import News from './components/News.vue' export default {
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
}
]
}

<template>
<div id="app">
<h3>{{msg}}</h3>
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div> <hr> <button @click="send">发送ajax请求</button> </div>
</template> <script>
import axios from 'axios' export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
console.log(this.$route)
},
watch:{
$route:function(newView,oldView){
console.log('路由发生变化,跳转到' + newView.path + ',旧的路由地址' + oldView.path)
}
},
methods: {
send(){
axios.get('https://api.github.com/users/Somnusy')
.then(response=>{
console.log(response.data);
}).catch(error=>{
console.log(error);
})
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>

创建组件 MyButton.vue
使用自定义组件
Vue(十七)模块化开发的更多相关文章
- 利用requirejs实现vue的模块化开发
通常vue都是搭配webpack+vue-cli使用的 如果不在nodejs环境下开发web应用呢? 这里提出一个解决方案: 1.加载requirejs,并且指定main函数 <script d ...
- 基于vue模块化开发后台系统——准备工作
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下v ...
- 基于vue模块化开发后台系统——构建项目
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...
- Vue使用SCSS进行模块化开发
原文地址:http://www.cnblogs.com/JimmyBright/p/7761531.html 个人认为scss最大的好处就是能将css属性设置为变量,这样让css一键更换主题成为可能. ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- JavaScript学习总结(六)——前端模块化开发
早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...
- 06Vue.js快速入门-Vue组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- 使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- legend3---11、php前端模块化开发
legend3---11.php前端模块化开发 一.总结 一句话总结: 把常用的前端块(比如课程列表,比如评论列表)放进模块列表里面,通过外部php变量给数据,可以很好的实现复用和修改 页面调用 @p ...
随机推荐
- checkbox选中相关问题总结
html: <input type="checkbox" name="fruit" id="apple">苹果 <inpu ...
- CND网站加速
CDN是什么 1-CDN俗称网站加速2-公司一般是购买其他cdn服务商提供的服务3-CDN一般是用来缓存网站的静态资源文件的(css,js,图片,html,htm),浏览器获取某个静态资源是按照就近原 ...
- redis中实现redis-cli任意目录执行
- MyEclipse 安装插件 Github安装/使用 教程
2016年02月18日 09:45:23 阅读数:4531 本文的目的是 1.在 Myeclipse10.7中 集成Github并使用. 选择的安装方式是:MyEclipse 中设置下文中1后,下载g ...
- Python题目练习(二)
1.如何实现对python列表去重,并保持原来顺序 li = [1,2,5,3,1,6,3,8,0,3,2,4] l = [] for i in li: if i not in l: l.append ...
- Ubuntu16.04中nginx除80之外其他端口不能访问
不废话, 大多数都以为是ufw防火墙的问题. 但我的是因iptables防火墙, 坑死我了. 查了好多也没查到怎么在Ubuntu关闭iptables, 索性直接卸载 apt-get remove ip ...
- 9、Qt Project之简单的数据库接口
简单的数据库接口 Step1:首先完成整个UI界面的额设计: <?xml version="1.0" encoding="UTF-8"?> < ...
- INSERT 中ON DUPLICATE KEY UPDATE的使用
如果您指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则执行旧行UPDATE.例如,如果列a被定义为UNIQUE,并 ...
- vue-cli之打包多入口配置
在使用vue-cli初始化vue项目时,默认打包为单入口,有时候一个项目可能会有不同入口,在这种情况下,就需要我们稍微修改下webpack配置文件了,具体步骤如下: 1.修改webpack.base. ...
- BZOJ-4-2038: [2009国家集训队]小Z的袜子(hose)-莫队
思路 :分块 思想 处理离线查询操作 对查询进行排序 在同一块内的按照 r 进行排序 不同块 的按照 L进行排序. #include<bits/stdc++.h> using names ...