Vuejs入门级简单实例
Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。今天简单介绍一下Vue的使用。首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：v1.html:{{message}}
·
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
}
})
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)