浅学一下Vue(1) Vue入门
前置准备
- 要有前端三件套基础 html + js + css
- 要有一台电脑和一个大脑 (要去练习的!)
- 还要会做笔记 笔记非常主要哦
Vue 介绍概述
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
以上为官网的介绍
vue是属于一个轻量级的前端框架,它可以做到响应式的页面内容,可以根据用户的修改立马给出反馈
vue主要关注视图层 是因为有一个框架 :MVVM 这也是vue的核心思想
那什么是MVVM呢 概括的说就是 Model View ModelView
Model:数据 View:视图 ModelView:数据和视图
vue呢就是将数据层 和视图层 转换为 数据视图层 也就是将这两个部分整合起来
可以理解为数据都写在一个地方 视图都写在一个地方,而vue就是接受到这些数据和视图,然后将他们对应的整合起来并且解析到页面上去
vue还有一个特点就是拥有一个虚拟DOM 不需要频繁的操作DOM
在虚拟DOM中 会使用一个叫做 diff算法 的方式来比较元素的变化和大小 避免重复解析相同的元素
Vue入门
导包
程序员的开始 一定是Hello world (但是官网居然是hello vue)😕
首先我们去引入一个vue包
可以在线引入也可以引入下载下来后离线的包
我这里使用离线的vue包:
<script src="../js/vue.js"></script>
这里使用的是完整版的vue.js 还有一个精简版的vue.js.min
它们两个的区别在于:
完整版的vue有报错提示和开发者工具使用调试 ,而精简版的vue去除了这些
所以在学习测试环境 我们使用完整版的vue
等我们完成了项目准备上线项目后 就使用精简版的vue
编写代码
导包完了以后 我们就可以正式的开始写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>初识VUE</title>
<!-- 引入VUE -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
const x = new Vue({
el: '#root',
data:{
name:'MianJu'
}
});
</script>
</html>
我们来分析一下这些 html代码(我们不是学的vue吗😅)
-
首先在body框中 我们声明了一个 id为root的 div块
-
并且在其中写了一个 h1 标签 其中写了一个我们从来没见过的语法 {{xxx}}
- 这个是vue的语法 它的名字叫做 插值语法 {{name}}中的name 就是对应的data中的name的值
- 这个地方会根据name的值随着变化 有个监控的效果 如果name更改了页面上的{{name}} 部分就会随着立马更改
-
在new Vue中 对应传入的配置项的话有多种
-
el:绑定对应的一个块元素 一个vue实例只能绑定一个el
-
data:对应的vue中所需要管理的数据内容 有两种方式声明 此处使用的是对象式
-
对象式:使用对象的方式来声明data中的所有数据key与value
例如
{name:'MianJu',sex:'man'}
-
函数式:使用函数返回值的方式来声明data中的数据
例如
data(){ return { name:'MianJu', sex:'man' } }
-
在后面的组件中 只能使用函数式来声明data
-
-
当然Vue不止这点配置项,后面会跟着学习衍生出更多的配置项😃