學(xué)習(xí)筆記編寫vue的第一個程序

更新時間：2021年08月27日 17:34:09 作者：晴空_V9

這篇文章主要介紹了學(xué)習(xí)筆記vue的第一個程序，其中非常詳細(xì)的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學(xué)習(xí)下，希望可以有所幫助

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)

if
for

事件

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屬性

用來計(jì)算

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中5個常用的對象
JavaScript是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務(wù)器腳本語言，我們不光要會Python，還要會JavaScript，因?yàn)樗鼘ψ鼍W(wǎng)頁方面是有很大作用的。本篇內(nèi)容小編就來詳細(xì)解說JavaScript常用的對象,需要的朋友可以參考一下
2021-10-10
JS中自定義事件與觀察者模式詳解
這篇文章主要為大家介紹了JS中自定義事件與觀察者模式的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
JavaScript獲取上傳文件相關(guān)信息示例詳解
這篇文章主要為大家介紹了JavaScript獲取上傳文件相關(guān)信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)的相關(guān)資料,微信小程序內(nèi)部組件沒有Tabs 選項(xiàng)卡的功能，自己實(shí)現(xiàn)個類似的，需要的朋友可以參考下
2017-01-01
JavaScript手寫異步加法asyncAdd方法詳解
這篇文章主要為大家介紹了JavaScript手寫異步加法asyncAdd方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JavaScript立即執(zhí)行函數(shù)用法解析
這篇文章主要介紹了JavaScript立即執(zhí)行函數(shù),我們知道，在一般情況下，函數(shù)必須先調(diào)用才能執(zhí)行，如下所示，我們定義了一個函數(shù)，并且調(diào)用,下面一起進(jìn)入文章來接具體的使用方法吧
2021-12-12
前端常見跨域解決方案（全）
這篇文章主要介紹了前端常見跨域解決方案的相關(guān)內(nèi)容，包括對跨域的解釋，常見跨域場景以及跨域解決方案，內(nèi)容豐富，需要的朋友可以參考下。
2017-09-09
微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼，需要的朋友可以參考下
2017-01-01
uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JavaScript本地存儲全面解析
這篇文章主要為大家介紹了JavaScript本地存儲的全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05