Vuejs入门级简单实例

Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。今天简单介绍一下Vue的使用。首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：v1.html:{{message}}

包子源

2918人浏览 · 2017-01-10 10:52:51

包子源 · 2017-01-10 10:52:51 发布

Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。

今天简单介绍一下Vue的使用。

首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：

v1.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app1">
			<!--vue判断-->
			<span v-if="ok">
				{{message}}
			</span>
			<!--vue循环-->
			<ul>
				<li v-for="l in list">
					my name is {{l.name}},I am {{l.age}} years old
				</li>
			</ul>
		</div>
		<!--引入cdn库，引入js需要在最底部-->
		<script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
		<script src="js/v1.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

v1.js:

//声明
var app1=new Vue({
	//绑定 DOM 元素
	el:'#app1',
	data:{
		message:"hello world",
		list:[
			{name:'lvxueyuan',age:15},
			{name:'xueyuan',age:15},
			{name:'yuan',age:15},
			{name:'lv',age:15},
			{name:'lvxue',age:15}
		],
		ok:1
	}
})

快来试试吧

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}$/, //不连续的两位字母// /^