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 ...
随机推荐
- SQL查询优化实践
为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上,即随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢,且数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计数据库时 ...
- 第三个视频作品《小白快速入门greenplum》上线了
1.场景描述 第三个视频作品出炉了,<小白快速入门greenplum>上线了,有需要的朋友可以直接点击链接观看.(如需购买,请通过本文链接购买) 2. 课程内容 课程地址:https:// ...
- linux 正确的关机流程
查看系统的使用状态 1.使用who命令查看在线用户. 2.使用netstat -a或ss -tnl查看网络状态: 3.使用ps -aux 查看后台运行的程序. 通过上述操作可以了解系统目前使用状态,从 ...
- 【BZOJ4001】【Luogu P3978】 [TJOI2015]概率论
题目描述: Description: Input 输入一个正整数N,代表有根树的结点数 Output 输出这棵树期望的叶子节点数.要求误差小于1e-9 Sample Input 1 Sample Ou ...
- JQuery基础之获取和设置标签内容
JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...
- Magicodes.Sms短信库的封装和集成
简介 Magicodes.Sms是心莱团队封装的短信服务库,已提供Abp模块的封装. Nuget 新的包 名称 说明 Nuget Magicodes.Sms.Aliyun 阿里云短信库 Magicod ...
- JNI用法小例子
一.准备包含本地方法的.java文件(ContentVideo.java),包括set()和get()两个方法. public class ContentVideo { public native s ...
- JsonSchmea用法
JsonSchmea用法 简介 JSON Schema是基于JSON格式,用于定义JSON数据结构以及校验JSON数据内容. JSON Schema官网地址:http://json-schema.or ...
- Webstorm相关设置
[1.快速激活Webstorm] http://jingyan.baidu.com/article/9f63fb919674f2c8400f0e9a.html [2.webstorm 2017 激活破 ...
- HDU2242 考研路茫茫——空调教室 (双联通分+树形DP)
考研路茫茫——空调教室 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...