初识VUE

florachy

已于 2022-04-19 18:35:28 修改

阅读量464

点赞数

分类专栏： VUE 文章标签： vue

于 2022-04-19 18:26:05 首次发布

本文链接：https://blog.csdn.net/florachy/article/details/124280216

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue简介

Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架。
Vue可以自底向上逐层的应用。针对简单应用，只需要一个轻量小巧的核心库。针对复杂应用，可以引入各式各样的Vue组件。

谁开发的？

尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。

Vue的特点

采用组件化模式，提高代码复用率，且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

学习Vue之前要掌握的JavaScript基础知识

ES6语法规范
ES6模块化
包管理器
原型，原型链
数组常用方法
axios
promise
…

Vue官方使用指南

官网地址：Vue.js
在这里插入图片描述

搭建Vue开发环境

方式一：直接用`<script>`引入

Vue提供两个版本：开发版本(vue.js)，生产版本(vuemin.js)。
开发过程中最好使用开发版本，上线后使用生产版本。

示例
新建文件：初始vue.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
    </body>
</html>

使用浏览器打开【初始vue.html】并且F12打开控制台。
在这里插入图片描述

下载Vue Devtools

提示：“Download the Vue Devtools extension for a better development experience”

下载Vue Devtools
Vue Devtools下载地址：https://github.com/vuejs/vue-devtools#vue-devtools （国内打开可能比较慢）。
根据浏览器下载对应的浏览器插件
浏览器安装插件

阻止vue在启动时生成生产提示

提示：“You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.”

首先去Vue的API文档中查看Vue.config。我们要关注的是productionTip。这个是默认开启的。
修改【初始vue.html】，加入如下内容：

<!--阻止vue在启动时生成生产提示 -->
<script type="text/javascript">
   Vue.config.productionTip=false
 </script>

更改后的【初始vue.html】如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
        </script>
    </body>
</html>

Hello World小案例

解决页签错误

【初始vue.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            Hello World!
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
        </script>
    </body>
</html>

使用浏览器打开【初始vue.html】并且F12打开控制台。这个时候会发现有个错误信息：“favicion.ico not found”-网站页签图标没有找到。
（注意：如果在Network中看不到请求，使用Shift+F5强制刷新一下）
在这里插入图片描述

原因：

浏览器打开任何一个网站都会默认去请求一个页签图标。
我们使用vs code的Live Server打开html文件时，会默认往本机的5500端口号上开了一台内置服务器。当前vs code打开的根目录会作为根资源，从这个根资源中寻找页签图标。
因为这里找不到这个页签图标所以报错了。

解决办法：

将favicion.ico文件放在根目录下。
关闭浏览器，重新打开html文件（或者强制刷新一下）。
就可以看到页签图标正常显示了。

言归正传，我们开始写小案例

【初始vue.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            Hello {{name}}
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
             data:{
                 // data中用于存储数据，数据供el所指定的容器使用。值我们暂时先写成一个对象。
                 name: "World"
             }
         })
        </script>
       
    </body>
</html>

想让Vue工作，就必须创建一个Vue实例且要传入一个配置对象。
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
root容器里的代码被称为【Vue模板】。

案例分析

【初始vue.html】：当存在两个相同的容器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            Hello {{name}}
        </div>
        <div id="root">
            Hello {{name}}
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
             data:{
                 // data中用于存储数据，数据供el所指定的容器使用。值我们暂时先写成一个对象。
                 name: "World"
             }
         })
        </script>
       
    </body>
</html>

我们打开文件后，发现vue只找到了第一个root容器。
在这里插入图片描述

【初始vue.html】：当存在两个相同的容器以及相同的vue实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            Hello {{name}}
        </div>
        <div id="root">
            Hello {{name}}
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
             data:{
                 // data中用于存储数据，数据供el所指定的容器使用。值我们暂时先写成一个对象。
                 name: "World"
             }
         })
         new Vue({
             el:"#root",  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
             data:{
                 // data中用于存储数据，数据供el所指定的容器使用。值我们暂时先写成一个对象。
                 name: "Man"
             }
         })
        </script>
       
    </body>
</html>

结果与上面一样。
在这里插入图片描述

【初始Vue.html】：注意区分：JS表达式和JS代码（语句）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初始Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <!--vue实例中有的属性 -->
            Hello {{name}}<br/>
            <!-- JS表达式 -->
            当前时间是：{{Date.now()}}<br/>
            <!-- vue实例中没有的属性，会报错-->
            我的地址是：{{address}}
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
             data:{
                 // data中用于存储数据，数据供el所指定的容器使用。值我们暂时先写成一个对象。
                 name: "World"
             }
         })
        </script>
       
    </body>
</html>