Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))

更新時(shí)間：2022年04月06日 14:40:15 作者：Mr.聶

這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。他自身不是一個(gè)全能框架——只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。在與相關(guān)工具和支持庫(kù)一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。他是基于AnjularJs 編寫的，所以和前者的語(yǔ)法特別相似，卻又使用簡(jiǎn)潔了很多。

那今天，我就給大家詳細(xì)的說(shuō)道說(shuō)道這個(gè) Vue.js ，以下是我們這次詳解的目錄，朋友們可以根據(jù)自己的情況選擇性閱讀，所有操作均附有代碼實(shí)現(xiàn)。

1. Vue.js 如何綁定到頁(yè)面中，使用他的功能。

2. Vue 實(shí)例化對(duì)象的生命周期。

3. Vue 的所有數(shù)據(jù)綁定指令

那接下來(lái)，我們就開始今天的介紹啦！

1. Vue.js 如何綁定到頁(yè)面中，使用他的功能。

先看下面的一段代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body> 
 <button id="app1" onclick="app1.func()">我是app1，點(diǎn)我</button>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1",
  data:{
  message:"我在app1中顯示出來(lái)了嗎？",
  func:function(){
   alert(this.message);
  }
  }
 });
 console.log(app1.$data.message); 

 //這個(gè)要知道哈，app1就是一個(gè)變量，一個(gè)對(duì)象類型的變量，鏈?zhǔn)秸Z(yǔ)法直接用即可
 
 </script>
</html>

效果如下：

上述代碼就是點(diǎn)擊按鈕有彈窗，下面解析一下這段代碼。

var app1= new Vue({
 el:"#app1",
 data:{
 message:"我在app1中顯示出來(lái)了嗎？",
 func:function(){
  alert(this.message);
  }
 }
 });
console.log(app1.$data.message);

通過(guò)Vue.js的構(gòu)造函數(shù)實(shí)例化出一個(gè)根實(shí)例 app1 ，說(shuō)白了，這就是我們面向?qū)ο蟮膶?duì)象的實(shí)例化，直接 new 一個(gè)對(duì)象。

　　el:"#app1", 這是在掛載我們實(shí)例化對(duì)象的元素節(jié)點(diǎn)，就是這個(gè)app1 對(duì)象作用域是那一個(gè)標(biāo)簽里面的。這里可以是 id、class、tagname。但是主要還是用id，因?yàn)樗奈ㄒ恍浴?/p>

　　data:{} 是定義這個(gè)對(duì)象的變量和方法，注意所有在和 app1 有關(guān)聯(lián)的變量、方法都必須在data中聲明。

注意：

(1)作用域。js5 只有函數(shù)作用域，所以 data 中的函數(shù)如果想調(diào)用變量，就必須通過(guò) this. 調(diào)用，或者直接通過(guò)對(duì)象名調(diào)用。

(2)外部調(diào)用。app1.$data.message；在js中直接調(diào)用 vue 對(duì)象的屬性、方法時(shí)，需要鏈?zhǔn)秸Z(yǔ)法，一層層點(diǎn)出來(lái)，這里用 $data ，主要還是和js的變量作區(qū)別

(3)與HTML代碼的綁定。這里我是通過(guò) js 的onclick直接綁定的，當(dāng)然 vue 有自己的事件綁定，這里暫且不講，如果用 js 的行內(nèi)綁定，注意需要帶對(duì)象名。這就是純 OOP思想了。相信大家對(duì)面向?qū)ο笠膊荒吧?，如果真的不知道是啥玩意的，趕緊百度學(xué)去。

以上就是最最最最最最.....基礎(chǔ)的使用 vue 的方法了。

2. Vue 實(shí)例化對(duì)象的生命周期。

