VUE入门指北

最新推荐文章于 2023-12-27 17:32:27 发布

Nicker2013

最新推荐文章于 2023-12-27 17:32:27 发布

阅读量183

点赞数

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

本文链接：https://blog.csdn.net/Nicker_/article/details/110538487

版权

前端同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

VUE

11 篇文章 2 订阅

订阅专栏

VUE入门指北

仅供零基础入坑初学者参考。

官方定位：vue是一套用于构建用户界面的渐进式框架。
其特点包括：MVVM 响应式数据绑定 组件化 Virtual DOM

当前环境

时间：2020-12-03
当前vue主要版本为2.6.12.一般情况下直接说vue也是指vue2.x版本。
最新vue3版本为3.0beta，其github版本为3.0.4

建议从2.6.12入坑，熟悉之后，再入坑vue3

官方资料

VUE官网：https://vuejs.org/
VUE中文官网：https://cn.vuejs.org/

VUE2.x中文教程：https://cn.vuejs.org/v2/guide/
VUE3.x目前只有英文教程：https://v3.vuejs.org/guide/introduction.html

vue github源码：https://github.com/vuejs/vue
vue3 github源码：https://github.com/vuejs/vue-next

入门视频：https://learning.dcloud.io/#/?vid=0

安装

NPM安装

一般情况下，需提前安装好nodejs，安装最新版本，只用在命令行运行：

npm install vue

在npm包的dist目录下，可以找到不同的vue.js构建版本。

其他版本

了解其他版本，及安装使用方法，可查看官网的多个版本介绍。

基础使用

按照官方说法，使用vue需要一定的网页编程相关基础，了解 html 和JavaScript、CSS。

Hello world

国际惯例，从hello world开始。
首先，文件夹下，包含两个文件，一个是vue.js（来源于npm安装包），一个是index.html，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascrpit" charset="utf-8"></script>	
</head>
<body>
	<div id="app">
	  {{ message }}
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>
</body>
</html>

看到的效果，自然是空白的界面上显示了Hello Vue!。

之后的讨论，一般仅限于讨论body标签中的情况，省略其他诸如head之类的代码。
官方的文档，基本也是只介绍此部分代码的书写，（默认读者其他的都懂了）。

其他基础语法

可查看官网教程及其后续部分：声明式渲染
总结起来，关键包括

分类               关键                        例子                                           简写
文本差值          {{ }}                        {{ message }}
绑定数据         v-bind                     v-bind:title="message"                     :title="message
条件         v-if, v-else-if, v-else       v-if="seen"
循环               v-for                   v-for="data, key in datalist"
响应点击      v-on:click                    v-on:click="onClick_Func"                 @click="onClick_Func"

使用{{}}和v-bind都是进行数据绑定，不同的是{{}}是绑定文本，而v-bind主要用来绑定attribute或者是DOM的property。
条件语法主要是空置显示谁，不显示谁。不显示的部分，连内部的相关计算都省去了。
循环语法主要用来显示一系列的相同元素，例如列表。

模板语法

通常，Vue通过模板语法来编写，也可以不通过模板，直接写渲染函数（render），使用JSX语法（用起来和react的jsx很像）。
当然，作为入门者，推荐用模板语法来书写。
上文提到的基础语法，都属于模板语法，更多内容，详见模板语法

其他文章

VUE入门指北——(2)数据、方法、生命周期
 VUE入门指北——(3)单文件组件.vue文件
 Vuex入门教程快速入门简介

Nicker2013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE入门指北

VUE入坑指北仅供零基础入坑初学者参考。官方定位：vue是一套用于构建用户界面的渐进式框架。当前环境时间：2020-12-03当前vue主要版本为2.6.12.一般情况下直接说vue也是指vue2.x版本。最新vue3版本为3.0beta，其github版本为3.0.4建议从2.6.12入坑，熟悉之后，再入坑vue3官方资料VUE官网：https://vuejs.org/VUE中文官网：https://cn.vuejs.org/VUE2.x中文教程：https://cn.vuejs.o
复制链接

扫一扫

专栏目录