【Vue 学习】- VueJS 简单入门

末蓝、 2021-09-21 00:52 783阅读 0赞

**目录**

一、概述

1、Vue 介绍

2、MVVM 模式

二、Vue 入门

1、使用 IDEA 开发 Vue

2、插值表达式

--------------------

# 一、概述 #

## 1、Vue 介绍 ##

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

*  Vue 官网：[https://cn.vuejs.org/][https_cn.vuejs.org]
 *  Vue 学习官网：[https://cn.vuejs.org/v2/guide/][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，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

# 二、Vue 入门 #

## 1、使用 IDEA 开发 Vue ##

【1】使用 web 骨架创建 Maven 工程

使用 idea 自带的 web 骨架创建 Maven 工程，并设置相关目录，引入 js，在 webapp 目录下创建要编写的 HTML 页面，创建好后目录结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1][]

【2】编写第一个Vue程序

步骤如下：

1.  导入vuejs：
    
    1.  <script src="js/vuejs-2.5.16.js"></script>
2.  定义 id 为 app 的区域：
    
    1.  <div id="app">  
        </div>
3.  创建 vue 对象：
    
    1.  new Vue(\{...\});
4.  将 id 为 app 的区域给 vue 接管
    
    1.  el:"\#app"
5.  定义数据：
    
    1.  date:\{  
                        message:"hello onestar"  
                    \}
6.  将定义和显示分离：
    
    1.  在app区域编写插值表达式：\{ \{message\}\}

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>oneStar</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       {message}}		
    		</div>
    
    		<script>
    			//view model
    			new Vue({
    				el:"#app",  //将 id 为 app 的区域给 vue 接管
    				data:{	//定义数据
    					message:"hello onestar"
    				}
    			});
    		</script>
    	</body>
    </html>

【3】部署 Tomcat 访问页面

![20191221115424930.png][]

## 2、插值表达式 ##

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

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

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

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

{
       {var a = 1;}}
    {
       {if(a == 10){}}}

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 2][]

[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/60bb43ab7b8447ef80e44d626327994f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1]: /images/20210920/af68cd83a62a44a8bd3cd4531f2bceb4.png
[20191221115424930.png]: /images/20210920/0db7e0567f414cd29497d3db25e85d21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 2]: /images/20210920/7d58bf72f17b417181980cb9179794e4.png