Logo

Vue 3起手式:createApp 函数

photo

2024年04月18日

Vue 3 真有意思。

用 Vue 3 做了几个简单的 Web 页面了,本文 展示其 createApp 函数 的一些使用。

 

createApp 函数
官文:
https://cn.vuejs.org/api/application.html

function createApp(rootComponent: Component, rootProps?: object): App

第一个参数是根组件。第二个参数可选,它是要传递给根组件的 props。

 

菜鸟教程(感谢!强烈推荐!)

Vue3 教程

https://www.runoob.com/vue3/vue3-tutorial.html

 

下面使用 Vue 3(下载的 vue_3.2.36_vue.global.min.js)开发的一个页面,展示了 createApp 函数 的 rootComponent 参数 下自己用过的 元素:

data() 函数、mounted() 函数、methods 属性、watch 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Vue-0719</title>
<script src="js/vue_3.2.36_vue.global.min.js"></script>
</head>
<body>
<div id="root">
	<label>{{ formData.selected }}</label><br>
	<label>{{ p1 }}</label><br>
	<label>{{ arr }}</label><br>
	<p>v-for 指令(1)</p>
	<div v-for="item in arr">{{ item }}</div>
	<p>v-for 指令(2)</p>
	<select v-model="formData.selected">
		<option v-for="(item,index) in arr" :value="index">
			{{ item }}
		</option>
	</select>
</div>

<script>
const root = {
  data() {
    return {
      formData: {
        selected: '0'
      },
      p1: '123',
      arr: ['a', 'b'],
    };
  },
  mounted() {
	console.log("in mounted()...");
    this.funcA();
    this.funcB('input param1');
  },
  methods: {
    funcA() {
		console.log("in funcA...");
	},
    funcB(param1) {
		console.log("in funcB...param1=" + param1);
	},
  },
  watch: {
    // 多级使用 单引号包裹
    'formData.selected':  function(nv, ov) {
		// 处理
		console.log("nv=" + nv + ", ov=" + ov + ", this.formData.selected=" + this.formData.selected);
    },
    // nv 新值,ov 旧值
    p1: function(nv, ov) {
		// 处理
    },
  }
}

const app = Vue.createApp(root);

app.mount("#root");
</script>
</body>
</html>

 

测试结果:

 

vue_3.2.36_vue.global.min.js 下载地址:

https://unpkg.com/browse/vue@3.2.36/dist/

注意,奇怪,没有 *.min.js 了,大家可以下载 vue.global.prod.js。

 

—END—

 

本文链接:

https://www.cnblogs.com/luo630/p/17566926.html

 

感谢 菜鸟教程!

 

ben发布于博客园

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

热门文章

无法握住的故土 在我们心灵最温暖的角落,总有一寸土地是属于故乡的。虽然我们看似已远离故土,可骨子里对故乡的依恋却是从未冷却过。我们无论漂泊他乡,还是在繁华都市平步青云,可故乡的悠悠情思总会潜入梦乡与你缠绵。是儿时那一缕缕茉莉的清香萦绕在梦境,也是邻家那已锈迹斑斑的铁壶里,开出艳丽的花儿在梦的边缘摇曳。故土就这样根深蒂固地在我们的灵魂深处烙下深深的印记。 作者:Pastore Antonio
1596 浏览量
EWS(Exchange Service)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 最近公司要求和exchange服务对接,所以稍微研究了一下官方文档,做出以下总结,欢迎大家补充。先...EWS(ExchangeService)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 作者:Pastore Antonio
1585 浏览量
Sql Server 部署SSIS包完成远程数据传输 本篇介绍如何使用SSIS和作业完成自动更新目标数据任务。**温馨提示:如需转载本文,请注明...SqlServer部署SSIS包完成远程数据传输 作者:Pastore Antonio
1579 浏览量
SQL Server AG集群启动不起来的临时自救大招 背景前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群...SQLServerAG集群启动不起来的临时自救大招 作者:Pastore Antonio
1573 浏览量
windows 下安装 memcahce 官网上并未提供Memcached的Windows平台安装包,我们可以使用以下链接来下载,你需...windows下安装memcahce 作者:Pastore Antonio
1567 浏览量