在我們還沒(méi)接觸Vue之前，我同學(xué)常說(shuō)我可以直接在元素里輸出JS的表達(dá)式嗎？肯定是不太行。當(dāng)我們接觸vue.js后，這個(gè)想法成了現(xiàn)實(shí)。
每當(dāng)我們學(xué)習(xí)一門新的語(yǔ)言或者框架時(shí)，我們都習(xí)慣打印一個(gè)“hello world”，在我們vue當(dāng)中，我們?nèi)绾未蛴。蚴褂媚?？接下?lái)讓我為大家介紹一下吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 我們使用{{}}的形式 -->
<div class="root">Hello {{name}}</div>
<!-- 我們發(fā)現(xiàn)頁(yè)面直接輸出了 Hello {{name}} 說(shuō)明Vue實(shí)例是一一對(duì)應(yīng)的-->
<div class="root">Hello {{name}}</div>
</body>
<script src="../js/vue.js"></script>
<script>
Vue.config.productionTip = false // 阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示
new Vue ({ //Vue實(shí)例化
// 注意：需要以對(duì)象的形式去使用 記得加逗號(hào)
el:".root", //el代表的是元素，后面跟字符串形式的css選擇器
data:{ //data相當(dāng)于存儲(chǔ)數(shù)據(jù)的地方 供el所指的容器去使用
name:"World" //存一個(gè)name
}
})
</script>
</html>
注意事項(xiàng)：
1.想讓Vue工作，就必須創(chuàng)建一個(gè)Vue實(shí)例，且要傳入一個(gè)配置對(duì)象
2.root容器里的代碼依然符合html規(guī)范，只不過(guò)混入了一些特殊的Vue語(yǔ)法
3.root容器里的代碼被稱為Vue模板
4.Vue實(shí)例與容器是一一對(duì)應(yīng)的
5.真實(shí)開(kāi)發(fā)中只有一個(gè)Vue實(shí)例，并且會(huì)配合著組件一起使用
6.{{xxx}}中的xxx要寫js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性
7.一旦data中的數(shù)據(jù)發(fā)生變化，那么模板中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-738981.html
感謝大家的閱讀，如有不對(duì)的地方，可以向我提出，感謝大家！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-738981.html
到了這里，關(guān)于初識(shí)Vue 輸出Hello World 及注意事項(xiàng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
