前端框架Vue3基础部分
什么是Vue？
Vue是一个能用于构建用户交互页面（动态网页）的渐进式JavaScript框架，易学易用，性能出色，适用性强的Web前端框架。
Vue的设计模式？
Vue的设计模式：MVVM模式
MVVM设计模式是不让Model和View这两层直接通信，而是通过VM层来连接。
文本
插值表达式：可以使用{{ }}在模版中插入数据。比如{{name}}，它就会显示name的值。
响应式数据
- ref函数：用于创建基本类型的响应式数据。例如（修改前）：
<div id="app">
<p>{{ msg }}</p>
</div>
</head>
<body>
<script type="module">
import {createApp, ref} from "./vue.esm-browser.js" //模块化开发方式
createApp({
setup(){
const msg=ref("你好");
msg.value="你好你好"; //（修改后）用value属性修改msg的值
return{
msg,
}
}
}
).mount("#app");
</script>- reactive函数：用于创建复杂类型的响应式数据。例如：
<div id="app">
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
</div>
<script type="module">
import {createApp, reactive} from "./vue.esm-browser.js" //模块化开发方式
createApp({
setup(){
const web = reactive({
title: "百度一下，你就知道",
url: "www.baidu.com"
});
// 返回一个对象类型的数据
return {
web,
}
}
}
).mount("#app");
</script>创建Vue项目
- 首先要引入Vue3的库文件。例如：
<script src="../vue.global.js"></script> - 然后使用Vue.createApp来创建一个Vue应用程序，并将该应用绑定在一个DOM元素上。例如：
<script type="module"> import{createApp,reactive,ref}from "../vue.esm-browser.js" createApp({ /* 根组件选项 */ }) </script><script src="../vue.global.js"></script> <div id="app"> <p>{{ msg }}</p> </div> <script> //创建一个 Vue 应用程序 Vue.createApp({ // 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等 // 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。 setup(){ // 定义数据 let msg = "成功创建第一个Vue应用程序!"; // 返回一个对象类型的数据 return { msg, } } } ).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上 绑定 </script>运行结果：
原文地址：https://blog.csdn.net/2302_80916083/article/details/143895285
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！