Vue.js—快速⼊门及实现图书管理系统前⾔
今天我们主要⼀起来学习⼀个新框架的使⽤——Vue.js，之前我们也讲过AngularJS是如何使⽤的，⽽今天要讲的Vue.js的语法和AngularJS很相似，因为 AngularJS 是 Vue 早期开发的灵感来源。然⽽，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。AngularJS 使⽤双向绑定，Vue 在不同组件间强制使⽤单向数据流，这使应⽤中的数据流更加清晰易懂。
在实现图书馆系统之前，我们先学习⼀下Vue.js的⼀些基础语法的使⽤。
1  第⼀个Vue实例
每个 Vue 应⽤都是通过Vue函数创建⼀个新的 Vue 实例开始的，当创建⼀个 Vue 实例时，你可以传⼊⼀个选项对象。
⼀个 Vue 应⽤由⼀个通过new Vue创建的根 Vue 实例，以及可选的嵌套的、可复⽤的组件树组成。
Vue.js使⽤{{ }}绑定表达式，⽤于将表达式的内容输出到页⾯中。表达式可以是⽂字，运算符，变量等，也可以在表达式中进⾏运算输出结果
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body>
8<div id="app">
9            {{message}}
10</div>
11
12<script type="text/javascript" src="js/vue.js"></script>
13<script type="text/javascript">
14//声明式渲染
15var app = new Vue({  //创建Vue对象
16                el:"#app",  //把当前Vue对象挂载到div标签上,#app是ID选择器
17                data:{
18                    message:"Hello Vue!",//message是⾃定义的数据
19                }
20
21            });
22</script>
23</body>
24</html>
在创建Vue实例时，需要传⼊⼀个选项对象，选项对象可以包含数据、挂载元素、⽅法、模⽣命周期钩⼦等等。
在这个⽰例中，选项对象的el属性指向View，el: '#app'表⽰该Vue实例将挂载到<div id="app">...</div>这个元素；
data属性指向Model，data: message表⽰我们的Model是message对象。
Vue.js有多种数据绑定的语法，最基础的形式是⽂本插值，使⽤⼀对⼤括号语法，在运⾏时{{ message }}会被数据对象的message属性替换，所以页⾯上会输出"Hello World!"。
2  双向绑定实例
⾸先我们先解释⼀下什么是双向绑定， Vue框架很核⼼的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到Vue对象，另外反⽅向数据也是绑定的。MVVM模式本⾝是实现了双向绑定的，
在Vue.js中可以使⽤v-model指令在表单元素上创建双向数据绑定。将message绑定到⽂本框，当更改⽂本框的值时，{{ message }}中的内容也会被更新。反之，如果改变message的值，⽂本框的值也会被更新。反过来，如果改变message的值，⽂本框的值也会被更新，我们可以在Chrome控制台进⾏尝试。
下⾯的栗⼦是在表单控件元素（input等）上创建双向数据绑定（数据源）；跟Angular中ng-model⽤法⼀样。
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body>
8<div id="app">
9            {{message}}
10
11
13<input v-model="message"/>
14</div>
15</body>
16<script type="text/javascript" src="js/vue.js"></script>
17<script type="text/javascript">
18//声明式渲染
19var app = new Vue({
20                el:"#app",
21                data:{
22                    message:"Hello Vue",
23                }
24
25            });
26</script>
27</html>
3  Vue.js的常⽤指令
上⾯⽤到的v-model是Vue.js常⽤的⼀个指令，那什么是指令呢？
Vue.js的指令是以v-开头的，它们作⽤于HTML元素，指令提供了⼀些特殊的特性，将指令绑定在元素上时，指令会为绑定的⽬标元素添加⼀些特殊的⾏为，我们可以将指令看作特殊的HTML特性。
Vue.js提供了⼀些常⽤的内置指令，接下来就给⼤家介绍⼏个Vue中的常⽤指令：
1、v-if指令
2、v-else指令
3、v-show指令
4、v-for指令
5、v-on指令
6、v-bind 指令
3.13.2
v-if 指令
v-if 是条件渲染指令，它根据表达式的真假来删除和插⼊元素，这个例⼦演⽰了我们不仅可以绑定 DOM ⽂本到数据，也可以绑定 DOM 结构到数据。
1 <!DOCTYPE html >
2 <html >
3    <head >
4        <meta charset ="UTF-8">
5        <title ></title >
6    </head >
7    <body >
8        <div id ="app">
9            <h1>Hello, Vue.js!</h1>
10            <h1 v-if ="yes">Yes </h1>
11            <h1 v-if ="no">No </h1>
12            <h1 v-if ="age >= 12">Age: {{ age }}</h1>
13        </div >
14    </body >
15    <script src ="js/vue.js"></script >
16    <script >17
18        var  vm = new
Vue({19            el: '#app',
20            data: {
21                yes: true ,
22                no: false ,
23                age: 20,
24        }
25        })
26    </script >
27 </html >
v-else 指令
可以⽤ v-else 指令给 v-if 添加⼀个 "else" 块，条件都不符合时渲染。v-else 元素必须紧跟在带 v-if  或者 v-else-if  的元素的后⾯，否则它将不会被识别。
1 <!DOCTYPE html >
2 <html >
3    <head >
4        <meta charset ="UTF-8">
5        <title ></title >
6    </head >
7    <body >
8        <div id ="app">
3.3 9            <div v-if ="num>90">
10                {{score1}}
11            </div >
12            <div v-else >
13                {{bananer}}
14            </div >
15        </div >
16
17    <script src ="cdn.bootcss/vue/2.2.2/vue.min.js"></script >18        <script type ="text/javascript">
19            var  app = new  Vue({
20                el: "#app",
21                data:{
22                    num:98,
23                    score1:"恭喜你是优秀哦！",
24                    score2:"需要继续努⼒哦！"
25                }
26            });
27        </script >
28    </body >
29 </html >
v-show 指令
v-show 也是条件渲染指令，和v-if 指令不同的是，使⽤v-show 指令的元素始终会被渲染到HTML ，它
只是简单地为元素设置CSS 的style 属性。值得我们注意的是，v-show 不⽀持 <template> 元素，也不⽀持 v-else 。
1 <!DOCTYPE html >
2 <html >
3    <head >
4        <meta charset ="UTF-8">
5        <title >综合实例</title >
6    </head >
7    <body >
8    <div id ="app">
9        <h1 v-show ="teng">这是个真理！</h1>
10            <template v-show ="false">
11                <div >我好漂亮！</div >
12                <div >我⾮常漂亮！</div >
13                <div >我特别漂亮！</div >
14            </template >
15    </div >
16    </body >
17
<script src ="cdn.bootcss/vue/2.2.2/vue.min.js"></script >
18    <script type ="text/javascript">
19        var  vm=new  Vue({
20            el:'#app',
21            data:{
22                teng:true
23            }
24        })
25    </script >
26 </html >
3.43.5
angular和angularjs
v-for 指令
循环使⽤ v-for 指令,v-for 指令可以绑定数组的数据来渲染⼀个项⽬列表。
1 <!DOCTYPE html >
2 <html >
3    <head >
4        <meta charset ="UTF-8">
5        <title ></title >
6    </head >
7    <body >
8        <div id ="app">
9            <ol >
10                <li v-for ="teng in shuai">
11                  {{ teng.name }}
12                </li >
13            </ol >
14        </div >
15
16        <script src ="cdn.bootcss/vue/2.2.2/vue.min.js"></script >17        <script type ="text/javascript">
18            var  app = new  Vue({
19
el: "#app",
20                data:{
21                    shuai: [
22                      { name: '帅！' },
23                      { name: '真帅！' },
24                      { name: '特别帅！' }
25                    ]
26                }
27            });
28        </script >
29    </body >
30 </html >
v-on 指令
事件监听可以使⽤ v-on 指令。
通常情况下，我们需要使⽤⼀个⽅法来调⽤ JavaScript ⽅法。v-on 可以接收⼀个定义的⽅法来调⽤。除了直接绑定到⼀个⽅法，也可以⽤内联 JavaScript 语句.
1 <!DOCTYPE html >
2 <html >
3    <head >
4        <meta charset ="UTF-8">
5        <title ></title >
6    </head >
7    <body >
8        <div id ="app">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。