Vue的引入与基本使用
原创Vue的引入与基本使用
原创
软件工程师Michael
发布于 2022-08-25 22:35:07
发布于 2022-08-25 22:35:07
Vue3官方网站：https://cn.vuejs.org
参考Vue3官方教程来创建一个最简单的应用。
1.在VS code中创建一个html文件
2.引入Vue3,类似与jQuery或其他js库的用法
3.编写div,设置id或class属性值,用于后面Vue中的挂载应用
4.在createApp方法中设置数据池与事件池.
代码实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-----使用Vue3,首先要引入Vue ---这个做法有点类似与jQuery或其他js库的用法----->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<h3>Vue3</h3>
<div id="lio">
<!--插值表达式，绑定变量-->
{{content}} <br/><br/>
<!----v-on:click表示绑定事件---->
<button v-on:click='a'>button</button>
<br/> <br/>
<button v-on:click='b'>button2</button>
</div>
<br/><br/>
<div class="lancy">
{{myvalue}}
</div>
<script>
Vue.createApp({ /*---Vue的createApp方法，可以放入数据池与事件池，data是数据池，methods是事件池---*/
data:function(){ /* 变量池 */
return{
content:"hello Vue3" /* 自定义的变量 */
}
},
methods:{ /* 事件池 */
a:function(){
alert(1);
},
b:function(){
alert(2);
}
}
}).mount("#lio");/*---mount（）方法指定挂载元素，知会挂载符合条件的第一个元素--*/
Vue.createApp({
data:function(){
return{
myvalue:321
}
}
}).mount(".lancy");
</script>
</body>
</html>5.运行当前页面.效果如下:
Vue3运行效果
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读