Vue的引入与基本使用
Vue 使用 基本 引入
2023-06-13 09:11:28 时间
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.运行当前页面.效果如下:
相关文章
- Dockerfile 中的 multi-stage 特性,Vue 项目多阶段构建实战
- 如何查看Vue项目vue的版本号
- 使用开源Cesium+Vue实现倾斜摄影三维展示
- vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点
- 使用vue-cli搭建spa项目
- 【说站】超级容易上手,Vue中使用JSX
- vue路由懒加载的实现方式_vue路由懒加载实现原理
- VUE组件封装_vue使用组件
- 聊聊 Vue 的双端 diff 算法
- 测试开发之前端系列!Vue 通信方式 slot (插槽)的分类
- vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍
- Vue使用ECharts做图表
- Vue入门 基本使用 与 事务管理【1】
- Vue的beforeRouteEnter如何使用组件实例的方法
- Vue使用router设置页面title
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue用Redis储存获取数据(vue获取redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue应用中部署Redis(vue中使用redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)