Vue3简介和快速体验
R࿆ebirth Fire 2024-09-04 10:33:01 阅读 72
文章目录
前言1. Vue3介绍2. Vue3快速体验(非工程化方式)
前言
本次主要用VScode开发代码，vscode的安装很简单，不会的可以查询一下网上的资料
1. Vue3介绍
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/
Vue的两个核心功能：
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM
2. Vue3快速体验(非工程化方式)
后面会分享工程化方式，这里先看看非工程化，体会一下非工程化的不方便
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta http-equiv="X-UA-Compatible" content="IE=edge">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>code>
<div id="app">code>
<!-- 给style属性绑定colorStyle数据 -->
<!-- { {插值表达式 直接将数据放在该位置}} -->
<h1 v-bind:style="colorStyle">{ -- -->{headline}}</h1>code>
<!-- v-text设置双标签中的文本 -->
<p v-text="article"></p>code>
<!-- 给type属性绑定inputType数据 -->
<input v-bind:type ="inputType" value="helloVue3"> <br>code>
<!-- 给按钮单击事件绑定函数 -->
<button @click="sayHello()">hello</button>code>
</div>
<script>
//组合api
const app = Vue.createApp({ -- -->
// 在setup内部自由声明数据和方法即可!最终返回!
setup(){
//定义数据
//在VUE中实现DOM的思路是: 通过修改修数据而影响页面元素
// vue3中,数据默认不是响应式的,需要加ref或者reactive处理,后面会详细讲解
let inputType ='text'
let headline ='hello vue3'
let article ='vue is awesome'
let colorStyle ={ 'color':'red'}
// 定义函数
let sayHello =()=>{
alert("hello Vue")
}
//在setup函数中,return返回的数据和函数可以在html使用
return {
inputType,
headline,
article,
colorStyle,
sayHello
}
}
});
//挂载到视图
app.mount("#app");
</script>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。