Vue學(xué)習(xí)筆記二：聲明式渲染

快速創(chuàng)建vue實(shí)例

這里不再贅述了，可以查看上一篇筆記：vue的安裝和使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                
            })
        </script>
    </body>
</html>

在data中，添加一個(gè)元素

            const app = new Vue({
                el:"#app",
                data:{
                    msg:"這是一個(gè)Vue實(shí)例"
                }
            })

聲明式渲染DOM

采用極其簡潔的方式（mustache），將元素聲明式的渲染進(jìn)DOM中。

<header>{{msg}}</header>

查看頁面顯示效果。


頁面顯示.png

f12打開開發(fā)者工具，在控制臺輸入：

app.msg="你好啊，Vue"

回車，頁面顯示結(jié)果：


顯示結(jié)果.png

可見，所有東西都是響應(yīng)式的。

元素綁定

在data中定義一個(gè)title，并綁定元素title（v-bind，語法糖v-bind可以省略，變成:title)

        <div id="app">
            <header>{{msg}}</header>
            <article v-bind:title="title">鼠標(biāo)懸停查看結(jié)果</article>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    msg:"這是一個(gè)Vue實(shí)例",
                    title:"這是你看到的結(jié)果"
                }
            })
        </script>

查看頁面顯示結(jié)果：


12.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容