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 ...
随机推荐
- MySQL查询字段类型为json的数据
测试表如下: /* Navicat Premium Data Transfer Source Server : Source Server Type : MySQL Source Server Ver ...
- docker配置mysql主从与django实现读写分离
一.搭建主从mysql环境 1 下载mysql镜像 docker pull mysql:5.7 2 运行刚下载的mysql镜像文件 # 运行该命令之前可以使用`docker images`是否下载成功 ...
- Ansible 介绍和安装
目录 Ansible 介绍 环境准备 Ansible安装 配置秘钥管理 配置Inventory文件 简单测试连通性 Ansible 介绍 运维工具分类: agent: puppet, func 这类都 ...
- Java之Retry重试机制详解
应用中需要实现一个功能: 需要将数据上传到远程存储服务,同时在返回处理成功情况下做其他操作.这个功能不复杂,分为两个步骤:第一步调用远程的Rest服务上传数据后对返回的结果进行处理:第二步拿到第一步结 ...
- scrapy框架安装配置
scrapy框架 scrapy安装(win) 1.pip insatll wheel 2.下载合适的版本的twisted:http://www.lfd.uci.edu/~gohlke/pythonli ...
- Mac从拆箱到入门
Mac从拆箱到入门 记录首次使用Mac的我的历程,不是专业的Mac使用教程,只是简单的记录.还有我在使用过程中一些用到的功能都一些小提示吧. 1.首次开机配置,对于一个完全的新手来说(也就是我) ...
- 硬核评测：企业上云的极速存储挑战，华为云全新极速IO云硬盘性能评测
来源:至顶网 作者:董培欣 借助华为云全新一代极速IO云硬盘开启邀测的时机,至顶网评测实验室展开了一次华为云极速IO云硬盘与超高IO云硬盘的性能对比测试活动,并且尝试通过相关测试成绩,对云硬盘的应用能 ...
- Android Application 详细介绍
一.先看看文档里怎么说 Base class for those who need to maintain global application state. You can provide your ...
- 学习ThinkPHP的第20天--MySQL事务操作、查询事件、一对一关联
之所以从20天才开始写随笔记是因为之前没搞自己的博客 从20天开始记录我在ThinkPHP中的点点滴滴 1.MySQL事务操作 /**事务操作*/ //startTrans启动事务.rollback回 ...
- iOS textView的使用总结
转自:http://blog.csdn.net/zhaopenghhhhhh/article/details/11597887 在.h文件中声明: @interface ProtocolViewCon ...