什么是VUE?

一、什么是VUE?

1.是一个前端框架，让前端的业务逻辑和赋值分离。关注点就着落在了逻辑代码编写上。

2.为什么我们要使用vue？

其实跟jquery差不多，都是简化我们的开发。例如我们可以用vue实现像后端模板渲染的功能，可以更加便捷的绑定dom事件，可以把一些页面的组件打包重复使用。

3.Vue的MVVM设计模式是什么？导致了和jQuery的那些区别？

如果你对前端有过了解的话一定知道MVVM和MVC这两种设计模式，而且很有可能对mvp也有一些了解。
MVC即model，view，control，jQuery就是采用的这种设计模式，熟悉jQuery的同学恐怕早就对$()深通恶绝

MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。

换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。

二、语法

1.使用步骤

引入vue.js
定义html的区域，该区域一定需要有id
书写vue的代码
- el：表示被vue接管的区域，写法 #id
- data：表示数据集合，是一个JSON形式的数据

<!-- 引入vue库 -->
<script src="js/vuejs-2.5.16.js"></script>

<!-- 定义被Vue接管的区域，必须要定义id属性 -->
<div id="app">
    <!-- 定义插值表达式，从Vue对象中获取数据 -->
    {{message}}
</div>

<!-- Vue代码 -->
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message: "Hello Vue!" 
        }
    });
</script>

2.语法

插值表达式

格式：{{ 表达式 }}

位置：在html的标签体部分书写

三、vue 指令基本使用

1、v-on

作用：用于绑定事件

 1 <div id="app">
 2     <button v-on:click="fun('这是使用vue绑定的点击事件')">vue的onclick</button><br/>
 3     {{message}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el:"#app",
 8         data:{
 9             message:"hello world"
10         },
11         methods:{//所有方法都被定义在该json数据中
12             fun:function(msg){
13                 //this：代表该Vue对象， 修改message的值
14                 this.message = msg;
15             }
16         }
17     });
18 </script>

注意：v-on可以简化书写为 @,例如

 1 <div id="app">
 2     <button @click="fun('这是使用vue绑定的点击事件')">vue的onclick</button><br/>
 3     {{message}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el:"#app",
 8         data:{
 9             message:"hello world"
10         },
11         methods:{//所有方法都被定义在该json数据中
12             fun:function(msg){
13                 //this：代表该Vue对象， 修改message的值
14                 this.message = msg;
15             }
16         }
17     });
18 </script>

事件修饰符:

作用：阻止事件的默认行为和传播行为

 1 <div id="app">
 2     <!-- .prevent :阻止事件的默认行为  -->
 3     <form  v-on:submit.prevent action="http://www.itcast.cn" >
 4         <input type="submit" value="Go"> 
 5     </form>
 6     <!-- .stop :阻止事件的传播行为 -->
 7     <div v-on:click="fun">
 8         <a v-on:click.stop href="http://www.itcast.cn">itcast</a>
 9     </div>
10 </div>
11 
12 <script>
13     new Vue({
14         el:"#app",
15         methods:{
16             fun:function(){
17                 alert("haha");
18             }
19         }
20     });
21 </script>

按键修饰符

作用:替代一些特定的键值

 1 <div id="app">
 2     <!-- .enter:表示keydown事件中按下的时回车键 触发事件 -->
 3     <input type="text" @keydown.enter="fun"/>
 4 </div>
 5 
 6 <script>
 7     new Vue({
 8         el:"#app",
 9         methods:{
10             fun:function(){
11                 alert("aaa");
12             }
13         }
14     });
15 </script>

2、v-text/v-html

作用：将Vue中的数据显示到标签体中，即修改元素的标签体内容

 1 <div id="app">
 2     <div v-text="message"></div>
 3     <div v-html="message"></div>
 4 </div>
 5 <script>
 6     new Vue({
 7         el:"#app",
 8         data:{
 9             message:"<h1>Hello Vue!</h1>"
10         }
11     });
12 </script>

3、v-bind

作用：将Vue中的数据显示到属性的值上，即修改元素的属性

 1 <div id="app">
 2     <font v-bind:color="rs1">hello world</font>
 3     <font :color="rs2">hello itcast</font>              
 4 </div>
 5 <script>
 6     new Vue({
 7         el:"#app",
 8         data:{
 9             rs1:"red",
10             rs2:"green"
11         }
12     });
13 </script>

4、v-model

作用：将Vue中的数据更新到表单项value属性上

 1 <div id="app">
 2     用户名：<input type="text" v-model="user.username"><br/>
 3     密码：<input type="text" v-model="user.password"><br/>
 4     <input type="button" v-on:click="fun" value="按钮">
 5 </div>
 6 
 7 <script>
 8     new Vue({
 9         el:"#app",
10         data:{
11             user:{
12                 username:"test",
13                 password:"123"
14             }
15         },
16         methods:{
17             fun:function(){
18                 this.user.username="haha";
19                 this.user.password="1234";
20             }
21         }
22     });
23 </script>

