【Vue 学习】- Vue 简单入门（vscode开发Vue）

转载
UG666
2022-05-24
日常学习
223
0

一、概述

1. Vue介绍

    Vue 全称为 Vue.js，是一个构建数据驱动的 web 界面的渐进式框架，此框架是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

  • Vue 官网：https://cn.vuejs.org/
  • Vue 学习官网：https://cn.vuejs.org/v2/guide/

2. MVVM 模式

    MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

    Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷。

二、Vue 入门

  1. 使用 vscode 开发 Vue

读者自行下载vscode，下载地址：https://code.visualstudio.com/

1.1 下载vscode插件

    为了方便开发vue，这里先在vscode下载好如下几个插件，安装好后重启vscode：

  • 汉化：Chinese
  • 服务：Live Server
  • vue开发：Vetur
  • 简化vue开发：vue-helper

1.2 创建工作区

所有的前端代码都写在工作区里面

  1. 在本地创建文件夹
  2. 使用vscode打开创建的文件夹
  3. 将工作区另存为
  4. 新建HTML文件（代码写在这个文件里面）

1.3导入js

可以进官网下载js，放到本地，也可以引入连接，官网有生产版本和开发版本，根据自己需求来：https://cn.vuejs.org/v2/guide/installation.html ，博主是将生产版本下载到了本地。

  1. 第一个Vue程序

2.1 步骤

导入vuejs：

<script src="vue.min.js"></script>

定义 id 为 app 的区域：

<div id="app">
    </div>

创建 vue 对象：

new Vue({...});

将 id 为 app 的区域给 vue 接管

el:"#app"

定义数据：

date:{ message:"hello onestar" }

将定义和显示分离： 在app区域编写插值表达式：{{message}}

2.2 代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>oneStar</title>
      <script src="vue.min.js"></script>
    </head>
    <body>
      <div id="app">
	  <!--将定义和显示分离，编写插值表达式-->
        {{message}}
      </div>
    <script>
      //view model
      new Vue({
		  //将 id 为 app 的区域给 vue 接管
          el:"#app",
		  //定义数据
          data:{
          message:"hello onestar"
        }
      });
    </script>
    </body>
    </html>

2.3 运行

右击vscode页面，点击Open with Server，会使用默认浏览器运行

  1. 插值表达式

    在刚刚的入门案例中，将定义和显示分离，用到了插值表达式，插值表达式就是将数据进行绑定，数据绑定最常见的形式就是使用“Mustache”，也就是双大括号的文本插值，Mustache 标签将会被替代为对应数据对 象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

    Vue.js提供了完全的 JavaScript 表达式支持：

{{number + 1}}
{{ok ? "yse" : "no"}}

    这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个 表达式，所以下面的例子都不会生效。

<!--插值表达式不支持-->
{{var a = 1;}}
{{if(a == 10){}}}
end

评论