一、Vue初识和简单应用

最新推荐文章于 2022-11-15 16:56:27 发布

仰望天空的小小蜗牛

最新推荐文章于 2022-11-15 16:56:27 发布

阅读量593

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46724415/article/details/121320051

版权

Vue.js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

本文介绍了Vue.js的基本概念，包括其官网、发展历程和主要特点，如遵循MVVM模式、组件化开发、声明式编码等。通过一个简单的步骤教你如何创建Vue实例，包括下载Vue.js、在HTML中引入并创建Vue实例。此外，还提到了Vue开发者工具的安装方法及Vue实例与数据绑定的工作原理。

摘要由CSDN通过智能技术生成

一、Vue简介

1-1.官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1-2.Vue发展历程

在这里插入图片描述

1-3. 描述

动态构建用户界面的渐进式 JavaScript 框架，作者是尤雨溪
在这里插入图片描述

二、Vue 的特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

4. 采用`组件化`模式，提高代码复用率、且让代码更好维护

在这里插入图片描述

5. `声明式`编码，让编码人员无需直接操作DOM，提高开发效率

在这里插入图片描述

6. 使用`虚拟DOM`和优秀的`Diff算法`，尽量复用DOM节点

在这里插入图片描述

三、简单应用–直接用

只需要一个轻量小巧的和核心库

第一步：打开官网，下载开发版本

在这里插入图片描述

第二步：新建一个js文件夹，把下载的vue.js放进去，并且新建一个html直接用

在这里插入图片描述

第三步：安装Vue开发者工具

打开控制台
看到第一个提示我们安装，第二个是生产提示，只要我们配置Vue.config.productionTip = false 就能阻止 vue 在启动时生成生产提示。
在这里插入图片描述

安装Vue开发者工具–方法一

在这里插入图片描述

第一种方法是直接安装，如果翻墙能直接安装成功，然后直接添加值Chrome就行
在这里插入图片描述
打开扩展工具查看

有个钉钉按钮可以把扩展工具钉住在上面，方便使用

安装Vue开发者工具–方法二

第二种方法是用之前下载好的，直接拖进谷歌浏览器
在这里插入图片描述
拖进来后弹出提示“要添加Vue.js devtools吗” ，选择“添加扩展工具”

第四步创建Vue实例

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
js代码(语句)
(1). if(){}
(2). for(){}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
	<div id="demo">
		<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
	</div>
    <script type="text/javascript">
      Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
      
      // 创建Vue实例
      new Vue({
        el: '#demo', 
        data: {
          name: 'xiaoming',
          address: '珠海'
        }
      })

    </script>
  </body>
</html>

在这里插入图片描述
补充一下

报错原因：少了页签图标
在这里插入图片描述
现在要理解的是找谁要页签图标，来到控制台，找到Network，强制刷新，可以看出，页签图标是根据5500端口去请求的。我使用的VSCode使用了一个插件Live Server，当我执行Open with Live Server，会打开当前的网页，同时它就在这瞬间开启5500的内置服务器，把整个项目的工程文件夹都作为这台服务器的根资源去使用。
在这里插入图片描述
根资源这样理解，在浏览器打开页面http://127.0.0.1:5501，意思是直接找5500这台服务器，看到它给我这些东西就是工程里的文件夹

自己加一个favion.ico页签图标放到根路径，这样就不会报错了