vue.js最最最最简单实例
vue.js最最最最简单实例
一、总结
一句话总结：
1、vue.js实现实现数据的双向绑定用的是什么标记？
双大括号：比如{{message}}
2、vue数据循环输出的标记是什么？
用的是标签的v-if自定义属性
10 <span v-if="ok">
11 {{message}}
12 </span>
循环读取数据感觉和thinkphp有点像
15 <li v-for="l in list">
16 my name is {{l.name}},I am {{l.age}} years old
17 </li>
3、vue.js的使用步骤是怎样的？
a、引包
b、{{变量名}} 实现双向数据绑定
c、new Vue对象来操作数据
二、最最最最简单的Vue示例（使用vue.js实现数据绑定实例）
1、基本介绍。
Vue作为中国人自己开发和维护的前端框架，兼备了angular和react的一些优点。先从一个最简单的Vue示例开始：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
2、使用
a、引包
首先，作为一个js框架，我们需要引入它的库vue.js.就像我们学习jquery，我们就要使用script标签引入jquery.js。
这个src可以是自己下载的vue包，也可以是线上维护更新的cdn，这两者的唯一区别就是：我们使用自己下载的包，稳定且安全。使用cdn托管的方式，有可能代码托管的服务器出问题，会影响自己的项目。
b、{{变量名}} 实现双向数据绑定
其次，我们看到界面的这个东西：{{message}}。
这是一种数据双向绑定的语法，熟悉angular或者react的都知道，这里面的是一个变量，这个变量的值我们在js代码中赋值改变，界面就会跟着改变。如果message我们赋值为hello，界面就会展示hello。
c、new Vue对象来操作数据
最后，我们看这段代码：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})其中：new Vue代表了我们对我们的界面操作的申明。
el：“#app”,代表我要在id为app的div盒子中操作数据，表达的是一种入口和范围的概念，就像我是一个中国人，我的活动范围就是中国，我的所有的所作所为目前就在中国这个范围内。
data：{
message：“hello vue,js!”
}
这是数据的双向绑定的写法，我们改变message的值，界面中的值会跟着改变。
这就是一个基本的最简单的vue代码的实现。
<完>
参考：Vue初体验（一），最简单的Vue示例 - CSDN博客
https://blog.csdn.net/mapbar_front/article/details/71941517
三、使用Vue实现数据绑定与判断循环最最最简单实例
Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。今天简单介绍一下Vue的使用。
首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环：
1 <!DOCTYPE html> 2 .<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app1"> 9 <!--vue判断--> 10 <span v-if="ok"> 11 {{message}} 12 </span> 13 <!--vue循环--> 14 <ul> 15 <li v-for="l in list"> 16 my name is {{l.name}},I am {{l.age}} years old 17 </li> 18 </ul> 19 </div> 20 <!--引入cdn库，引入js需要在最底部--> 21 <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script> 22 <script src="js/v1.js" type="text/javascript" charset="utf-8"></script> 23 </body> 24 </html>
js代码:
//声明
02.var app1=new Vue({
03. //绑定 DOM 元素
04. el:'#app1',
05. data:{
06. message:"hello world",
07. list:[
08. {name:'lvxueyuan',age:15},
09. {name:'xueyuan',age:15},
10. {name:'yuan',age:15},
11. {name:'lv',age:15},
12. {name:'lvxue',age:15}
13. ],
14. ok:1
15. }
16.})
大家快来试试吧!!!
https://www.cnblogs.com/yang-ting/p/7152506.html
