【融職培訓】Web前端學習第7章 Vue基礎教程1 Vue概述

時間 2020-07-18

標籤融職培訓 web 前端學習 vue 基礎教程概述欄目 HTML 简体版

原文原文鏈接

1、vue概述

目前前端開發最火熱的三大框架分別是React、Angular和Vue。html

Angular是谷歌公司開發的前端框架，在國外的用戶比國內用戶多不少，國內始終是不溫不火的狀態。前端

React和Vue的國內用戶比較多。多是由於Vue簡單易用，並且是由華人開發，因此Vue在國內的受衆很是多。從本章咱們開始學習Vue的相關知識。vue

使用vue仍是jQuery

jQuery仍然有本身的優點，例如咱們製做一些相對簡單的網站，或者是網站的部分活動頁面，使用jQuery仍然能夠提高開發效率。可是面對稍微具有規模的web應用，vue絕對是更好的選擇。jquery

2、第一個Vue項目

有兩種方法能夠在本身的項目中引入Vue：web

第一種是像引入jQuery同樣，引入Vue.js文件。
第二種是使用Node環境，構建基於Vue的web項目。

在真實的項目開發中，都會使用第二種開發方式，本節咱們先以第一種-引入Vue.js文件方式起步。前端框架

 1 <body>
 2     <div id="app">
 3         {{message}}
 4     </div>
 5     <script src="vue.js"></script>
 6     <script>
 7         new Vue({
 8             data:{
 9                 message:"hello world"
10             }
11         }).$mount("#app")
12     </script>
13 </body>

咱們再來看一下上面的代碼，它包含了一個vue程序最基本的結構：app

首先，咱們在html中定義了一個id爲app的容器，而後咱們在js建立一個Vue的實例，經過el屬性指定這個容器，從而實現讓js接管html.框架

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：函數

1 var vm = new Vue({
2   // 選項
3 })

在構造函數Vue中，咱們須要傳入一個【選項對象】來進一步描述vue實例的行爲。
$mount方法，將Vue掛載到html。
el屬性，做用於$mount相同。
data屬性，在Vue的實例之下添加屬性。
{{}}能夠輸入一個表達式，也能夠直接獲取Vue實例的屬性。

3、綁定屬性

上面的例子中，咱們將一個data中的message屬性經過雙花括號顯示在文本節點之中，除此以外，咱們還能夠將數據綁定成爲一個html屬性，示例代碼以下所示。post

 1 <body>
 2     <div id="app">
 3         <h1 v-bind:title="message">鼠標停留在這個H1標籤上，能夠看到title</h1>
 4         <h1 :title="message">鼠標停留在這個H1標籤上，能夠看到title</h1>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             data:{
10                 message:"hello world"
11             }
12         }).$mount("#app")
13     </script>
14 </body>

使用【v-bind:屬性名】和【:屬性名】兩種方式均可以綁定屬性，在實際開發中，咱們一般使用簡寫。

4、綁定事件

在【選項對象】中能夠設置methods屬性爲vue的示例添加方法，這些方法我已直接被調用，也能夠綁定爲事件。綁定事件的方法以下所示：

 1 <body>
 2     <div id="app">
 3         <button v-on:click="fun">按鈕</button>
 4         <button @click="fun">按鈕</button>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             methods:{
10                 fun(){
11                     alert("hello world")
12                 }
13             }
14         }).$mount("#app")
15     </script>
16 </body>

使用【v-on:事件類型】和【@事件類型】兩種方式均可覺得元素綁定事件，在實際開發中，一般使用簡寫。

methods屬性中定義的方法內部，可使用this獲取到vue的示例，也就是說咱們能夠進一步經過this獲取到data中的屬性，並且能夠經過賦值的方式改變data中的屬性值。

 1 <body>
 2     <div id="app">
 3         <h1>{{title}}</h1>
 4         <button @click="changeTitle">改變標題</button>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             data:{
10                 title:"hello world"
11             },
12             methods:{
13                 changeTitle(){
14                     this.title = "hello Vue";
15                 }
16             }
17         }).$mount("#app")
18     </script>
19 </body>

在上面的例子中，咱們實現了經過按鈕的點擊事件改變h1中的文本內容。

事件修飾符詳解

.prevent:阻止元素的默認行爲
.stop:阻止事件冒泡
.once:只觸發一次事件

 1 <!-- 阻止元素默認行爲 -->
 2 <div id="app">
 3     <form @submit.prevent="postData">
 4         <input type="submit">
 5     </form>
 6 </div>
 7 <script src="js/vue.js"></script>
 8 <script>
 9     //jquery：操做DOM
10     const vue = new Vue({
11         methods:{
12             postData(){
13                 console.log("提交數據");
14             }
15         }
16     });
17     vue.$mount("#app")
18 </script>
19 
20 <!-- 阻止事件冒泡 -->
21 <div id="app">
22     <button @click.once="test">test</button>
23 </div>
24 <script src="js/vue.js"></script>
25 <script>
26     const vue = new Vue({
27         methods:{
28             test(){
29                 console.log("提交數據");
30             }
31         }
32     });
33     vue.$mount("#app")
34 </script>