目录
1.Vue是什么?
概念:动态构建用户界面的渐进式 JavaScript 框架 。
优点:大大提升开发效率(70%)
缺点:需要理解记忆规划-->官网
特点:
-
遵循 MVVM 模式
-
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
-
它本身只关注 UI, 也可以引入其它第三方库开发项目
2. 两种使用方法
1.Vue核心包开发
场景:局部模块改造
2. vue核心包&Vue插件工程化开发
场景:整站开发
3.创建第一个vue实例
创建Vue实例,初始化渲染
-
准备容器(Vue所管理的范围)
-
引包(开发版本包/生产版本包)官网
-
vue2:Vue.js
-
vue3:https://cn.vuejs.org
3. 创建实例
4. 添加配置项=>完成渲染
定配置项el data => 渲染数据
el指定挂载点,选择器指定控制的是哪个盒子
data提供数据
代码:
<!DOCTYPE html>
<head>
<title>hello world!</title>
</head>
<!-- 引入开发包,包含完整的注释跟警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<!-- 采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统-->
{{message}}
</div>
</body>
<script>
var app = new Vue({
// 挂载到id为app的DOM元素上
el: '#app',
// 将message当中的数据填充
data:{
message:"Hello,World!"
}
})
</script>
4.补充小知识
1. 什么是DOM?
DOM,即文档对象模型(Document Object Model),是一种用于处理HTML和XML文档的编程接口。它将文档的结构(例如网页的HTML)以对象的形式存储在内存中,从而实现网页与脚本或编程语言的连接。
举个简单的例子:
在我们学习JavaScript的时候,会通过
document.getElementById("demo")
的方式去改变一个id叫demo的元素,那这个其实就是在改变HTML中的元素内容,也就是改变DOM。
那代入到我们的VUE实例当中也是非常好理解的,我们通过VUE挂载了这个id,定义了data去改变这个内容。
2. 为什么el挂载用#?
快去恶补选择器!#是用来告诉框架去查找一个id叫app的元素,.是类选择器。
3. 为什么用{{message}}?
{{ message }}
这种格式通常是在前端模板引擎或框架中使用的插值表达式。这种表达式用于在HTML模板中插入动态数据。
4. 什么是 MVVM模式?
MVVM是Model-View-ViewModel的缩写,它是一种软件架构模式,用于将用户界面(UI)的开发与业务逻辑或后端逻辑分离。这种模式在构建富客户端应用程序时特别有用,尤其是在使用数据绑定技术的情况下。以下是MVVM模式的三个主要组件:
-
模型(Model):模型代表应用程序的数据逻辑,如数据库记录、业务实体、验证规则等。它是与应用程序状态和业务逻辑相关的部分,独立于UI。
-
视图(View):视图是用户界面的一部分,负责展示数据并接收用户的输入。在MVVM中,视图通常是声明性的,不包含业务逻辑,它通过数据绑定与ViewModel交互。
-
视图模型(ViewModel):ViewModel是MVVM模式中的核心,它是模型和视图之间的桥梁。ViewModel暴露公共属性和方法,这些属性和方法通常与视图中的UI元素绑定。ViewModel处理用户交互的逻辑,并将视图的状态与模型的状态同步。
MVVM模式的关键特性包括:
-
数据绑定:视图模型中的属性与视图中的UI元素绑定,这样当模型数据变化时,视图会自动更新,反之亦然。
-
命令:视图模型可以暴露命令,这些命令可以被视图中的UI元素(如按钮)调用,以执行特定的操作。
-
视图模型抽象:ViewModel不直接引用视图,这样可以使视图模型独立于任何特定的UI框架。
5.错误查询
如果你跟着代码敲实例出现了错误,可以通过以下几点查询自己的出错原因:
-
看看id是否写成了#app
-
看看挂载的id是否正确引用
-
看看data后是否加了:
-
是否引包
如果有其他知识补充或者是问题都可以发到评论区哟!