什么是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>
运行结果: