The way to create a vue component is defferent between vue2 and vue3
Based on vue 2.x
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js">
</script>
<div id="app">
<input type="text" id="input2" placeholder="I am vue element" v-model="message" @input="log">
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"Please input here.."
},
methods:{
log:function(){
console.log(this.message);
}
},
// cancel comment template tag, input tag will not show.
// tempalte: `<h1>This will replate #app tag</h1>`
created(){
console.log("--vue load succeed！--");
alert("Today is a good day.")
}
})
</script>
</body>
</html>
Based on vue 3.x
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="app">The content would not show.</div>
<script>
const { createApp } = Vue;
const App = {
data() {
return {
name: "Gregg",
};
},
template: `<h1>Hello {{ name }}</h1>`,
};
createApp(App).mount("#app");
</script>
</body>
</html>
Vue3.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@3.0.2"></script>
</head>
<body>
<div id="haha"></div>
</body>
<script>
const { createApp, h, ref } = Vue
// vant 源码中是直接用的setup返回的jsx,我这里用的是vue的cdn用法,没有环境支持
const app = createApp({
setup(props) {
const name = ref('小米')
return { name }
},
render() {
return h('div', { style: { fontSize: '24px' } }, '你好' + this.name)
}
})
// 提供一个父元素
const parent = document.getElementById("haha")
// const parent = document.createElement('div')
//mount方法不再像vue2一样支持未挂载的实例，必须得挂载，即必须得给参数
const instance = app.mount(parent)
console.log(instance)
console.log(instance.$el)
</script>
</html>
Vue 3.0 demo
<!DOCTYPE html>
<html>
<head>
<script src="D:\save\code-rep\vuejs\vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>Root content</h1>
<ckt>child content</ckt>
</div>
<script>
const APP = {
data() {
return {
name: "tcl"
}
},
}
const app = Vue.createApp(APP)
app.component('ckt',{
data() {
},
template:`<h1>Today is a good day.</h1><slot></slot>`
}
)
app.mount("#app")
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="D:\save\code-rep\vuejs\vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>Root content</h1>
<cpn1></cpn1>
</div>
<script>
const cpn1 = {
template: `<h1>cpn1 content.</h1>`
}
const APP = {
components: {
"cpn1": cpn1
},
data() {
return {
name: "tcl"
}
},
}
const app = Vue.createApp(APP).mount("#app")
</script>
</body>
</html>
Top comments (0)