广东做网站公司有哪些,做网站多少钱西宁君博领先,物流企业网站,站长之家ip地址查询目的#xff1a;作为一个新手开发#xff0c;我想使用 Vue 3 将代码封装在 HTML 文件中时#xff0c;进行界面打开展示。
一、vue计数示例
学了一个简单计数器界面展示#xff0c;代码如下#xff1a;
!DOCTYPE html
html langenhead作为一个新手开发我想使用 Vue 3 将代码封装在 HTML 文件中时进行界面打开展示。
一、vue计数示例
学了一个简单计数器界面展示代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headdiv idapph1alllalalallalal 默认会被覆盖/h1
/div
template idwhydivh2{{message}}/h2h2{{counter}}/h2button clickincrement1/buttonbutton clickdecrement-1/button/div
/templatebody!-- 以下是引入vue依赖库三种的方式 --!-- 方式一 cdn--
!-- 引入 Vue 3 的 CDN 资源网络加载不了 加载慢--
!-- script srchttps://unpkg.com/vuenext/script --!-- 引入 Vue 3 的 CDN 资源 公司网络加载不了 无用--
!--script srchttps://cdn.jsdelivr.net/npm/vue3/script--!-- 引入 Vue 3 的 CDN 资源 公司网络能加载 有用 --
!--script srchttps://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js/script--!-- 方式二 本地--
!-- 引入 Vue 3 的本地js 有用 --
!-- 把cdn远程vue.global.min.js文件复制到本地命名接着真实路径引用--
script srcvue3.2.12global.js/script!-- 方式三 电脑全局vue.js引入 不需要再文件引用就可以打开了 --
!-- 下载安装node.js,使用node命令 npm install vue -g下载安装vue.js 到电脑全局检查是否安装成功 npm list vue 有用 --
script srcD:/html_project/vue_to_android/vue3.2.12global.js/script
scriptVue.createApp({template: #why,data: function() {return {message: hello world!,counter: 100}},methods: {increment() {this.counter;console.log(点击了1);},decrement() {this.counter--;consloe.log(点击了-1);}}}).mount(#app)/script/body/html在 上述HTML 文件里,包含了文件头标题title, 接着定义了一个内容 div idapp 而后定义了一个内容包含标题和数字,以及两个按钮的 template 并在 body 中引入了 Vue 3 的库通过使用 createApp 方法创建了一个 Vue 应用并通过 template 设置了要使用的模板选择器为 #why。 最后在 script 标签中使用 createApp 和 mount 方法启动 Vue 应用。
二、保存到html
把以上代码手敲复制到一个文件中我这边就复制到vue_demo.html
其中可以使用 Vue 3 的 CDN 引入 Vue 库和相关的依赖,但是对网络有限制有的加载太慢了 这边采用手动引用依赖库把cdn远程https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.jsvue.global.min.js文件全盘复制到本地命名vue3.2.12global.js再进行加载这样就快很多了。
三、实际效果 其中标签 div idapp 根据#app被vue使用会主动使用vue中template内容覆盖已经有的文字alllalalallalal。
创造加载乐哉分享
