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

(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 ...

随机推荐

Hash Map 在java中的解释及示例
目录 HashMap在java中的应用及示例 HashMap的内部结构 HashMap的性能同步HashMap HashMap的构造函数 HashMap的时间复杂度 HashMap的方法 1. vo ...
【Luogu P3375】字符串匹配KMP算法模板
Luogu P3375 模式串:即题目中的S2所代表的意义文本串:即题目中的S1所代表的意义对于字符串匹配,有一种很显然的朴素算法:在S1中枚举起点一位一位匹配,失配之后起点往后移动一位,从头开始 ...
SpringBoot源码学习系列之异常处理自动配置
SpringBoot源码学习系列之异常处理自动配置 1.源码学习先给个SpringBoot中的异常例子,假如访问一个错误链接,让其返回404页面在浏览器访问: 而在其它的客户端软件,比如postm ...
JAVA合并多个word文档根据文章标题生成目录
此产品版本是免费版的,我也是在用免费,除了只能单次识别25张一下的word和生成pdf有限制,其他的功能都和正式版差不多. 如果你几十个文档,每个文档几页,输出出来超过25页,那没关系,依然可以使用. ...
如何运用DDD - 实体
目录如何运用DDD - 实体概述何为实体似曾相识你确定它真的需要ID吗运用实体结合值对象为实体赋予它的行为尝试转移一部分行为给值对象愿景是美好的现实是残酷的总结如何运用DDD ...
【数据结构】之散列链表（Java语言描述）
散列链表,在JDK中的API实现是 HashMap 类. 为什么HashMap被称为“散列链表”?这与HashMap的内部存储结构有关.下面将根据源码进行分析. 首先要说的是,HashMap中维护着的 ...
如何重置IE浏览器
1.退出所有程序,包括 Internet Explorer.单击“开始”.在“开始搜索”框中键入 inetcpl.cpl 命令,然后按回车键打开“Inetnet 选项”对话框. 2.单击“高级”选项卡 ...
重写系统自带tabbar出现的代理错误
【我的物联网成长记6】由浅入深了解NB-IoT
[摘要] 什么是NB-IoT?NB-IoT有什么优势?NB-IoT能做什么?本文将会从NB-IoT技术的发展历程,技术特点,通信协议,应用场景等方面为您全方面解读NB-IoT技术,了解NB-IoT的独 ...
jQuery基础之事件
jQuery基础之事件方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> <s ...

Vue增强