1.新建html文件
image.png
2.引入vue.js
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
代碼如下
image.png
3.編寫div
<div id="app">
{{ message }} <br>
{{name}}
</div>
4.編寫vue.js
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name:"test var"
}
})
</script>
5.瀏覽器中預覽
-
在
index.html文件上右鍵，點擊View In Browser
image.png -
hello vue效果
image.png
6.驗證vue響應式
現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應式的，通過控制臺修改數(shù)據(jù)來驗證DOM是否跟著修改。
image.png
vue對象的數(shù)據(jù)
app.message原始值是Hello Vue!,現(xiàn)在修改為hello xxx!
image.png
結(jié)果DOM會被重新渲染！
