Vue入门
程序员文章站
2024-02-01 14:29:04
...
文本插值{{}}
使用<script>引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
//生成的render函数
with(this){
return _c('div',
{
attrs:{"id":"app"}
},
[_v(_s(message))])
}
测试：打开chrome控制台，app.message = "Have a nice day!"，
动态绑定元素属性v-bind:xxx
<body>
<div id="app">
<span v-bind:title="message">hello world</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"页面加载于 " + new Date().toLocaleString()
}
})
</script>
</body>
//生成的render函数
with(this){
return _c('div',
{
attrs:{"id":"app"}
},
[_c('span',
{
attrs:{"title":message}
},
[_v("hello world")])
])
}
测试：打开chrome控制台，app.message = '新消息'