Vue增强

1. Vue事件

语法：使用v-on指令注册事件

<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>

简写方式：<标签 @事件句柄="表达式或者事件处理函数"></标签>

1 <div id="app">
2     {{num}}
3     <button v-on:click="num++">按钮1</button>
4     <button @click="num++">按钮2</button>
5     <button @click="add">按钮3</button>
6     <button @click="say('nice')">按钮4</button>
7 </div>
 1 <script>
 2     new Vue({
 3         el:"#app",
 4         data:{
 5             num:0
 6         },
 7         methods:{
 8             add(){
 9                 this.num++;
10             },
11             say(msg){
12                 console.log("放假真好！" + msg);
13             }
14         }
15     });
16 </script>

2. 计算属性

computed：计算一些复杂的表达式

 1 <body>
 2     <div id="app">
 3         {{birth}}
 4     </div>
 5     <script>
 6         new Vue({
 7             el:"#app",
 8             data:{
 9                 birthday:1529032123201
10             },
11             computed:{
12                 birth(){
13                     return new Date(this.birthday).getFullYear() + "-" + new Date(this.birthday).getMonth()
14                         + "-" +  new Date(this.birthday).getDay();
15                 }
16             }
17         });
18     </script>
19 </body>

3. watch监听值的变化

 1 <body>
 2     <div id="app">
 3         <input type="text" v-model="msg">
 4     </div>
 5     <script>
 6         new Vue({
 7             el:"#app",
 8             data:{
 9                 msg:""
10             },
11             watch:{
12                 //可以起监听的效果
13                 msg(newVal,oldVal){
14                     console.log("老值：" + oldVal);
15                     console.log("新值：" + newVal);
16                 }
17             }
18         });
19     </script>
20 </body>

4. 组件

4.1 什么是组件

组件是用来完成特定功能的一个自定义的HTML标签。

4.2 作用

组件是对特定功能代码（html、css、js）的封装，通过组件的名字可以重复利用该组件中的代码。

4.3 组件的分类

组件分为全局组件和局部组件。

　　全局组件：在所有vue实例中（在它所挂载元素下面有效）有效。

　　局部组件：在自己vue实例中（在它所挂载元素下面有效）有效。

4.3.1 全局组件

语法：

　　Vue.component("自定义标签的名字",{配置对象 })

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="node_modules/vue/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <mycomponent1></mycomponent1>
11         <mycomponent2></mycomponent2>
12     </div>
13     <hr>
14     <div id="app1">
15         <mycomponent1></mycomponent1>
16         <mycomponent2></mycomponent2>
17     </div>
18     <script>
19         Vue.component("mycomponent1",{
20             template:"<h1>今天天气真好！</h1>"
21         });
22         var templateConfig = {
23           template:"<h1>适合出去运动！</h1>"
24         };
25         Vue.component("mycomponent2",templateConfig);
26         new Vue({
27             el:"#app",
28             data:{}
29         });
30         new Vue({
31             el:"#app1",
32             data:{}
33         })
34     </script>
35 </body>
36 </html>

4.3.2 局部组件

特点：局部组件只能够在所挂载的标签中使用

 1 <div id="app">
 2     <mycomponent1></mycomponent1>
 3 </div>
 4 <hr>
 5 <div id="app1">
 6     <mycomponent1></mycomponent1> <!-- 不能使用 -->
 7 </div>
 8 <script>
 9     new Vue({
10         el:"#app",
11         data:{},
12         components:{
13             "mycomponent1":{
14                 template:"<h1>今天天气真好！</h1>"
15             }
16         }
17     });
18     new Vue({
19         el:"#app1",
20         data:{}
21     })
22 </script>

4.4.4 组件使用两种html模板

 1 <body>
 2     <div id="app">
 3         <mycomponent1></mycomponent1>
 4     </div>
 5     <!--<template id="mytemplate">
 6         <h1>template标签中的html！</h1>
 7     </template>-->
 8     <script type="text/tempalte" id="mytemplate">
 9         <h1>script标签中的html！</h1>
10     </script>
11     <script>
12         new Vue({
13             el:"#app",
14             data:{},
15             components:{
16                 "mycomponent1":{
17                     //(1)直接在组件写个template这个模块
18                     // template:"<h1>直接写在template模块中的哦</h1>"
19                     //(2)定义template标签，再引用
20                     //template:"#mytemplate"
21                     //(3)定义在script标签中，再引用
22                     template:"#mytemplate"
23                 }
24             }
25         });
26     </script>
27 </body>

4.4.5 组件中的数据必须是函数

 1 <body>
 2     <div id="app">
 3         <mycomponent1></mycomponent1>
 4     </div>
 5     <!-- 模板里面的内容 必须包含在一个根元素里面-->
 6     <template id="mytemplate">
 7         <div>
 8             <form>
 9                 {{name1}}<input type="text" name="username">
10             </form>
11         </div>
12     </template>
13     <!--
14         (1)如果要使用模板里面的数据,必须是函数的形式
15         (2)模板里面如果有多个标签,必须包含在一个根标签里面
16     -->
17     <script>
18         var templateConfig = {
19             template:"#mytemplate",
20             data(){
21                 return {name1:"用户名"};
22             }
23         };
24         Vue.component("mycomponent1",templateConfig);
25         new Vue({
26             el:"#app",
27             data:{}
28         });
29     </script>
30 </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代码

 1 <script>
 2     //先准备组件
 3     var index = Vue.component("index",{
 4         template:"<h1>首页</h1>"
 5     });
 6     var product = Vue.component("product",{
 7         template:"<h1>产品介绍</h1>"
 8     });
 9     var about = Vue.component("about",{
10         template:"<h1>关于我们</h1>"
11     });
12     var router = new VueRouter({
13         routes:[{
14             path:"/",//路由地址
15             component:index//路由对应的资源
16         },{
17             path:"/product",
18             component:product
19         },{
20             path:"/about",
21             component:about
22         }]
23     });
24     //把路由挂载到标签上面
25     new Vue({
26         el:"#app",
27         data:{},
28         router:router
29     });
30 </script>

(4) 在html中使用

1 <div id="app">
2     <router-link to="/">首页</router-link>
3     <router-link to="/product">产品介绍</router-link>
4     <router-link to="/about">关于我们</router-link>
5     <hr>
6     <!--渲染模板，渲染组件-->
7     <router-view></router-view>
8 </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 

1 var path = require("path");
2     module.exports = {
3     entry: './src/a.js',
4     output: {
5         path: path.resolve(__dirname, './dist'),
6         filename: 'bundle.js'
7     }
8 }

运行：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

 1 const path = require('path');
 2 //配置入口和出口
 3 module.exports = {
 4     entry: './src/a.js',//入口文件
 5     output: { //出口
 6         path: path.resolve(__dirname, 'dist'),
 7         filename: 'bundle.js'
 8     },module: {
 9         rules: [
10             {
11                 test: /\.css$/,     //匹配文件规则
12                 use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
13                 // webpack use的配置，是从右到左进行加载的
14             }
15         ]
16     }
17 };

(3) 在js文件里面引入css

1 var a ='aaa';
2 var b =require('./b.js');
3 require('../css/index.css')
4 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版本

1  "devDependencies": {
2     "css-loader": "^3.2.0",
3     "style-loader": "^1.0.1",
4     "webpack": "^3.10.0",
5     "webpack-dev-server": "^2.9.7"
6   }

(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        运行

 posted on 2019-12-03 01:15  wings丶xh  阅读(384)  评论(0)  编辑  收藏  举报