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 ...
随机推荐
- 2019-9-20：渗透测试，基础学习,笔记，metasploit的基础使用
使用kali下metasploit生成木马,控制windows系统 kali基于debin的数字取证系统,上面集成了很多渗透测试工具,前身为bt r3(BrackTrack) Metasploit,是 ...
- ganglia 客户端部署
#!/bin/bash #配置参数 #serverIP=192.168.1.16 #network=ens32 #关闭selinux #setenforce #sed -i 's/SELINUX=en ...
- python网络爬虫之解析网页的正则表达式(爬取4k动漫图片)[三]
前言 hello,大家好 本章可是一个重中之重,因为我们今天是要爬取一个图片而不是一个网页或是一个json 所以我们也就不用用到selenium模块了,当然有兴趣的同学也一样可以使用selenium去 ...
- easywechat微信开发SDK之小微商户进件（二）
正式开始进件之前需要准备几个东西 1.服务商商户号 2.API密钥 微信服务商后台中设置 3.APIv3密钥 微信服务商后台中设置 4.API证书路径 登录服务商后台下载 生成证书官方又文档的 很 ...
- Docker 遇到的一些错误
1.version Base not defined in file libdevmapper.so.1.02 在 Centos 6.5 上安装docker-io之后,使用/etc/init.d/do ...
- 交互程序 Scanner类
交互程序 1. Scanner类是标准Java类库的类 (1)提供一些方法用于交互式读入不同类型的输入数据,输入可以是不同的数据源,包括用户键入的数据和保存在文件中的数据(怎么弄). (2)将一个字符 ...
- luogu P1768 天路 |01分数规划+负环
题目描述 言归正传,小X的梦中,他在西藏开了一家大型旅游公司,现在,他要为西藏的各个景点设计一组铁路线.但是,小X发现,来旅游的游客都很挑剔,他们乘火车在各个景点间游览,景点的趣味当然是不用说啦,关键 ...
- CF547E Milk and Friends(AC自动机的fail指针上建主席树 或 广义后缀自动机的parent线段树合并)
What-The-Fatherland is a strange country! All phone numbers there are strings consisting of lowercas ...
- CoderForces-913-C
A New Year party is not a New Year party without lemonade! As usual, you are expecting a lot of gues ...
- 【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析
本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错 ...