Vue3入门示例1

第1步,创建一个html5

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title></head><body><div id="firstVue" class="demo"></div></body></html>

重点是添加了一个<div id="firstVue" class="demo"></div>

第2步:添加vue3.js的CDN链接,这样可以省去vue2和vue3版本切换的麻烦,也不需要安装node.jd的npm

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script></head><body><div id="firstVue" class="demo">{{ my_data }}</div><script>const myVue = {data() {return {my_data: 'Hello Vue!!'}}}Vue.createApp(myVue).mount('#firstVue')</script></body></html>

以上代码运行后(建议在服务器状态下运行,可以在本地安装一个IIS,apache或者Nginx),

将在浏览器中显示 "Hello Vue!!"

Vue.createApp(myVue).mount('#firstVue')这行代码建立 一个myVue实例,并绑定在firstVue标签上,第17行my_data: 'Hello Vue!!'修改了{{ my_data }}的数据内容,双大括号是Vue的格式模板.

第3步:如何修改属性?

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script></head><body><div id="app"><a v-bind:href="abc"><p>{{my_data}}</p></a></div> </div><script>const myVue = {data() {return {my_data: 'Hello Vue2!!',abc: 'abc.com'}}}Vue.createApp(myVue).mount('#app')</script></body></html>

以上代码通过v-bind给<a>的href属性指定了abc变量 ,而后续的vue直接修改了abc的值为'abc.com',这样就完成了属性的修改

  • 版权声明:Vue3入门示例1 内容由互联网用户自发贡献,该文观点仅代表作者本人。
  • 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
  • 如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系 删除。
  • 本文地址:https://www.jx027.com/article/98832.html

猜你喜欢

Vue3入门示例1

Vue3入门示例1

第1步,创建一个html5<!DOCTYPE html><html><head><meta charet=&#34;utf-8&#34;><title>Vue 测试实例</title></head><body><div...

探索3000 2023年01月26日 0
英伟达 RTX 4090 核心参数详解

英伟达 RTX 4090 核心参数详解

GPU 引擎规格:NVIDIA CUDA® 核心数量16384加速频率 (GHz)2.52基础频率 (GHz)2.23显存规格:标准显存配置24 GB GDDR6X显存位宽384 ...

枯鸦奇想 2023年01月26日 0
教育大数据之数据集成系统

教育大数据之数据集成系统

数据集成指的是把分散在各个系统中的各种类型的数据统一汇聚起来,而数据集成系统就是提供数据集成能力的平台。如何做好一个数据集...

人人都是产品经理 2023年01月25日 0