初识Vue(尚硅谷Vue学习笔记)

初识Vue

Vue.js 简介

Vue的特征

官网定义

Vue的官网定义为"一套用于构建用户界面的渐进式框架"，意思是可以将数据变成用户界面并根据需求引入相应的组件的一套框架。它还可以通过组件化的方式来提高代码的复用率。

虚拟DOM

和React类似，Vue可以通过虚拟DOM来提升网页速度。虚拟DOM类似一个缓冲，先将数据渲染到虚拟DOM上，使用diff算法得出虚拟DOM与真实DOM的区别，只把区别的地方渲染到真实DOM上。

声明式

和声明式相对的是命令式编码。

命令式：向前一步，向左转，再向前一步，拿起桌子上的食物……

声明式：我饿了，拿点食物。

Vue的历史

• 2013年
  • 受到Angular框架的启发，尤雨溪开发出了一款轻量框架 一Seed。
    同年12月，Seed更名为Vue，版本号0.6.0。
• 2014年
  • Vue正式对外发布，版本号0.8.0
  • Taylor otwell在Twitter上发表动态，说自己正在学习Vue.js, 带动了大量开发人员学习Vue
• 2015年
  • 10月27日，正式发布Vue1.0.0 Evangelion（新世纪福音战士，动漫名称）
• 2016年
  • 10月1日，正式发布Vue 2.0.0 Ghost in the Shell(攻壳机动队)
• 2020年
  • 9月18日，正式发布Vue 3.0.0 One Piece（海贼王）

Vue的HelloWorld

环境

在官网下载vue.js，并导入到项目文件夹就可以了。

HelloWorld代码

创建一个HTML文件

导入Vue

<!--引入Vue-->
<script src="js/vue.js"></script>

两行提示

在VS Code中使用Live Server启动网页，在控制台中，会发现几句提示

这里需要下载Vue的开发者工具

去Chrome商店里安装就可以了。

第二个提示说，现在Vue是开发者模式，会产生很多警告。

添加一个script标签

<script>
    // 生产环境提示取消
    Vue.config.productionTip=false
</script>

这样，两条提示就都没了。

正式开始

首先在body中创建一个div容器，暂时先添加一段文字

<!-- 创建一个容器 -->
<div id="root">
    <!-- 一段文字 -->
    <p>Hello Vue</p>
</div>

在js中实例化Vue

// 创建一个Vue实例,并传入配置对象
const x = new Vue({
    el: '#root' //el用于将Vue与容器联系在一起，值为CSS选择器字符串
});

配置对象中的el就将html中的容器与Vue联系起来

配置类中还可以传入data属性来存储固定数据。

data: { //data可以用于存储数据，供el指定的元素使用，亦可写作其他形式
    'name': 'Vue'
}

模板中就可以通过{{}}来调用数据

<p>
    Hello,{{name}}
</p>

这样，Vue的HelloWorld就完成了

总结

1. 想让Vue工作，就必须创建个Vue实例， 且要传入 一个配置对象;

2. root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法;

3. root容器里的代码被称为[Vue模板];

4. Vue实例和容器一一对应;

5. 真实开发中只有一个Vue实例，并且配合组件一起使用;

6. {{ }}里要写JS表达式，能读取到data中的所有属性

7. 一旦data改变，页面中引用data的地方也会改变

任务

• 了解Vue的特点
• 能写出Vue的HelloWorld