Vue加強

時間 2019-12-23

標籤 vue 加強简体版

原文原文鏈接

1. Vue事件

語法：使用v-on指令註冊事件css

<標籤 v-on:事件句柄="表達式或者事件處理函數"></標籤>html

簡寫方式：<標籤 @事件句柄="表達式或者事件處理函數"></標籤>前端

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：計算一些複雜的表達式vue

 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標籤。node

4.2 做用

組件是對特定功能代碼（html、css、js）的封裝，經過組件的名字能夠重複利用該組件中的代碼。webpack

4.3 組件的分類

組件分爲全局組件和局部組件。web

　　全局組件：在全部vue實例中（在它所掛載元素下面有效）有效。vue-router

　　局部組件：在本身vue實例中（在它所掛載元素下面有效）有效。npm

4.3.1 全局組件

語法：json

　　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

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