前端框架Vue3底子部门

登录 · 发表于 2025-12-23 19:50:07

什么是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的库文件。比方：
2. <script src="../vue.global.js"></script>
复制代码
然后利用Vue.createApp来创建一个Vue应用步调，并将该应用绑定在一个DOM元素上。比方：
2. <script type="module">
3. import{createApp,reactive,ref}from "../vue.esm-browser.js"
5. createApp({
6. /* 根组件选项 */
7. })
8. </script>
复制代码
2. <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>
复制代码
运行结果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

前端框架Vue3底子部门

本帖子中包含更多资源

渣渣兔