vue 之 介紹及簡單使用

瀏覽目錄

• vue的介紹

• vue的使用

 

vue的介紹

簡介

vue官網說：Vue.js（讀音 /vjuː/，相似於 view） 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。 

關於漸進式和自底向上增量開發咱們來看一下知乎的回答：

vue.js的優勢

1.易用

　　已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

2.靈活

　　不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

3.高效

　　20kB min+gzip 運行大小
      超快虛擬 DOM 
      最省心的優化

虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想。

(1) 提供一種方便的工具，使得開發效率獲得保證
(2) 保證最小化的DOM操做，使得執行效率獲得保證

虛擬dom的渲染速度要比咱們真實的dom渲染速度快。

vue的使用

安裝

建議你們使用<script>引入

 

引入vue.js文件

咱們發現：引入vue.js文件以後，Vue被註冊爲一個全局的變量，它是一個構造函數。

使用vue實例化對象

 建立vue實例對象

<div id="app">
  {{ msg }}
</div>

var app = new Vue({
     el:'#app',
     data:{
        msg : '你們好'
     }
})　　

輸出結果：

ok，咱們已經簡單的建立了第一個vue應用。渲染的數據的方式咱們也叫聲明式的渲染。如今數據和 DOM 已經被創建了關聯，全部東西都是響應式的。咱們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制檯 (就在這個頁面打開)，並修改 app.msg 的值，你將看到上例相應地更新。

在上面案例中，咱們學到了，{{ }}插值的語法。

{{}}插值，不只能夠插變量，只要你能想到的插入均可以，if-else不能夠啊！！！

 <p>{{2==1?'真的':'假的'}}</p>　　

輸出結果：

data中存儲的就是咱們的數據屬性。Vue實例還暴露了一些有用的屬性和方法，它們都有前綴 $，以便與用戶定義的屬性區分開來。