Vue基礎系列（一）——Vue入坑第一篇

時間 2020-05-22

標籤 vue 基礎系列一篇简体版

原文原文鏈接

寫在前面的話：javascript

文章是我的學習過程當中的總結，爲方便之後回頭在學習。css

文章中會參考官方文檔和其餘的一些文章，示例均爲親自編寫和實踐，如有寫的不對的地方歡迎你們和我一塊兒交流。html

VUE基礎系列目錄

《VUE基礎系列（一）——VUE入坑第一篇》vue

《VUE基礎系列（二）——VUE中的methods屬性》java

《VUE基礎系列（三）——VUE模板中的數據綁定語法》vue-cli

《VUE基礎系列（四）——VUE中的指令（上）》npm

《VUE基礎系列（五）——VUE中的指令（中）》api

一.前言

本篇做爲vue入門的一篇總結，目地在使用vue一些簡單的特性去打開vue的學習之門。dom

二.搭建vue開發環境

　　搭建vue的開發環境通常有兩種方式，一種是使用vue-cli腳手架，這個須要具有Node的一些基礎知識；第二種方式是在咱們編寫的html頁面中引入vue.js文件，就可使用vue了。後續vue基礎的學習會用使用第二種方式搭建vue的開發環境。ide

　　注意：後面引入的vue文件都是基於vue.2x版本的，大多數的知識點和特性的介紹都是參考官方文檔。官方文檔地址：https://vuejs.bootcss.com/v2/guide/

三.開始使用vue

1.建立項目目錄

2.在html中引入vue.js

#在index.html引入vue.js

　　在html中直接引入vue.js也有兩種方式，一種是直接將文件下載到本地，一種是引用cdn上面的文件。此處咱們使用cnd的方式引入vue.js。

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初識vue入門第一課</title> <!-- 按照官方文檔，引入開發環境的vue.js，準確的版本爲 v2.6.10 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> 　　 </body> </html>

3.建立第一個vue實例

　　建立vue實例須要經過構造函數建立的。

var vm = new Vue({ });

　　使用構造函數建立vue實例時，咱們能夠傳入一個包含多個鍵值對的字典對象，完整的鍵值對配置能夠參考官方文檔。後面的部分咱們只總結了最基礎幾個的配置項。

4.DOM-el配置項

#el配置項的數據類型

　　el配置項的值能夠是兩種類型，一種是字符串，一種是HTMLElement。當是字符串時，它表示一個css選擇器；當是HTMLElement時，它表示文檔中的某個元素。

#基本語法

var vm = new Vue({ el:'css選擇器' | HTMLElement, });

#做用

　　它主要的做用是將vue實例掛載到文檔中的DOM節點上，掛載完成後的DOM節點就是一個vue容器，在這個容器裏咱們就可使用vue的一些特性；

　　備註：在vue構造函數外部，可使用vm.$el去訪問掛載的這個DOM節點。

#示例

下面咱們寫一個示例體驗一下。

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初識vue入門第一課</title> <!-- 按照官方文檔，引入開發環境的vue.js，準確的版本爲 v2.6.10 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box' }); //在構造函數外部訪問vue掛載點dom節點 var vueEle = vm.$el; console.log(vueEle); </script> </body> </html>

#打印結果

5.數據-data配置項

#data配置項的數據類型

　　data的數據類型一樣是兩種：javascript原生的Object類型或者一個返回原生對象的函數。

　　函數類型通常用於在定義組件的時候，由於組件是會被複用的，這樣每個複用組件的實例都會擁有這個data數據的副本，而不會互相影響。

#基本語法

var vm = new Vue({
 data: {
 屬性名: 屬性值 
 },
 });

#做用

　　它主要是給vue示例提供數據支撐。

　　備註：在vue構造函數外部，可使用vm.$data訪問這個數據。

#示例

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>初識vue入門第一課</title>
  <!-- 按照官方文檔，引入開發環境的vue.js，準確的版本爲 v2.6.10 -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="box">
    
  </div>
  <script type="text/javascript">
    var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, } }); //在vue構造函數外部，可使用訪問數據 var name = vm.$data.name; console.log(name); // 'todo'

    var age = vm.$data.age; console.log(age); // 20
  </script>
</body>
</html>vm.$data

6.vue模板語法渲染數據-文本插值

　　上面咱們介紹瞭如何在vue實例中定義數據，那麼如何將vue實例中的數據展現到咱們的頁面中呢，這就須要使用vue的模板渲染語法，模板渲染語法包含不少種形式，這裏咱們只講雙花括號形式的文本插值。

　　雙花括號的文本插值法，就是將vue中的數據以文本的形式解析到html中。在html中直接訪問vue實例裏data對象中的屬性便可獲取到對應的值。並且當data對象中的屬性值發生變化，模板中插入的值也會自動發生變化。

#基本語法

{{ 變量名 }}

#示例

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初識vue入門第一課</title> <!-- 按照官方文檔，引入開發環境的vue.js，準確的版本爲 v2.6.10 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <!-- 使用雙花括號將vue中的數據以文本的形式展現 --> <h1>{{name}}</h1> <h1>{{age}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, } }); </script> </body> </html>