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发布于博客园

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

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1849 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1823 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,705 作者:Pastore Antonio
1550 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1548 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1535 浏览量