專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2020-12-22 16:07:42 來源：動力節點 瀏覽1072次
一個構建數據驅動的web界面的漸進式其框架，Vue.js的目標提供盡可能簡單的API就可以滿足我們的日常開發，官網：https://cn.vuejs.org/。學習此框架需要有HTML、CSS和JavaScript的一些基礎。
1.2 MVVM模式
MVVM是Modle-View-ViewModel的簡寫，是MVC的改進版。MVVM就是將其中View的狀態和行為抽象化，讓我們將視圖（html和dom元素）和業務邏輯分開，分開后我們直接曹組模型數據就等同于html的dom元素。
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）。
Vue.js是一個提供了MVVM風格的雙向數據綁定的JavaScript庫，專注于View層。它的核心是MVVM中的VM，也就是ViewModle。ViewModel負責連接View和Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。
1.3 VueJS快速入門
首先需要在官網上下載一個vuejs的文件，這個自己操作一下，接著創建一個html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src = "js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域
data:{
message:'hello vue' //注意不要寫分號結尾
}
});
</script>在瀏覽器中打開
1.4插值表達式
數據綁定最常見的形式就是使用"Mustache"語法（雙大括號）的文本插值，Mustache標簽會被替代為對應數據對象上的屬性的值。當綁定對象上屬性發生變化是，插值處的內容都會更新。
Vue.js都提供了完全的對JavaScript表達式的支持。
{{ number + 1}}
{{ true ? 'YES' : 'NO'}}這些表達式會在所屬Vue實例的數據作用域下作為JavaScript被解析。有個限制是每個綁定都只能包含單個表達式，所以下面的例子都不會生效。
1 <!-- 這是語句，不是表達式 -->
2 {{ var a = 1}}
3 <!-- 流控制也不會生效，請使用三元表達式 -->
4 {{ if (ok) { return message } }}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>vue插值表達式</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--Vue的插值表達式，把data中定義的數據顯示到此處-->
{{message}}<br>
<!-- 三元運算符 -->
{{ true ? "OK" : "No" }}<br>
<!-- 數學運算-->
{{number*3.14}}<br>
</div>
</body>
<script>
// 創建Vue對象
new Vue({
el: "#app",// 由vue接管id為app區域
data: {
message: "Hello Vue!",//注意：此處不要加分號
number: 100
}
});
</script>
</html>
動力節點推出的Vue js視頻教程全套免費下載,這是一套超級詳細的Vue js項目視頻教程,本套Vue js實戰視頻適合Vue js零基礎學員學習,這套視頻教程通俗易懂,是你學習Vue js的好幫手。
課程目標：通過本課程的學習，讓大家掌握Vue.js及在項目中的使用。
適用人群：具有一定web開發基礎的開發人員。
課程概述：Vue(讀音/vju?/，類似于view)是一套用于構建用戶界面的漸進式框架。如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。本課程將一步一步地讓大家快速地掌握Vue.js這樣一個前端核心框架，以適應公司的開發需要。
以上就是對“Vue.js視頻教程分享，入門實踐”的介紹，希望對大家有所幫助，還想學習更多關于Java的課程，可以關注動力節點官網Java視頻教程，免費下載學習。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號