接下來(lái)，我們說(shuō)一下，一個(gè)實(shí)例化出來(lái)的對(duì)象，他的生命周期是啥樣的，要經(jīng)歷那些階段。請(qǐng)看下面一段代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>

 <div id="container">我的聲明周期，大家看吧！</div>
 
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">

 //以下代碼時(shí)顯示vm整個(gè)生命周期的流程
 var vm = new Vue({
  el: "#container",
  data: {
  test : 'hello world'
  },
  beforeCreate: function(){
  console.log(this);
  showData('創(chuàng)建vue實(shí)例前',this);
  },
  created: function(){
  showData('創(chuàng)建vue實(shí)例后',this);
  },
  beforeMount:function(){
  showData('掛載到dom前',this);
  },
  mounted: function(){
  showData('掛載到dom后',this);
  },
  beforeUpdate:function(){
  showData('數(shù)據(jù)變化更新前',this);
  },
  updated:function(){
  showData('數(shù)據(jù)變化更新后',this);
  },
  beforeDestroy:function(){
  vm.test ="3333";
  showData('vue實(shí)例銷毀前',this);
  },
  destroyed:function(){
  showData('vue實(shí)例銷毀后',this);
  }
 
 });
 function realDom(){
  console.log('真實(shí)dom結(jié)構(gòu)：' + document.getElementById('container').innerHTML);
 }
 function showData(process,obj){
  console.log(process);
  console.log('data 數(shù)據(jù)：' + obj.test)
  console.log('掛載的對(duì)象：')
  console.log(obj.$el)
  realDom();
  console.log('------------------')
  console.log('------------------')
 }
 
 </script>
</html>

那接下來(lái)看看效果圖：

通過(guò)控制臺(tái)的打印效果可以看出來(lái)，實(shí)例化 vue 對(duì)象大致分為創(chuàng)建vue實(shí)例、掛載到dom、數(shù)據(jù)變化更新、vue實(shí)例銷毀 4個(gè)階段，，注意每個(gè)階段都有對(duì)應(yīng)的鉤子，我們可以通過(guò)對(duì)這些鉤子進(jìn)行操作，達(dá)成一些功能。雖然初學(xué)者用不太上，但是提前了解一下還是好的，到時(shí)候碰到實(shí)際功能要能想得到生命周期的鉤子。　　

3. Vue 的所有數(shù)據(jù)綁定指令

　　那現(xiàn)在我們就總結(jié)一下 vue 的最大亮點(diǎn)，各種靈活的數(shù)據(jù)綁定方法。這里主要列舉實(shí)例詳解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

（1）首先是 {{}} 、 v-once 、 v-html 的用法，請(qǐng)看下面的代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>數(shù)據(jù)綁定篇</title>
 </head>
 <body>
 <!--
  數(shù)據(jù)綁定篇
 -->
 <div id="app1">
