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 ...
随机推荐
- Parallel Feature Pyramid Network for Object Detection
Parallel Feature Pyramid Network for Object Detection ECCV2018 总结: 文章借鉴了SPP的思想并通过MSCA(multi-scale co ...
- numpy和matplotlib下载中出现的问题
在安装numpy的时候遇到如下所示的错误: 经过几个小时的查找,最终发现是pygame的路径不对导致.将pygame的具体路径加上后,问题解决.实施如下:得出一个结论:路径很重要,千万得小心哦. 报错 ...
- linuxLVM之LV扩大和缩小容量（非xfs文件系统）
LVM的基础请见:https://www.cnblogs.com/wxxjianchi/p/9698089.html 一.放大LV的容量.放大容量是由内而外来操作的. 1.设置新的lvm分区:用fdi ...
- 深度学习解决NLP问题：语义相似度计算
在NLP领域,语义相似度的计算一直是个难题:搜索场景下query和Doc的语义相似度.feeds场景下Doc和Doc的语义相似度.机器翻译场景下A句子和B句子的语义相似度等等.本文通过介绍DSSM.C ...
- 【Powershell 教程】学习资源汇总
[Powershell 教程]学习资源汇总 一.书籍教程 1.<Windows PowerShell实战指南>第3版 作者:[美] Don,Jones(道·琼斯),Jeffery,Hick ...
- asp.net core 从 3.0 到 3.1
asp.net core 从 3.0 到 3.1 Intro 今天 .net core 3.1 正式发布了,.net core 3.1 正式版已发布,3.1 主要是对 3.0 的 bug 修复,以及一 ...
- 详解在Linux系统中安装Tomcat
本文以在CentOS 7.6中安装Tomcat8.5为例进行安装,其他系统和版本都是大同小异的. 安装JDK 安装Tomcat之前,需要先安装JDK,可以参看之前的文章详解在Linux系统中安装JDK ...
- 监控io性能、free、ps命令、查看网络状态、Linux下抓包 使用介绍
第7周第2次课(5月8日) 课程内容: 10.6 监控io性能 10.7 free命令10.8 ps命令10.9 查看网络状态10.10 linux下抓包扩展tcp三次握手四次挥手 http://ww ...
- PHP安全之道3：常见漏洞和攻防
第一篇 SQL注入 安全配置和编程安全并不是万全之法,攻击者往往可以通过对漏洞的试探找到新的突破口,甚至0days. 下面总结以下常见漏洞,在日常开发维护工作中可以留意. *聊聊老朋友:SQL注入漏洞 ...
- linux进程间通信之共享内存学习记录
进程 狭义定义:进程是正在运行的程序的实例(an instance of a computer program that is being executed). 广义定义:进程是一个具有一定独立功能的 ...