學(xué)習(xí)筆記編寫vue的第一個程序
更新時間：2021年08月27日 17:34:09 作者：晴空_V9
這篇文章主要介紹了學(xué)習(xí)筆記vue的第一個程序，其中非常詳細(xì)的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學(xué)習(xí)下，希望可以有所幫助
這里使用官方文檔的cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1、編寫一個html，第一個vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
{{message}}
</div>
<!--導(dǎo)入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//model：數(shù)據(jù)
data:{
message:"hello,vue"
}
});
</script>
</body>
</html>
注意視圖模板和數(shù)據(jù)
View視圖
Model模型
ViewModel：雙向綁定就是 你們前端數(shù)據(jù)改變 你們data中的數(shù)據(jù)也會改變
可以在頁面不刷新的情況下改變數(shù)據(jù)然后同步到前端顯示
判斷循環(huán)
iffor
事件
on
787原則
學(xué)習(xí)vue我們必須知道它的7個屬性，8個 方法，以及7個指令
el屬性
用來指示vue編譯器從什么地方開始解析 vue的語法，可以說是一個占位符。
data屬性
用來組織從view中抽象出來的屬性，可以說將視圖的數(shù)據(jù)抽象出來存放在data中。
template屬性
用來設(shè)置模板，會替換頁面元素，包括占位符。
methods屬性
放置頁面中的業(yè)務(wù)邏輯，js方法一般都放置在methods中
render屬性
創(chuàng)建真正的Virtual Dom
computed屬性
用來計算
watch屬性
watch:function(new,old){}
監(jiān)聽data中數(shù)據(jù)的變化
兩個參數(shù)，一個返回新值，一個返回舊值
以上就是學(xué)習(xí)筆記vue的第一個程序的詳細(xì)內(nèi)容，更多關(guān)于vue程序的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務(wù)器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網(wǎng)頁方面是有很大作用的。本篇內(nèi)容小編就來詳細(xì)解說JavaScript常用的對象,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了JS中自定義事件與觀察者模式的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
JavaScript獲取上傳文件相關(guān)信息示例詳解
這篇文章主要為大家介紹了JavaScript獲取上傳文件相關(guān)信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 tabs選項卡效果的實現(xiàn)的相關(guān)資料,微信小程序內(nèi)部組件沒有Tabs 選項卡的功能，自己實現(xiàn)個類似的，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了JavaScript手寫異步加法asyncAdd方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
JavaScript立即執(zhí)行函數(shù)用法解析
這篇文章主要介紹了JavaScript立即執(zhí)行函數(shù),我們知道，在一般情況下，函數(shù)必須先調(diào)用才能執(zhí)行，如下所示，我們定義了一個函數(shù)，并且調(diào)用,下面一起進入文章來接具體的使用方法吧2021-12-12
這篇文章主要介紹了前端常見跨域解決方案的相關(guān)內(nèi)容，包括對跨域的解釋，常見跨域場景以及跨域解決方案，內(nèi)容豐富，需要的朋友可以參考下。2017-09-09
這篇文章主要介紹了微信小程序 MD5加密登錄密碼詳解及實例代碼的相關(guān)資料,這里附有實例代碼，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了uniapp自定義相機實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了JavaScript本地存儲的全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05