<!--1. {{}} v-once v-html-->
  <!--Mustache 標(biāo)簽，也就是雙大括號(hào),刷新頁(yè)面時(shí)會(huì)顯示出雙大括號(hào)-->
  <button onclick="app1.func()">點(diǎn)我，改變變量message的值</button>
  <br /><br />
  <!--即時(shí)綁定，div的內(nèi)容隨變量變化而變化的，綁定內(nèi)容作純文本處理-->
  <!--雙大括號(hào)里邊也可以寫表達(dá)式，和AngularJs一樣的-->
  <div>{{message}}</div><br />
  <!--只綁定一次，整個(gè)div的所有綁定數(shù)據(jù)，都只會(huì)加載一次，再更新就不會(huì)變了-->
  <div v-once>{{message}}</div><br />
  <!--雙大括號(hào)只能當(dāng)純文本顯示，v-html 可以直接綁定HTML標(biāo)簽的-->
  <div v-html="h1"></div><br />
 </div> 
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1",  //我們實(shí)例化的 app1 的掛載的 元素節(jié)點(diǎn)，一般用 id，class，或者tagname也可以，但是多了會(huì)沖突
  data:{
  message:"我是變量message的內(nèi)容！",
  h1:"<h1 style='color: fuchsia;'>我是h1標(biāo)簽</h1>", //注意單引號(hào)
  //message改變函數(shù)
  func:function(){
   if (this.message == "我是變量message的內(nèi)容！") {
   this.message = "message的內(nèi)容改變了！";
   }else{
   this.message = "我是變量message的內(nèi)容！";
   }
  }
 
 </script>
</html>

然后看一下效果：

還是分析一下這個(gè)小demo。

　　<div>{{message}}</div> Mustache 標(biāo)簽，也就是雙大括號(hào),他和 AnjularJs 的雙大括號(hào)完全相同，就是直接將數(shù)據(jù)動(dòng)態(tài)綁定到標(biāo)簽中，當(dāng)變量發(fā)生變化的時(shí)候，標(biāo)簽內(nèi)容也是改變，上大括號(hào)里面也是可以寫表達(dá)式的。上述代碼是做了一個(gè) 在button中點(diǎn)擊改變變量message的值，然后通過(guò)數(shù)據(jù)綁定使div的text即時(shí)變化。

　　<div v-once>{{message}}</div> 他也是數(shù)據(jù)綁定，但是只綁定一次。要注意 v-once是加載div上的，所以整個(gè)div的所有綁定數(shù)據(jù)，都只會(huì)加載一次，再更新就不會(huì)變了，所以點(diǎn)擊 button時(shí)，第二個(gè)div的數(shù)據(jù)并沒(méi)有發(fā)生改變。

　　<div v-html="h1"></div> 是綁定HTML標(biāo)簽，注意他可以直接綁定 HTML模板，但是這一堆HTML標(biāo)簽不能是多層嵌套的。什么意思呢，就是你之間綁定一段標(biāo)簽可以，綁定一個(gè)模板也可以，但是如果綁定一個(gè)模板，那這個(gè)模板內(nèi)部不能再嵌套模板了。否則無(wú)法渲染的。上述代碼就是直接導(dǎo)入了一個(gè)加了行內(nèi)樣式的h1標(biāo)簽，功能十分強(qiáng)大，比直接操作dom節(jié)點(diǎn)強(qiáng)太多了，效率是幾何倍的增長(zhǎng)。

（2）其次是 v-bind

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>數(shù)據(jù)綁定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  數(shù)據(jù)綁定篇
 -->
 <div id="app1">
<!--2. v-bind--> 
  <!--v-bind 他是專門用來(lái)綁定屬性的 ，主要用來(lái)操作元素的 class 列表和它的內(nèi)聯(lián)樣式-->
  <!--這個(gè)和用 js 直接操作dom節(jié)點(diǎn)功能一樣，不過(guò)簡(jiǎn)單特別多-->
  <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>
  <!--還可以直接綁定更改 class-->  
  <div v-bind:class="myClass" onclick="app1.func2()"></div>
  -------------------------------------------------------------------------------------
  <div class="img" style="width: 100px;height: 100px;">
  <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/>
  </div>
  
 </div>
 
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1", 
  data:{
  myColor:"blue",
  myWidth:100,
  myHeight:100,
  myClass:"aaa",
  mySrc:"img/2.png",
  func1:function(){
   if (this.myColor == "blue") {
   this.myColor = "red";
   this.myWidth = 50,
   this.myHeight = 50
   }else{
   this.myColor = "blue";
   this.myWidth = 100,
   this.myHeight = 100
   }
  },
  func2:function(){
   if (this.myClass == "aaa") {
   this.myClass = "bbb";
   }else{
   this.myClass = "aaa";
   }
  },
  func3:function(){
   if (this.mySrc == "img/2.png") {
   this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
   }else{
   this.mySrc = "img/2.png";
   }
  }
  }
 });
 
 </script>
</html>

然后看一下效果：

那我們解析一下上面的代碼。

　　v-bind 他是專門用來(lái)綁定屬性的，主要用來(lái)操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這一點(diǎn)和AnjularJs的 ng-bind 是完全不同的，要注意?。?！

　　<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> 這是在直接綁定行內(nèi)樣式style。然后通過(guò)綁定點(diǎn)擊函數(shù)，為各個(gè)比那兩賦值，達(dá)到點(diǎn)擊更改div樣式的目的。

　　<div v-bind:class="myClass" onclick="app1.func2()"></div> 這個(gè)是直接綁定修改 class類名，在頁(yè)內(nèi)樣式表中有我定義的 .aaa 和 .bbb 兩個(gè)類名，通過(guò)動(dòng)態(tài)修改class名修改樣式，這也比 JQuery 直接操作dom節(jié)點(diǎn)快捷不少。

　　<img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 這是直接綁定屬性，動(dòng)態(tài)修改 img 的src 屬性。達(dá)到點(diǎn)擊圖像顯示不同的圖像的效果。

這里要特別強(qiáng)調(diào)一下，v-bind 直接綁定的是屬性，而不是樣式，對(duì)于 img ，他的src是屬性，但是對(duì)于 div ，width 啥的是樣式，不是屬性，所以 v-bind:width="100+'px'" 不好使.

　　至于 v-bind 屬性綁定，也就常用用法也就這么多了。

（3） v-model

　　用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。v-model 并不關(guān)心表單控件初始化所生成的值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步

下面我們看一段代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>數(shù)據(jù)綁定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  數(shù)據(jù)綁定篇
 -->
 <div id="app1">
