第一个Vue程序
- 什么是Vue框架？
- Vue的优缺点？
- 我的第一个Vue程序
- 加入Vue框架
- 代码
- 代码解释
- el挂载点
- Vue实例的作用范围是什么呢？
- 是否可以使用其他的选择器？
- 是否可以设置其他的dom元素呢？
- data:数据对象
什么是Vue框架？
为了实现前后端分离的开发理念，开发前端 SPA（single page web application） 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。
Vue的优缺点？
其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下：
- 1.轻量级的框架(相对而言)
- 2.双向数据绑定
- 3.指令
- 4.插件化
优点：
-
简单：官方文档很清晰，比 Angular 简单易学。（国内框架，demo，文档多）
-
快速：异步批处理方式更新 DOM。（同时进行）
-
组合：用解耦的、可复用的组件组合你的应用程序。（功能由不同的单个功能组件构成）
-
紧凑：~18kb min+gzip，且无依赖。
-
强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
-
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
我的第一个Vue程序
加入Vue框架
- 加入link
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 通过node.js下载脚手架
第二点在后面再介绍
代码
<!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>第一个vue程序</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
})
</script>
</body>
</html>
代码解释
el挂载点
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用ID选择器
是否可以设置其他的dom元素呢？
可以使用其他的双标签，不能使用HTML和BODY
data:数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
<!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>第一个vue程序</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{school.name}} {{school.moblie}}</h2>
<ul>
<li>{{campus[1]}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello vue!",
school:{
name:'41',
moblie:"123456"
},
campus:['北校区','南校区']
}
})
</script>
</body>
</html>
![[VUE框架学习笔记]初始化Vue项目(vscode详细图示)](https://img-blog.csdnimg.cn/20210420151339474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2ODMy,size_16,color_FFFFFF,t_70#pic_center)
![[VUE框架学习笔记]VsCode快速生成vue组件模板(详细图示！)](https://img-blog.csdnimg.cn/20210420155309969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2ODMy,size_16,color_FFFFFF,t_70#pic_center)
![[剑指offer]JT64---滑动窗口的最大值(deque双向队列滑动窗口！)](https://img-blog.csdnimg.cn/20210420191055268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2ODMy,size_16,color_FFFFFF,t_70#pic_center)