vue3.0初试
vue3.0引用方式
vue3.0练习,可以采用cdn引用和本地引用。cdn引用走的是国外的地址加载略慢。遂采用本地引用方式。
vue.global.js下载地址
<head>
<meta charset="utf-8" />
<title>vue3.0初试</title>
<!-- 国外cdn方式引入vue3.0 会保持和 npm 发布的最新的版本一致 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- 引用本地下载的vue3.0js 仅供测试练习用 -->
<script src="./vue.global.js"></script>
</head>
vue3.0渲染
在js代码中指定id="hello-vue"
块为vue渲染区域,如果直接在id="hello-vue"
节点写vue代码不会生效,需要在其子节点写才生效。
非渲染区域不会执行vue渲染。
HTML页面代码部分
<body>
<!-- vue渲染起始节点 id="hello-vue" 写在其子节点的vue语法才生效 -->
<div id="hello-vue">
vue3.0渲染节点
<div :class="[bgFlag?'bg1':'bg2']" @mouseover="mouseover" @mouseout="mouseout">
<div class="hello">{{message}}</div>
<button id="button" @click="add">click</button>
<div>点了{{count}}次</div>
</div>
</div>
<div class="novue">
非vue渲染节点范围
<div>
<div>点了{{count}}次</div>
</div>
</div>
</body>
js代码部分
<script>
// Vue3 中的应用是通过使用 createApp 函数来创建的
// 传递给 createApp 的选项用于配置根组件。
const HelloVueApp = Vue.createApp({
data() {
return {
message: "Hello Vue3.0!",
count: 0,
bgFlag: false,
}
},
methods: {
add() {
this.count++
},
mouseover() {
this.bgFlag = true
},
mouseout() {
this.bgFlag = false
},
},
})
// 在使用 mount() 挂载应用时,该组件被用作渲染的起点。
const vm = HelloVueApp.mount("#hello-vue")
</script>
最终效果
全部代码
<html>
<head>
<meta charset="utf-8" />
<title>vue3.0初试</title>
<!-- 国外cdn方式引入vue3.0 会保持和 npm 发布的最新的版本一致 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- 引用本地下载的vue3.0js 仅供测试练习用 -->
<script src="./vue.global.js"></script>
</head>
<body>
<!-- vue渲染起始节点 id="hello-vue" 写在其子节点的vue语法才生效 -->
<div id="hello-vue">
vue3.0渲染节点
<div :class="[bgFlag?'bg1':'bg2']" @mouseover="mouseover" @mouseout="mouseout">
<div class="hello">{{message}}</div>
<button id="button" @click="add">click</button>
<div>点了{{count}}次</div>
</div>
</div>
<div class="novue">
非vue渲染节点范围
<div>
<div>点了{{count}}次</div>
</div>
</div>
</body>
</html>
<script>
// Vue3 中的应用是通过使用 createApp 函数来创建的
// 传递给 createApp 的选项用于配置根组件。
// 在使用 mount() 挂载应用时,该组件被用作渲染的起点。
const HelloVueApp = Vue.createApp({
data() {
return {
message: "Hello Vue3.0!",
count: 0,
bgFlag: false,
}
},
methods: {
add() {
this.count++
},
mouseover() {
this.bgFlag = true
},
mouseout() {
this.bgFlag = false
},
},
})
// Vue.createApp(HelloVueApp).mount("#hello-vue")
const vm = HelloVueApp.mount("#hello-vue")
</script>
<style>
.hello {
font-size: larger;
margin: auto;
}
.vue {
margin: 10px;
}
.novue {
margin: 10px;
}
.bg1 {
background-color: palevioletred;
}
.bg2 {
background-color: powderblue;
}
</style>