5、v-for

作用：遍历Vue中定义的集合数据

 1 <div id="app">
 2     <ul>
 3         <!-- index表示索引，可以有，可以没有，从0开始，value表示元素 -->
 4         <li v-for="(value,index) in arr">{{value}} and {{index}}</li>
 5     </ul>
 6 </div>
 7 <script>
 8     //view model
 9     new Vue({
10         el:"#app",
11         data:{
12             arr:['a','b','c','d']
13         }
14     });
15 </script>
16 <div id="app">
17     <ul>
18         <li v-for="(value,key) in product">{{key}} and {{value}}</li>
19     </ul>
20 </div>
21 <script>
22     //view model
23     new Vue({
24         el:"#app",
25         data:{
26             product:{id:1,name:"手机",price:1000}
27         }
28     });
29 </script>
30 <div id="app">
31     <table border="1">
32         <tr>
33             <td>序号号</td>
34             <td>编号</td>
35             <td>名称</td>
36             <td>价格</td>
37         </tr>
38         <tr v-for="(p,index) in products">
39             <td>{{index+1}}</td>
40             <td>{{p.id}}</td>
41             <td>{{p.name}}</td>
42             <td>{{p.price}}</td>
43         </tr>
44     </table>
45 </div>
46 <script>
47     new Vue({
48         el: "#app",
49         data: {
50             products: [{
51                 id: 'itcast001',
52                 name: "电视机",
53                 price: 1000
54             }, {
55                 id: "itcast002",
56                 name: "洗衣机",
57                 price: 2000
58             }]
59         }
60     });
61 </script>
62             
63 3.2.6、v-show/v-if
64 作用：控制元素的显示和隐藏
65 
66 <div id="app">
67     <!-- flag 为true渲染，flag为false时，v-if不渲染，v-show将元素的display属性修改为none -->
68     <span v-if="flag">hello itcast</span>           
69     <span v-show="flag">hello ithemai</span>
70     <button @click="fun">切换</button>
71 </div>
72 
73 <script>
74     new Vue({
75         el:"#app",
76         data:{
77             flag:true 
78         },
79         methods:{
80             fun:function(){
81                 this.flag=!this.flag;
82             }
83         }
84     });
85 </script>

四、Vue生命周期

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>vuejs生命周期</title>
 7         <script src="js/vuejs-2.5.16.js"></script>
 8     </head>
 9 
10     <body>
11         <div id="app">
12             {{message}}
13         </div>
14     </body>
15     <script>
16         var vm = new Vue({
17             el: "#app",
18             data: {
19                 message: 'hello world'
20             },
21             beforeCreate: function() {
22                 console.log(this);
23                 showData('创建vue实例前', this);
24             },
25             created: function() {
26                 showData('创建vue实例后', this);
27             },
28             beforeMount: function() {
29                 showData('挂载到dom前', this);
30             },
31             mounted: function() {
32                 showData('挂载到dom后', this);
33             },
34             beforeUpdate: function() {
35                 showData('数据变化更新前', this);
36             },
37             updated: function() {
38                 showData('数据变化更新后', this);
39             },
40             beforeDestroy: function() {
41                 vm.test = "3333";
42                 showData('vue实例销毁前', this);
43             },
44             destroyed: function() {
45                 showData('vue实例销毁后', this);
46             }
47         });
48 
49         function realDom() {
50             console.log('真实dom结构：' + document.getElementById('app').innerHTML);
51         }
52 
53         function showData(process, obj) {
54             console.log(process);
55             console.log('data 数据：' + obj.message)
56             console.log('挂载的对象：')
57             console.log(obj.$el)
58             realDom();
59             console.log('------------------')
60             console.log('------------------')
61         }
62         //vm.message = "good...";
63         vm.$destroy(); 
64     </script>
65 
66 </html>

五、axios

GET请求:

//参数直接拼接到url后面
axios.get("/user/findById.do?id=1").then(function(response){
    //请求成功后的回调函数
    //response.data :controller方法响应的json数据
});

//参数是独立的 {params:{}} 是固定的写法
axios.get("/user/findById.do", {params:{id: 1}}).then(function(response){
    //请求成功后的回调函数
    //response.data :controller方法响应的json数据
});

POST请求:

1 //{id:1, username: "张三"} :代表参数
2 axios.post("/user/findById.do", {id:1, username: "张三"}).then(function(response){
3     //请求成功后的回调函数
4     //response.data :controller方法响应的json数据
5 });