vue简介:
Vue.js(通常称为Vue)是一种用于构建用户界面的开源JavaScript框架。提供了一种响应式的数据绑定和组件化的架构。
Vue具有以下特点:
-
响应式数据绑定:通过v-bind、v-model实现
-
组件化:Vue允许开发者将应用程序划分为多个可重用的组件,这样便于维护和复用
-
虚拟DOM:Vue使用虚拟DOM来优化性能内存中维护一个虚拟的DOM树,通过比较虚拟DOM和实际DOM的差异,最小化实际DOM操作的次数,从而提高应用程序的性能。
-
指令:Vue提供了一组内置的指令,用于操作DOM元素。例如:
详细的查看官网 Vue.js - 渐进式 JavaScript 框架 | Vue.jsv-if 指令用于条件性地渲染元素 v-for 指令用于循环渲染元素 v-bind 指令用于绑定属性 -
插件生态系统:Vue拥有丰富的插件生态系统,开发者可以使用这些插件来扩展Vue的功能。例如
Vue Router 用于实现客户端路由 Vuex 用于状态管理 Vue CLI 用于快速搭建Vue项目
创建过程请看官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js
编写第一个vue代码(单文件组件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01.app初体验</title>
<link rel="shortcut icon" href="../favicon.ico" />
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--
初始vue案例总结:
1、想让vue工作,就必须创建一个vue实例对象,并且要传入一个配置对象
2、root容器里的代码依然符合html规范,只不过混入一些特殊的vue语法
3、root容器里的代码被称为是【vue模板】
-->
<!--
注意区分:js表达式和js代码(也叫语法)
1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
比如:a 变量 a+b 表达式 demo(1) 函数 三元表达式 等
2、js代码或者语法
if语句 for语句 等
1、vue实例和容器是一一对应的
2、真实开发中只有一个vue实例,并且会配合着组件一起使用
3、{{xxx}}中的xxx要写js表达式(不能是js代码或者是语法),并且xxx可以自动读取data中的所
有属性
4、一旦data中的数据发生改变,那么模板中用到该数据的地方也会自定更新
-->
<!-- 书写vue案例前,需要准备好一个容器 -->
<div class="root">
<h1>hello,{{name}}</h1>
</div>
<!-- 没有在指定配置对象中的内容是不能正常输出的 -->
<h1>{{name}}</h1>
<script type="text/javascript">
// 创建vue实例对象
const x = new Vue({
el: ".root",
data: {
name: "zhou",
},
});
</script>
</body>
</html>
el和data配置项的说明:
el | el用于指定当前vue实例为哪个容器服务,值通常是css选择器字符串 注意:这里只能写el,不能写成element单词,不然不能识别 |
data | data中用于存储数据,数据提供element所指定的容器使用,值我们暂时先使用对象定义,后续使用函数的方式比较方便 |