2. 程式人生 > >Vuejs——（1）入門（單向繫結、雙向繫結、列表渲染、響應函式）

Vuejs——（1）入門（單向繫結、雙向繫結、列表渲染、響應函式）

阿新 • • 發佈：2019-01-14

參照連結：

http://cn.vuejs.org/guide/index.html

【起步】部分

本文是在其基礎上進行補全和更詳細的探尋

嗯，根據朋友的建議，我改投vue陣營了

（一）單向繫結

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     {{ message }}  
  3. </div>  
  4. <script>  
  5.     new Vue({  
  6.         el: '#app',  
  7.         data: {  
  8.             message: 'Hello Vue.js!'
  9.         }  
  10.     })  
  11. </script>  

①el應該表示繫結的意思，繫結id=app這個標籤

也可以改為以下這樣：

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div class="app">  
  2.     {{ message }}  
  3. </div>  

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. el: '.app',  

一樣有效。

但如果是多個的話，只對第一個有效：

  1. <divclass="app">
  2.     {{ message }}  
  3. </
    div>
  4. <divclass="app">
  5.     {{ message }}  
  6. </div>

Hello Vue.js!

{{ message }}


②data裡的message變數，表示{{message}的值

（二）雙向繫結

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     {{ message }}  
  3.     <br/>  
  4.     <input v-model="message"/>  
  5. </div>  
  6. <script>  
  7.     new Vue({  
  8.         el: '#app',  
  9.         data: {  
  10.             message: 'Hello Vue.js!'
  11.         }  
  12.     })  
  13. </script>  

效果是：

①input輸入框裡有初始值，值是data裡的message屬性的值；

②修改輸入框的值可以影響外面的值；

（三）函式返回值

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     {{ message() }}  
  3.     <br/>  
  4.     <input v-model="message()"/>  
  5. </div>  
  6. <script>  
  7.     new Vue({  
  8.         el: '#app',  
  9.         data: {  
  10.             message: function () {  
  11.                 return'Hello Vue.js!';  
  12.             }  
  13.         }  
  14.     })  
  15. </script>  

效果：

①輸出值也是message的返回值；

②缺點：失去雙向繫結！

（四）渲染列表

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     <ul>  
  3.         <li v-for="list in todos">  
  4.             {{list.text}}  
  5.         </li>  
  6.     </ul>  
  7. </div>  
  8. <script>  
  9.     new Vue({  
  10.         el: '#app',  
  11.         data: {  
  12.             todos: [  
  13.                 {text: "1st"},  
  14.                 {text: "2nd"},  
  15.                 {text: "3rd"}  
  16.             ]  
  17.         }  
  18.     })  
  19. </script>  

v-for裡的list，類似for in裡面的i，

個人認為，

①可以把list in todos，理解為for list in todos

②然後把下一行的list.text理解為 todos[list].text

然後這個v-for標籤在哪裡，就是以他為單位進行多次複製。

（五）處理使用者輸入

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     <input v-model="message">  
  3.     <input type="button" value="值+1" v-on:click="add"/>  
  4.     <input type="button" value="值-1" v-on:click="minus"/>  
  5.     <input type="button" value="重置歸零" v-on:click="reset"/>  
  6. </div>  
  7. <script>  
  8.     new Vue({  
  9.         el: '#app',  
  10.         data: {  
  11.             message: 1  
  12.         },  
  13.         methods: {  
  14.             add: function () {  
  15.                 this.message++; //這步要加this才能正確獲取到值
  16.             },  
  17.             minus: function () {  
  18.                 this.message--;  
  19.             },  
  20.             reset: function () {  
  21.                 this.message = 0;  
  22.             }  
  23.         }  
  24.     })  
  25. </script>  

效果：

①對輸入框的值，點選一次add按鈕，則值+1；

②如果不能加，則像正常表示式加錯了那樣返回結果，例如NaN；

③data裡的message的值，是初始值；

④methods裡是函式集合，他們之間用逗號分隔；

⑤獲取值的時候，要加上this，例如this.message獲取的是message的值。

（六）多功能

[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
  1. <div id="app">  
  2.     <input v-model="val" v-on:keypress.enter="addToList">  
  3.     <ul>  
  4.         <li v-for="val in values">  
  5.             {{val.val}}  
  6.             <input type="button" value="刪除" v-on:click="removeList($index)"/>  
  7.         </li>  
  8.     </ul>  
  9. </div>  
  10. <script>  
  11.     new Vue({  
  12.         el: '#app',  
  13.         data: {  
  14.             val: "1",  
  15.             values: []  
  16.         },  
  17.         methods: {  
  18.             addToList: function () {  
  19.                 var val = parseInt(this.val.trim());  //注意，因為當上面的val是字串型別的時候，才能用trim()，如果是數字型別，則用this.val
  20.                 if (val) {  
  21.                     this

    相關推薦

    Vuejs——（1）入門（單向繫結、雙向繫結、列表渲染、響應函式）

    參照連結： http://cn.vuejs.org/guide/index.html 【起步】部分 本文是在其基礎上進行補全和更詳細的探尋 嗯，根據朋友的建議，我改投vue陣營了 （一）單向繫結 [javascript] view plain copy <div id

    git學習筆記1-剛剛入門（霜之小刀）

    git學習筆記1-剛剛入門（霜之小刀） 歡迎轉載和引用，若有問題請聯絡 若有疑問，請聯絡 Email : [email protected] QQ:2279557541 1、git中檔案的狀態 這個一開始我都挺難理解的，因為我以前是使用sv

    SpringMVC框架（1）之（1.2 入門程式—SpringMVC與Mybatis整合）

    一、整合思路： 1. jar包： mybatis包、spring包、mybatis和spring整合包、資料庫驅動包、日誌包； 2. Spring管理： SpringMVC中編寫的 Handler（即Controller）、Mybatis的 SqlSessionFactory

    SpringMVC框架（1）之（1.2 入門程式—處理器對映器和處理器介面卡（註解方式））

    1.DispatcherServlet載入時會預設載入 DispatcherServlet.properties 檔案，目的是為了載入裡面的處理器對映器、處理器介面卡、檢視解析器等各個元件；（所以 springmvc.xml 中 兩種處理器介面卡、兩種處理器介面卡、檢視解析器都可以省略；）

    SpringMVC框架（1）之（1.2 入門程式—常用的處理器對映器和處理器介面卡）

    1. 程式結構： 建立一個Web專案，匯入 Spring的 jar包： 使用 Spring3.2.0（帶SpringMVC模組） web.xml 檔案中配置 DispatcherServlet前端控制器 （DispatcherServlet作為 springmvc的中央排程

    二叉索引樹（樹狀數組）入門（一）

    太差 數據結構 pri ret 進行 中一 class 這就是 說過 二叉索引樹，即樹狀數組，被某神犇稱之為是最漂亮的數據結構，所以蒟蒻北籬也去學習了一下傳說中的樹狀數組。 限於蒟蒻北籬的語言表達能力太差（其實是懶），於是引用了度娘的一段對樹狀數組的解釋 樹狀數組(Bin

    VUE如何提交Table資料（解決相同屬性多條資料不能雙向繫結的問題）

    類似這樣的： 解決方案：用陣列形式提交 使用v-for來遍歷渲染，提交過去的就已經是每行的值組成陣列 1.前端程式碼 <table class="table"> <thead> <tr> <th>box</t

    【工作筆記】ElasticSearch從零開始學（二）—— 入門（搜尋）

    建立一個員工目錄 假設我們剛好在Megacorp工作，這時人力資源部門出於某種目的需要讓我們建立一個員工目錄，這個目錄用於促進人文關懷和用於實時協同工作，所以它有以下不同的需求 資料能夠包含多個值的標籤、數字和純文字。 檢索任何員工的所有資訊。 支援結構化

    【一起來學React】- React基礎知識補充（列表渲染、條件渲染、JSX語法）

    本章節為react基礎知識的補充，我今天看了一下，發現react的基礎知識大致能通過我之前的幾張來講解的差不多了，但是不夠細，還有一些，只講了一個概念，所以這一章節來進行一個補充吧！ 列表渲染 react的列表渲染不和vue或者ng一樣，有指令的，react完全靠j

    工廠模式：封裝物件的建立（一、在基類中定義一個靜態成員函式）

    當我們發現需要新增新的型別到一個系統中時，最明智的首要步驟就是用多型機制為這些新型別建立一個共同的介面。 用這種方法可以將系統中多餘的程式碼與新新增的特定型別的程式碼分開。新型別的新增並不會攪亂已存在的程式碼...或者至少看上去如此。 起初它似乎只需要在繼承新類的地方修改程

    Vue.js單向繫結和雙向繫結例項

    1、單向繫結 單向資料繫結的實現思路： ①　所有資料只有一份 ②　一旦資料變化，就去更新頁面(只有data–>DOM，沒有DOM–>data) ③　若使用者在頁面上做了更新，就手動收集(雙向繫結是自動收集)，合併到原有的資料中。 <!DOCTYPE html&

    Vue單向繫結與雙向繫結解析

    在講繫結之前我們要理解MVVM框架,這對我們理解單向以及雙向繫結有很大的幫助. 一 MVVM框架 M : model(模型) 資料儲存 V : view(檢視) 使用者介面 VM : ViewModel 把Model和View關聯起來,ViewM

    Vue.js快速上手｜單向繫結與雙向繫結

     概述 Vue.js 最顯著的特點就是響應式和資料驅動，也就是將Model和View進行單向繫結或者雙向繫結。單向繫結：把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Mod

    vue的單向資料流和雙向繫結解釋

    Vue 在不同元件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。資料只能從父元件到子元件或是反向。 雙向繫結v-model是同時實現bind attribute(value)和Listen

    angular,vue,react的基本語法—雙向資料繫結、條件渲染、列表渲染、angular小案例

    基本語法： 1、雙向資料繫結 vue 指令：v-model="msg" react constructor(){ this.state{ msg:"雙向資料繫結" } render(){ <input type="text" value={this.state

    富文字編輯器TinyMCE在vue2.x中的使用以及動態繫結(解決雙向繫結後游標跳到最左側問題)

    寫在前面 專案重構老管理後臺，使用vue作為前端框架，對於一直使用jsp+jquery開發管理後臺的我還是挺頭疼的… 之後在vue官網學習了一下基礎知識外加向前端同事討教，粗略瞭解了vue的使用，如果文中有錯誤地方請多多包涵。 由於不是專業的前端開發，所以並沒有

    vue元件系列6、雙向繫結方法

    開發十年，就只剩下這套架構體系了！ >>>   

    （十二）Hibernate中的多表操作（1）：單向多對一

    art 保存 int gen round t對象 情況 映射文件 拋出異常 由“多”方可知“一”方的信息，比如多個員工使用同一棟公寓，員工可以知道公寓的信息，而公寓無法知道員工的信息。 案例一： pojo類 public class Department {

    perl 入門知識（1）

    .com 方法 如果 shift vim lis zed http script <一> 語句及註釋: Perl 語句以分號(;)結尾，用 # 作為一行的註釋，沒有其它語言中那種跨行的註釋。代碼塊用大括號圍起來，這個和 C 類似，但這個大括號在有些地方是強制要

    backbone入門系列（1）基本組成部分

    tle doctype syn 方法 1.3 服務器 行為 java code 一，首先backbone有以下組成部分：Events：事件驅動模塊 Model：數據模型 Collection：模型集合器 Router：路由器（對應hash值） History：開啟歷史管理