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.瀏覽器中預(yù)覽
-
在
index.html文件上右鍵踏烙，點(diǎn)擊View In Browser
image.png -
hello vue效果
image.png
6.驗(yàn)證vue響應(yīng)式
現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的冒晰，通過控制臺修改數(shù)據(jù)來驗(yàn)證DOM是否跟著修改痛侍。
image.png
vue對象的數(shù)據(jù)
app.message原始值是Hello Vue!,現(xiàn)在修改為hello xxx!
image.png
結(jié)果DOM會被重新渲染！
