vue基本知識

vue概念:

漸進式的javacript框架? ? ? ? 自底向上,逐漸增強

特點:

易用、 靈活、 高效

數據驅動視圖, 也叫響應式的數據變化,視圖自動跟著改變

缺點:

不支持ie8及以下版本,因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

vue基本指令分類

v-html? ? 解析html文檔

v-text? ? 解析文本

v-if(v-else)和v-show

v-bind: 動態綁定 可以簡寫成 :

v-on: 事件綁定 可以簡寫成 @

v-for :循環遍歷

v-model :雙向數據綁定

MVVM設計模式

? ? 這個模式,清晰的做到了,前端端分離。view 視圖指的就是用戶看到的界面就是視圖。model 模型(原本指的是后端邏輯),在前端看來它指的就是API接口(指的就是發起請求調用的接 口)viewModel視圖模型,它作為視圖和模型之前的橋梁所存在。它可以發起請求同時可以得到響應

? ? M --- model 模型

? ? V --- view 視圖

? ? VM --- viewModel 視圖模型

步驟

引入核心庫 建議引入開發環境

創建一個容器? ? ? 指定id,? 在這個容器中可以調用vue的所有語法

邏輯交互

script src="./node_modules/vue/dist/vue.js"></script>

<body>

? ? <div id="box">

? ? ? ? <h1>{{msg}}</h1>

? ? </div>

? ? <script>

? ? ? ? new Vue({

? ? ? ? ? ? el:'#box',//掛載點

? ? ? ? ? ? data:{//數據,屬性,是聲明式,不需要大家var let const ...

? ? ? ? ? ? ? ? msg:'放假還開心啊,還有20天,又是一個小長假。。。'

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

</body>

el 掛載點 不能掛載到 html 和 body 上, class是實現語法渲染的,不建議,建議id,每個實例都是 唯一的

data? 數據屬性,? ? 所有要渲染的變量全部定義到這個對象上

{{}}? 插值表達式, 不能寫復雜語句,可以使用三目運算,可以字符串拼接

在vue中瘋狂刷新出現閃動({{}}),如何解決???

? 一、用v-text ,因為它不用{{}}渲染,所以根本不會出現,但是太麻煩了,每個都要用才有用。這個方式不推薦!!!!

? 二、v-cloak 全局結局閃動問題的指令

[v-cloak]{

? display:none;

}

對于Vue是一套漸進式框架的理解

漸進式代表的含義是:主張最少。Vue可能有些方面是不如React,不如Angular,但它是漸進的,沒有強主張,你可以在原有大系統的上面,把一兩個組件改用它實現,當jQuery用;也可以整個用它全家桶開發,當Angular用;還可以用它的視圖,搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用MVVM和設計模式的那套理念,也可以函數式,都可以,它只是個輕量視圖而已,只做了自己該做的事,沒有做不該做的事,僅此而已。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容