【Vue 学习】- Vue 简单入门(vscode开发Vue)

原文链接:https://onestar.newstar.net.cn/blog/55

本文将对Vue进行简单的介绍,并对vscode开发vue进行讲述


一、概述

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,保证视图和数据的一致性,这种轻量级的架构让前端 开发更加高效、便捷。

image

二、Vue 入门

1. 使用 vscode 开发 Vue

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

1.1 下载vscode插件

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

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

image

1.2 创建工作区

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

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

1.3导入js

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

image

2. 第一个Vue程序

2.1 步骤

  1. 导入vuejs:
  2. 定义 id 为 app 的区域:
<div id="app">
</div>
  1. 创建 vue 对象:
    1. new Vue({...});
  2. 将 id 为 app 的区域给 vue 接管
    1. el:"#app"
  3. 定义数据:
    1. date:{ message:"hello onestar" }
  4. 将定义和显示分离:
    1. 在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({
				el:"#app",  //将 id 为 app 的区域给 vue 接管
				data:{	//定义数据
					message:"hello onestar"
				}
			});
		</script>
	</body>
</html>

2.3 运行

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

image

3. 插值表达式

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

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

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

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

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

【点关注,不迷路,欢迎持续关注本站】

end
  • 作者:ONESTAR(联系作者)
  • 更新时间:2020-08-05 23:32
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:如果是转载栈主转载的文章,请附上原文链接
  • 公众号转载:请在文末添加作者公众号二维码(公众号二维码见右边,欢迎关注)
  • 评论