创建Vue实例的三种方法
Posted jijizhazha
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建Vue实例的三种方法相关的知识，希望对你有一定的参考价值。
第一种
<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>以上是关于创建Vue实例的三种方法的主要内容，如果未能解决你的问题，请参考以下文章