备案期间网站可以做竞价吗,模板页,成都高端网站设计公司,wordpress购物主题最近在闲暇时间想学习一下前端框架vue#xff0c;主要参考以下两个学习资料。
官网 快速上手 | Vue.js
b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili
一、创建一个vue3应用
!DOCTYPE html
html langen
headmeta charset主要参考以下两个学习资料。
官网 快速上手 | Vue.js
b站学习视频 2.创建一个Vue3应用_哔哩哔哩_bilibili
一、创建一个vue3应用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue.global.js/script
/head
bodydiv idapp!-- 插值表达式 --{{ msg }}h1{{web.title}}/h1h2{{web.url}}/h2/divscriptconst {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){const web reactive({title:开始学习vue啦,url:vue.com})return{msg:sucess,web}}}).mount(#app)// mount为挂载/script
/body
/html 模块化开发
注首先要安装Live Server插件。
导入js文件
import {createApp, reactive} from ./vue.esm-browser.js
script添加类型
script typemodule
二、ref与reactive区别
1、存储类型不同
ref用于存储单个基本类型的数据如数字、字符串等
reactive用于存储复杂数据类型如对象或数组等。
2、修改方式不同
ref修改方式
# 导入
import {ref} from ./vue.esm-browser.js# 定义常量
const number ref(10)# 修改
number.value 20
reactive修改方式
const web reactive({title:开始学习vue啦,url:vue.com
})
web.url hhahaha
三、渲染数据v-text和v-html
插值方式
h3{{web.title}}/h3
v-text方式
h3 v-textweb.title/h3
v-html方式
h3 v-htmlweb.url/h3
完整示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --/head
bodydiv idapph3{{web.title}}/h3h3 v-textweb.title/h3h3 v-htmlweb.url/h3/divscript typemoduleimport {createApp, reactive} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){ const web reactive({url:i stylecolor:blue www.vue.com/i,title:学习vue})return{web }}}).mount(#app)// mount为挂载/script
/body
/html
另i文本内容呈现斜体文本。
举例
He named his car iThe lightning/i, because it was very fast.运行结果He named his car The lightning, because it was very fast.
