Vue增强
1. Vue事件
语法：使用v-on指令注册事件
<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
简写方式：<标签 @事件句柄="表达式或者事件处理函数"></标签>
<div id="app">
{{num}}
<button v-on:click="num++">按钮1</button>
<button @click="num++">按钮2</button>
<button @click="add">按钮3</button>
<button @click="say('nice')">按钮4</button>
</div>
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
add(){
this.num++;
},
say(msg){
console.log("放假真好！" + msg);
}
}
});
</script>
2. 计算属性
computed：计算一些复杂的表达式
<body>
<div id="app">
{{birth}}
</div>
<script>
new Vue({
el:"#app",
data:{
birthday:1529032123201
},
computed:{
birth(){
return new Date(this.birthday).getFullYear() + "-" + new Date(this.birthday).getMonth()
+ "-" + new Date(this.birthday).getDay();
}
}
});
</script>
</body>
3. watch监听值的变化
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:""
},
watch:{
//可以起监听的效果
msg(newVal,oldVal){
console.log("老值：" + oldVal);
console.log("新值：" + newVal);
}
}
});
</script>
</body>
4. 组件
4.1 什么是组件
组件是用来完成特定功能的一个自定义的HTML标签。
4.2 作用
组件是对特定功能代码（html、css、js）的封装，通过组件的名字可以重复利用该组件中的代码。
4.3 组件的分类
组件分为全局组件和局部组件。
全局组件：在所有vue实例中（在它所挂载元素下面有效）有效。
局部组件：在自己vue实例中（在它所挂载元素下面有效）有效。
4.3.1 全局组件
语法：
Vue.component("自定义标签的名字",{配置对象 })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<hr>
<div id="app1">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<script>
Vue.component("mycomponent1",{
template:"<h1>今天天气真好！</h1>"
});
var templateConfig = {
template:"<h1>适合出去运动！</h1>"
};
Vue.component("mycomponent2",templateConfig);
new Vue({
el:"#app",
data:{}
});
new Vue({
el:"#app1",
data:{}
})
</script>
</body>
</html>
4.3.2 局部组件
特点：局部组件只能够在所挂载的标签中使用
<div id="app">
<mycomponent1></mycomponent1>
</div>
<hr>
<div id="app1">
<mycomponent1></mycomponent1> <!-- 不能使用 -->
</div>
<script>
new Vue({
el:"#app",
data:{},
components:{
"mycomponent1":{
template:"<h1>今天天气真好！</h1>"
}
}
});
new Vue({
el:"#app1",
data:{}
})
</script>
4.4.4 组件使用两种html模板
<body>
<div id="app">
<mycomponent1></mycomponent1>
</div>
<!--<template id="mytemplate">
<h1>template标签中的html！</h1>
</template>-->
<script type="text/tempalte" id="mytemplate">
<h1>script标签中的html！</h1>
</script>
<script>
new Vue({
el:"#app",
data:{},
components:{
"mycomponent1":{
//(1)直接在组件写个template这个模块
// template:"<h1>直接写在template模块中的哦</h1>"
//(2)定义template标签，再引用
//template:"#mytemplate"
//(3)定义在script标签中，再引用
template:"#mytemplate"
}
}
});
</script>
</body>
4.4.5 组件中的数据必须是函数
<body>
<div id="app">
<mycomponent1></mycomponent1>
</div>
<!-- 模板里面的内容 必须包含在一个根元素里面-->
<template id="mytemplate">
<div>
<form>
{{name1}}<input type="text" name="username">
</form>
</div>
</template>
<!--
(1)如果要使用模板里面的数据,必须是函数的形式
(2)模板里面如果有多个标签,必须包含在一个根标签里面
-->
<script>
var templateConfig = {
template:"#mytemplate",
data(){
return {name1:"用户名"};
}
};
Vue.component("mycomponent1",templateConfig);
new Vue({
el:"#app",
data:{}
});
</script>
</body>
注意事项：
- data数据只能够以函数的形式返回，因为函数中可以写其他的业务代码。
- 只能够在各自的组件模板中使用各自的组件中的data数据。
- Vue对象中的数据不能够在组件中使用，组件的数据也不能够在挂载的html标签上使用。
5. 路由
5.1 什么叫路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
5.2 路由的使用
(1) 先安装
npm install vue-router
(2) 引入js
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
(3) js代码
<script>
//先准备组件
var index = Vue.component("index",{
template:"<h1>首页</h1>"
});
var product = Vue.component("product",{
template:"<h1>产品介绍</h1>"
});
var about = Vue.component("about",{
template:"<h1>关于我们</h1>"
});
var router = new VueRouter({
routes:[{
path:"/",//路由地址
component:index//路由对应的资源
},{
path:"/product",
component:product
},{
path:"/about",
component:about
}]
});
//把路由挂载到标签上面
new Vue({
el:"#app",
data:{},
router:router
});
</script>
(4) 在html中使用
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/product">产品介绍</router-link>
<router-link to="/about">关于我们</router-link>
<hr>
<!--渲染模板，渲染组件-->
<router-view></router-view>
</div>
6. webpack的使用
6.1 什么是webpack？
把所有的项目资源打包成一些比较小的资源。
6.2 为什么需要打包？
(1) 减少页面对于资源的请求，提高效率。
(2) 可以降低版本，ES6-->ES5 为了兼容浏览器。
(3) 将代码打包的同时进行混淆，提高代码的安全性
6.3 js导包用法
(1) 安装
npm install -g webpack
npm install -g webpack-cli
(2) 创建一些代码
a.js
var b = require("./b.js");
require("../css/index.css");
console.log(b);
b.js
define(function () {
var b = "b模块";
return b;
});
(3) 运行打包的命令
webpack src/a.js -o dist/bundle.js
(4) 创建一个html页面 ,引入bundle.js文件
6.4 打包配置文件方式
在项目的根路径下面创建一个文件：
webpack.config.js
var path = require("path");
module.exports = {
entry: './src/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
运行：webpack
6.5 css打包用法
(1) 下载安装css加载器
css-loader style-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
(2) 配置webpack.config.js
const path = require('path');
//配置入口和出口
module.exports = {
entry: './src/a.js',//入口文件
output: { //出口
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
}
]
}
};
(3) 在js文件里面引入css
var a ='aaa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);
(4) 在终端terminal运行webpack，生成一个bundle.js的文件
(5) 在HTML页面引入bundle.js文件
7. 前端项目放到服务器运行
(1) 安装
npm install webpack-dev-server --save-dev
npm install webpack --save-dev
(2) 在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
}
(3) package.json版本
"devDependencies": {
"css-loader": "^3.2.0",
"style-loader": "^1.0.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
(4) 在终端运行 npm run dev
(5) 访问默认端口是：localhost:8080
8. 脚手架搭建
(1) npm install -g @vue/cli
(2) vue create hello-world
(3) 选中VueProject（第二个）
(4) cd hello-world
yarn serve 运行
yarn build 编译（额外生成一些文件）
(5) npm run serve 运行
Vue增强的更多相关文章
- [在线+源码]vue全家桶+Typescript开发一款习惯养成APP
# vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- vue.js第六课
class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...
- vue.js 第四课
(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- Vue#组件
组件: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 使用: ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
随机推荐
- CentOS7中安装MariaDB
什么是mariaDB? 在线安装(慢的要命) RPM离线安装(CentOS7.X) 在线安装 打开官方网站 https://mariadb.org/ 点击Download,跳转到下一页面 继续点击Do ...
- vscode启动黑屏
今天打开vscode的时候突然就黑屏了,一脸懵 于是上网找了一下,根据这位博主的解决办法: https://blog.csdn.net/insgo/article/details/102975986 ...
- Debug 利器：pstack & strace
工作中难免会遇到各种各样的 bug,对于开发环境 or 测试环境的问题还好解决,可以使用 gdb 打断点或者在代码中埋点来定位异常; 但是遇到线上的 bug 就很难受了,由于生产环境不能随意替换.中断 ...
- 程序员的算法课（11）-KMP算法
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- MATLAB数值计算——0
目录 MATLAB数值计算 1.solve() 2.fzero() 3.fsolve() MATLAB数值计算 MATLAB中文论坛基础板块常见问题归纳(出处: MATLAB中文论坛) 登录http: ...
- git的用法 回到某个版本
进入到项目文件夹 如果新建项目时没有勾选git 进入到项目中
- Flask开发成语接龙游戏，闲来无事手机玩玩自己写的游戏吧！
英语单词学习应用 周五发布的文章Flask开发天气查询软件,带你掌握pipenv的使用与手机Termux下的部署发布后,看到喜欢的人比较多.本来周末打算照着扇贝/极光单词,写一个英语单词自测工具.但苦 ...
- 【IoT平台技术对接分享】如何上传正确的消息推送证书
消息推送应用实现消息推送的接口,部署证书,同时上传根证书到平台. 目前消息推送失败,很大一部分原因是证书上传不对.推荐小伙伴们使用下面的方法导出证书. 推送:平台调用应用服务器的restful接口将数 ...
- SpringBoot使用注解(@value)读取properties（yml）文件中 配置信息
为了简化读取properties文件中的配置值,spring支持@value注解的方式来获取,这种方式大大简化了项目配置,提高业务中的灵活性. 1. 两种使用方法1)@Value("#{co ...
- Python基础之第三方库gevent安装
安装gevent库: 想要安装gevent库,我们需要确定pip版本: 使用 pip3 list: 我们可以发现pip版本为19.3.1,如果你们的pip版本不是最新版可以使用命令python -m ...