Vue入门教程--Vue的第一个实例（article:1）

Vue.js 初步入门框架介绍什么是vueVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。学习vue的前提学习vue之前...

DuCeh

486人浏览 · 2019-08-28 12:58:53

DuCeh · 2019-08-28 12:58:53 发布

Vue.js 初步入门

框架介绍

什么是vue

在这里插入图片描述

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

学习vue的前提

学习vue之前，必须要储备的基本知识有：

HTML
CSS
JavaScript(甚至要掌握ES6)
准备工作

首先要从官网下载最新版的vue，也可以是任意Vue2.x版本。
可以用<script>标签在线引入,也可以下载本地文件再引入。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Hello vue.js

以下是vue的第一个实例，我会用注释详细注明各个语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloVue</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--用script引入本地vue-->
	</head>
	<body>
		<!--首先要定义一个本页的全局容器，
		用来做vue的依赖元素-->
		<div id="container">
			<!--这是一个p标签，里面用来填充文本，
			其中的{{####}}双花括号是表达式语句，
			类似于es6中的${}表达式-->
			<p>{{msg}}</p>
		</div>
	</body>
	<script type="text/javascript">
		// 新建一个vue对象,里面需要传入一个“选项对象”
		// 也可以理解成json对象
		new Vue({
			//el是element的缩写,传入vue依赖的元素
			el:"#container",
			//数据与,所有与UI交互的数据都可以放在这儿
			data:{
				msg:"hello vue.js"
			},
			//方法块,用来放置方法
			methods:{}
		});
	</script>
</html>

运行结果如图所示：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^