第一种
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <div id=’app’> hello vue </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"},
})
</script>
</body>
</html>第二种
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <p id='zzz'> hello vue </p> 也就是说，会把 原始的 div标签替换掉
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"},
template: "<p id='zzz'> {{msg}}</p>
})
</script>
</body>
</html>第三种
render 函数，以字符串（网上太多，故没写），要么以component对象作为参数创建。
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <h5 id='aaa'>aaaaa</h5> 也就是说，会把 原始的 div标签替换掉
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"}, // 不会使用
template: "<p id='zzz'> {{msg}}</p>， //不会用到
render: h => h({
template: <h5 id='aaa'> {{msg}} </h5>,
data: function() {
return {msg: 'aaaaa'}
},
created: function(){ console.log('123')}
}
})
</script>
</body>
</html>原文地址：https://www.cnblogs.com/jijizhazha/p/12081522.html
时间： 2024-10-09 11:49:43