<!--3. v-model--> 
  <input type="text" v-model="myText" placeholder="請(qǐng)輸入："/>
  <div >{{ myText }}</div><br /><br />
  -------------------------------------------------------------------------------------
  <!--綁定單選按鈕-->
  <input type="radio" id="one" name="aa" value="男" v-model="picked">
  <label for="one">男</label>
  <br>
  <input type="radio" id="two" name="aa" value="女" v-model="picked">
  <label for="two">女</label>
  <br>
  <span>您選擇了: {{ picked }}</span>
  <br><br>
  -------------------------------------------------------------------------------------
  <!--綁定復(fù)選按鈕-->
  <div onclick="app1.funcCheckedNames()">
  <input type="checkbox" id="jack" value="好帥！" v-model="checkedNames">
  <label for="jack">好帥！</label>
  <input type="checkbox" id="john" value="你是我的男神！" v-model="checkedNames">
  <label for="john">你是我的男神！</label>
  <input type="checkbox" id="mike" value="我愛(ài)你，飛哥！" v-model="checkedNames">
  <label for="mike">我愛(ài)你，飛哥！</label>
  </div>
  <br>
  <span>您對(duì)飛哥的評(píng)價(jià): {{ names }}</span><br><br>
  --------------------------------------------------------------------------
  <!--綁定單選列表--><br>
  <select v-model="selected1"> 
  <option>親飛哥</option> 
  <option>向飛哥表白</option> 
  <option>請(qǐng)飛哥吃飯</option>
  </select><br>
  <span>真心話大冒險(xiǎn): {{ selected1 }}</span><br><br>
  ------------------------------------------------------------------------------
  
  <div onclick="app1.funcselected22()">
  <select v-model="selected2" multiple> 
   <option>親親</option> 
   <option>抱抱</option> 
   <option>舉高高</option>
  </select>
  </div><br>
  <span>你想和飛哥偷偷干些啥: {{ selected22 }}</span><br>
  
 </div>
 
 
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1",
  data:{
  myText:"",
  picked:"",
  selected1:"",
  //這是復(fù)選列表的變量，函數(shù)
  selected2:[],
  selected22:"",
  funcselected22:function(){
   this.selected22 = this.selected2.join("　");
  },
  //復(fù)選框的函數(shù),及其相關(guān)變量
  checkedNames:[],
  names:"",
  funcCheckedNames:function(){
   this.names = this.checkedNames.join("　");
  }
 </script>
</html>

然后看一下效果：

然后解析一下這段代碼。這里就不一一詳細(xì)解釋代碼了，挑幾個(gè)典型的詳解，其他的便很簡(jiǎn)單了。

我們就以多選按鈕為例：　　

<div onclick="app1.funcCheckedNames()">
 <input type="checkbox" id="jack" value="好帥！" v-model="checkedNames">
 <label for="jack">好帥！</label>
 <input type="checkbox" id="john" value="你是我的男神！" v-model="checkedNames">
 <label for="john">你是我的男神！</label>
 <input type="checkbox" id="mike" value="我愛(ài)你，飛哥！" v-model="checkedNames">
 <label for="mike">我愛(ài)你，飛哥！</label>
 </div>

//這是復(fù)選列表的變量，函數(shù)
 selected2:[],
 selected22:"",
 funcselected22:function(){
 this.selected22 = this.selected2.join("　");
 },

這里要強(qiáng)調(diào)一下，v-model 動(dòng)態(tài)綁定這種多選框之類的，會(huì)以數(shù)組的形式存取，所以，我們用 selected2:[], 變量接收選擇框的數(shù)據(jù)，但是我們又不能直接用雙大括號(hào)顯示數(shù)據(jù)，朋友們可以試驗(yàn)一下，雙大括號(hào)是純文本顯示，他會(huì)把整個(gè)數(shù)組的中括號(hào)，引號(hào)，逗號(hào)都顯示出來(lái)，太丑了。所以這里，我用了JQuery的數(shù)組分割為字符串的函數(shù) join("　")，把選中的數(shù)據(jù)分割成字符串，再用一個(gè)字符串類型的變量接收數(shù)據(jù)，這樣打印出來(lái)就好多了。注意，這里 join("　") 我用的分隔符是空白字符，它占一個(gè)漢字的空間，但是不會(huì)顯示出來(lái)。

　　好啦，以上這些就是Vue.js 的基礎(chǔ)內(nèi)容，至于后續(xù)的各種渲染，以及組件 API等等，等我們下周再分享。如果感覺(jué)我的博客還不錯(cuò)請(qǐng)記得關(guān)注我，之前的博客也有精品吆！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: