Vue04——vue自定义事件、Router、Vue-cli、发布上线
一、Vue的自定义事件
点击任何一个按钮，按钮本身计数累加，但是每点击三个按钮中的一个，totalCounter 都要累加。
<body>
<div id="app">
<my_btn @total="allCounter()"></my_btn>
<my_btn @total="allCounter()"></my_btn>
<my_btn @total="allCounter()"></my_btn>
<p>所有的按钮一共点击了{{totalCounter}}次</p>
</div>
<template id="my_btn">
<button @click="total()">点击了{{counter}}次</button>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_btn',{
template:'#my_btn',
data(){
return {counter : 0}
},
methods:{
total(){
this.counter += 1;
// 通知外部，这个方法执行过了
this.$emit('total'); // 这里把total 传出去，也可以叫别的名字，外面通过@total来监听
}
}
});
new Vue({
el:'#app',
data:{
totalCounter:0,
},
methods:{
allCounter(){
this.totalCounter += 1;
}
}
})
</script>
</body>
二、插槽
1.匿名插槽
<body>
<div id="app">
<my_slot></my_slot>
</div>
<template id="my_slot">
<div id="panel">
<header>header.....</header>
<!--这里放一个插槽占位-->
<slot>我是插槽，如果不插入内容，就显示默认的内容。</slot>
<footer>footer......</footer>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_slot',{
template: '#my_slot',
});
new Vue({
el:'#app',
data:{}
})
</script>
</body>
如果改为
<div id="app">
<my_slot>
<img src="img/img_01.jpg" width="200px" alt="">
</my_slot>
</div>
那新增加的 img 通过插槽显示出来了。
2.实名插槽
实名插槽就是，每个插槽都已经限制好要插入什么样的内容，只有插槽的name符合才会被正常显示
<body>
<div id="app">
<my_computer>
<p slot="cpu">因特尔 酷睿i8</p>
<p slot="memory">16g 金士顿</p>
<p>当当当，这些内容都不会显示的，因为插槽对不上</p>
<p slot="hard-disk">西部数据</p>
</my_computer>
</div>
<template id="computer">
<div id="pc">
<p>电脑组件:</p>
<slot name="cpu">cpu插槽</slot>
<slot name="memory">内存条插槽</slot>
<slot name="hard-disk">硬盘插槽</slot>
<p>end.......</p>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my_computer',{
template:'#computer'
});
new Vue({
el:'#app',
data:{}
})
</script>
</body>
三、VueRouter
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
功能：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
哒哒哒。。。。。。。。。。。。。。。。。。。。。。。。
https://router.vuejs.org/zh/api/
创建一个路由的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link class="list-group-item" to="/one">one</router-link>
<router-link class="list-group-item" to="/two">two</router-link>
<router-link class="list-group-item" to="/three">three</router-link>
</div>
<div class="col-xs-6">
<div class="panel">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
<!--子组件-->
<template id="one">
<div>
<h3>first</h3>
<p>111111111111111</p>
</div>
</template>
<template id="two">
<div>
<h3>two</h3>
<p>222222222222222</p>
</div>
</template>
<template id="three">
<div>
<h3>three</h3>
<p>33333333333333</p>
</div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"> </script>
<script>
// 1.创建组件
const one_tmp = Vue.extend({
template:'#one'
});
const two_tmp = Vue.extend({
template:'#two'
});
const three_tmp = Vue.extend({
template:'#three'
});
// 2.创建路由
const routes = [
{path:'/one',component:one_tmp},
{path:'/two',component:two_tmp},
{path:'/three',component:three_tmp},
// 配置根路由
{path:'/',redirect:'/one'}
];
// 3.创建路由实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
// 4.创建Vue实例
new Vue({
router
}).$mount('#app'); // el:'#app' 是自动挂载，.$mount() 叫手动挂载
</script>
</body>
</html>
路由里面再创建路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link class="list-group-item" to="/one">one</router-link>
<router-link class="list-group-item" to="/two">two</router-link>
<router-link class="list-group-item" to="/three">three</router-link>
</div>
<div class="col-xs-6">
<div class="panel">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
<!--子组件-->
<template id="one">
<div>
<h3>first</h3>
<p>111111111111111</p>
<div>
<ul class="nav nav-tabs">
<!-- role="presentation" 是bootstrap的标签 active-class 是激活时候的样式，tag 是vue的，表示渲染成li标签，默认是渲染成a标签-->
<router-link tag="li" to="/one/part1" role="presentation" active-class="active"><a href="#">part1</a></router-link>
<router-link tag="li" to="/one/part2" role="presentation" active-class="active"><a href="#">part2</a></router-link>
</ul>
<div class="tab-content">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<template id="part1">
<div>
<h3 style="color:red">one -- part1</h3>
</div>
</template>
<template id="part2">
<div>
<h3 style="color:red">one -- part2</h3>
</div>
</template>
<template id="two">
<div>
<h3>two</h3>
<p>222222222222222</p>
</div>
</template>
<template id="three">
<div>
<h3>three</h3>
<p>33333333333333</p>
</div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"> </script>
<script>
// 1.创建组件
const one_tmp = Vue.extend({
template:'#one'
});
const one_part1 = Vue.extend({
template:'#part1'
});
const one_part2 = Vue.extend({
template:'#part2'
});
const two_tmp = Vue.extend({
template:'#two'
});
const three_tmp = Vue.extend({
template:'#three'
});
// 2.创建路由
const routes = [
{path:'/one',
component:one_tmp,
children:[
{path:'part1',component:one_part1},
{path:'part2',component:one_part2}
]
},
{path:'/two',component:two_tmp},
{path:'/three',component:three_tmp},
// 配置根路由
{path:'/',redirect:'/one'}
];
// 3.创建路由实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
// 4.创建Vue实例
new Vue({
router
}).$mount('#app'); // el:'#app' 是自动挂载，.$mount() 叫手动挂载
</script>
</body>
</html>
四、Vue-cli
vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子.https://github.com/vuejs/vue-cli
## 全局安装vue-cli
npm install -g vue-cli
## 创建项目,并将 webpack 放进去，根据提示填写project name 等等配置项目
vue init webpack demo1
## 进入项目目录
cd demo1
## 安装依赖
npm install
## 运行
npm run dev
然后访问 http://localhost:8080/ ，就可以访问创建好的脚手架了。
五、发布上线
1.本地服务器：
- 打包
npm run build,生产dist文件 - 此处利用 serve 这个工具演示，安装：
npm install -g serve - 运行：
serve dist,访问命令行窗口显示的地址即可。
2.线上服务器：
- 打包
npm run build - 把dist文件夹名称修改为项目的名称，部署上线（上传到服务器指定文件夹）
- 根据目录地址访问即可
Vue04——vue自定义事件、Router、Vue-cli、发布上线的更多相关文章
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- 由自定义事件到vue数据响应
前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...
- Vue 自定义事件 && 组件通信
1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
- vue自定义事件 子组件把数据传出去
每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1.使用v-on绑定自定义 ...
- 关于vue自定义事件中，传递参数的一点理解
例如有如下场景 先熟悉一下Vue事件处理 <!-- 父组件 --> <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...
- vue自定义组件（vue.use()，install）+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <te ...
随机推荐
- 解决Fiddler无法捕获本地HttpWebRequest（C#.net）请求和HttpURLConnection（Java）请求
方法很简单,就是设置本地代理 C# HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url); req.Proxy = new WebPr ...
- C++ STL：vector实现
练习一发,主要是使用placement new在原始内存上创建对象.半路md面试电话来了,赶紧存档,看Java大法 #include <iostream> #include <cst ...
- 浏览器好玩的的 console.log
现在很多网站,你在访问他页面的时候, 你要查看 console 的话, 看到有文章介绍的,一定想知道是怎么展示来的吧 如 baidu 的 你懂的,其实很简单,代码如下, console 输出下就行 c ...
- 安卓app开发-03-项目的基本开发步骤
android项目的基本开发步骤 这里分享一下开发 安卓 app 的流程,当然有些感觉不必要,其实不然,前期工作也是极为重要的额,就像开发的时候如果目标不对的话,到后期后很迷的,所以一定要提前做好规划 ...
- input标签添加上disable属性在ios端字体颜色不兼容的问题
input[disabled],input:disabled,input.disabled{ color: #3e3e3e; -webkit-text-fill-color: #3e3e3e; -we ...
- postman具体讲解
postman 简单教程-实现简单的接口测试 最近开始做接口测试了,因为公司电脑刚好有postman,于是就用postman来做接口测试,哈哈哈哈,...postman 功能蛮强大的,还比较好用,下面 ...
- d3js data joins深入理解
Data joins 给定一个数据数组和一个 D3 selection 我们就可以attach或者说是'join'数组中的每个数据到selection中的每个元素上. 这将使得我们的数据和可视化元素 ...
- 《IT老外在中国》第11期：首次访华的编程巨匠、C#之父Anders
见到Anders的时候,他正专注的倾听国内开发者的提问,一副远视眼镜斜歪着架在头顶,宽松的深蓝色休闲毛衫随意套在白色圆领T恤外. 如果不是他那专注的神情,以及现场见证开发者对他的狂热崇拜,很难想象这位 ...
- leetcode Ch1-Search
一. Binary Search int binarySearch(vector<int> &array, int target) { , hi = array.size() - ...
- 10 套华丽的 CSS3 按钮推荐
在过去的Web开发中,通常使用Photoshop来设计按钮的样式.不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变.框阴影.文字阴影等效果.此类按钮最大的优势 ...