vuejs學習思路-最簡單的vue應用

由于工作需要,開始接觸vuejs , 官方文檔地址:http://vuejs.org.cn/api/#vm-watch
看知乎大神說vuejs官方文檔比較友好,我就很開心的跑去看了一下。

恩!?。。恐v的什么鬼?
好了話不多說,我把我學習中的vuejs用直白的話語展現出來,希望對大家有一點點幫助。

先貼最基本的代碼 : index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <input type="text" name="" v-model="message">
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data:{
                message:"22"
            }
        });
    </script>
</body>
</html>

首先先導入vue.js ,然后新建一個script標簽,在這個新的script標簽中編寫vue的代碼
第一步:new Vue,注意這里的Vue第一個字母大寫,這個就是相當于創建一個vue對象
第二步:el選擇,el后面的 '#div1'代表的選擇器選中了 id=app 的div標簽
第三步:定義data中的數據message,html中的用法是: {{message}}
第四步:input框中的內容綁定data中的message,用法: v-model="message"

<h1>覺得本文對你有幫助</h1>
關注簡書mid米店,持續分享中。。。

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

推薦閱讀更多精彩內容