Vue 入門，Vue屬性和指令

yuanxin 發布于2019-08-20 19:02 / 1362人閱讀

摘要：鼠標懸停幾秒鐘查看此處動態綁定的提示信息頁面加載于如上，屬性被稱為指令，其前綴表示其為提供的特殊屬性。這里該指令的作用是將這個元素節點的屬性和實例的屬性保持一致。

初步認識vue

github地址：https://github.com/jiaoshibo/vue

vue是一套構建用戶界面的漸進式框架，是mvvm框架的一種。vue采用了自底向上增量開發的設計，其核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。

vue有三個部分組成 : 視圖-數據-視圖模型。視圖即HTML部分。

vue的引入：


//或者直接引入文件

聲明式渲染

vue的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM：


    {{message}}

就這樣，數據和DOM進行了綁定，視圖將數據引入，并進行渲染，顯示出來，而且元素是響應式的，打開控制臺，修改 app.message 的值，就會發現視圖的文本也會相應的更新。

除了文本插值，我們還可以使用指令的方式綁定DOM元素屬性。


  
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！

如上，v-bind 屬性被稱為指令，其前綴 v- 表示其為vue提供的特殊屬性。這里該指令的作用是：“將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致”。

條件與循環

控制一個元素的顯示與隱藏


    顯示

如果在控制臺輸入 app3.seen=false ，你就發現上例的文本隱藏了。

利用 v-for 指令綁定數組的數據來渲染一個項目列表


    
        
            {{todo.text}}

1.HTML
2.JAVASCRIPT
3.VUE.JS

在控制臺輸入 app3.todos.push({text:"CSS"}) ，列表中會增加一個新項

處理用戶輸入

利用 v-on 綁定一個事件監聽器，使用戶和應用之間進行互動


    {{message}}

通過 v-model 指令，可以輕松實現表單輸入和應用狀態之間的雙向綁定


    {{message}}

組件化應用構建

使用 v-bind 指令將todo傳到每一個重復的組件中

1.JAVASCRIPT
2.HTML
3.VUE

在上面的例子中，我們已經設法將應用分割成了兩個更小的單元，子單元通過 props 接口實現了與父單元很好的解耦。

To be continued......

下一篇：Vuede 模板語法和計算屬性：https://segmentfault.com/a/11...

云服務器 GPU云服務器 vue實例屬性 vue.js 屬性 vue的計算屬性 vue入門教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85060.html

Vue入門--基礎語法

摘要：在模板中放入太多的邏輯會讓模板過重且難以維護。它會根據控件類型自動選取正確的方法來更新元素。指令需要使用的語法，指的是原數據數組，指的是迭代的數組元素。注：本教程所使用的vue版本為 2.5.16 MVC與MVVM MVC（Model-View-Controller）： M指的是從后臺獲取到的數據， V指的是顯示動態數據的html頁面， C是指響應用戶操作、經過業務邏輯處理后去更新...

haoguo 2019-08-26 12:00 評論0 收藏0
vue入門筆記體系（五）vue指令

摘要：指令指令帶有前綴，以表示它們是提供的特殊特性。添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。 vue指令指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本，更新元素的 innerHTML 。注意：內...

myshell 2019-08-23 10:36 評論0 收藏0
vue入門

摘要：基本信息是框架讀音，類似于是一套構建用戶界面的漸進式框架。我們現在可以進一步為我們的組件實現更復雜的模板和邏輯的改進，而不會影響到父單元。基本信息 vue是mvvm框架 (model view viewmodel) Vue.js（讀音 /vju?/，類似于 view）是一套構建用戶界面的漸進式框架。 model 視圖/模板 view 模型/數據 viewmod...

NotFound 2019-08-20 19:02 評論0 收藏0
快速入門 - Vue2 Tutorials (一)

摘要：在這個組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統的寫法，如果我們需要往里面添加鏈接的時候，每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復的代碼。 Vue 的官方文檔對 Vue 介紹非常詳細，但官方文檔使用在 HTML 中引入 vue 的方式進行講解，而實際項目中一般使用腳手架如 vue-cli 初始化項目...

djfml 2019-08-20 17:47 評論0 收藏0
Vue學習筆記之一 - 入門

摘要：而在頁面中，在之內的元素只需寫一個。但是元素的內容被更改之后，控件中的內容并不會同步更新。下面的代碼，在中遍歷實例中屬性里的每一項，并將每個與綁定。而在定義組件的代碼中，接收傳入的，并在元素中顯示中的字符串。 URL：Introduction - Vue.js 注意所演示的示例，都是在JS中將Vue實例綁定至HTML中的指定元素，然后再通過Vue實例中data內的屬性或者method...

BLUE 2019-08-20 13:49 評論0 收藏0