Vue框架入门

作者: 月哥说了算 | 来源:发表于2019-07-12 00:13 被阅读0次

VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。详细介绍请查看官网。
官网地址:https://cn.vuejs.org/

首先引入vue.js文件

Snipaste_2019-07-11_21-06-35.png

Vue插值表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>       
    </head>
    <body>
        <!--如果id相同只有第一个起作用-->
        <div id="app"   >
            {{user.name}}
            {{msg}}
        </div>  
        <!--拿不到值-->
        <div id="app"   >
            {{user.name}}
            {{msg}}
        </div>  
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    msg:"hello",
                    user:{"name":"丢丢","age":44}
                }
            })          
        </script>
</html>

Vue的click事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>       
    </head>
    <body>
        <div id="app" >
            <!--
                作者：offline
                时间：2019-07-11
                描述：v-on:click是标准方式，@click简写 方式，一般用简写方式
            -->
            <input type="button" value="点我试试1" v-on:click="fn1"  />
            <input type="button" value="点我试试2" v-on:click="fn2(1)" />
            <input type="button" value="点我试试1" @click="fn1" />
            <input type="button" value="点我试试2" @click="fn2(1)" />
        </div>      
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                methods:{
                fn1:function(){
                    alert("fn1")
                },
                fn2:function(a){
                    alert(a)
                }
                }
            })          
        </script>
</html>

Vue按键事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app">
            <!--
                作者：gzy
                时间：2019-07-11
                描述：触发的按钮可以是按键编号（记不住，一般不用），所以都直接用按键名，如：enter。。
            -->
            <input type="text" value="" @keyup.enter="fn1"  />
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        //事件源
                        alert(event.keyCode);                                                                                                                                                                   
                    }
                }               
            })          
        </script>
</html>

鼠标悬停事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
            div{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!--
            作者：gzy
            时间：2019-07-11
            描述：鼠标悬停事件
        -->
        <div id="app" @mouseover="fn1" style="border:1px solid red;height: 20px;" >
            
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        alert(event)
                    }
                }               
            })          
        </script>
</html>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop ：事件不冒泡，及不触发父容器事件。
.prevent：取消默认点击事件，如<a>跳转事件
.once:只能点击一次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" @click="fn2" style="border:1px solid #FF0000;height: 50px;"  >
            <!--
                作者：gzy
                时间：2019-07-11
                描述：只能点击一次切不触发<a>跳转事件
            -->
            <a href="http://www.taobao.cn" @click.prevent   @click.once="fn1" >跳转到淘宝</a>
            <!--
                不触发<a>跳转事件，不触发父容器事件
            -->
            <a href="http://www.baidu.com" @click.prevent.stop="fn1" >跳转到百度</a>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    fn1:function(){
                        alert("被点击了1..");
                    },
                    fn2:function(){
                        alert("被点击了2..");                       
                    }
                }               
            }           
        </script>
</html>

vue的v-text和v-html绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" xx="yy">
            <!--
                作者：gzy
                时间：2019-07-11
                描述：写啥都是文本
            -->
            <p v-text="msg"></p>
            <!--
            可以 识别html代码
            -->
            <p v-html="msg"></p>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    msg:"我是一条消息<a href='http://www.baidu.com'>点我去百度</a>"
                }               
            })          
        </script>
</html>

vue的v-bind属性绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            <!--
                标准方式属性绑定
            -->
                <p v-bind:title="product.title">{{product.pname}}</p>
                <p><font v-bind:color="product.color">就是这个颜色</font></p>
            
                <hr>
                <!--
                简写方式属性绑定
            -->
                <p :title="product.title">{{product.pname}}</p>
                <p><font :color="product.color">就是这个颜色</font></p>
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    product:{pname:"小米手机红色版",color:'green',title:"放上来看看...."}
                }
            })          
        </script>
</html>

vue的v-model数据双向绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            用户名:<input type="text" v-model:value="user1.username" /><br />
            密码:<input type="text"  v-model:value="user1.password" /><br />
            <input type="button" value="点我是不是双向绑定" @click="fn" />
        </div>
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    user1:{username:"小明",age:18,password:123}
                },
                methods:{
                    fn:function(){
                        //alert(this.user1.username+";;;;"+this.user1.password)
                        this.user1.username="双向绑定喽奥"
                    }
                }               
            })
            
        </script>
</html>

vue的v-for循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app">
            <table border="1px" cellspacing="0px" align="center" width="70%">
                <thead>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>密码 </th>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.username}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.password}}</td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li v-for="(u,index) in users">
                    {{u.username}}
                </li>
            </ul>
            <p v-for="(pvalue,pname) in user">
                {{pvalue}}----{{pname}}
            </p>
        </div>
    </body>
    <script>
            new Vue({
                el:"#app",
                data:{
                    users:[
                        {username:"小明",age:18,password:123123},
                        {username:"小红",age:18,password:1231231},
                        {username:"小绿",age:20,password:1231}
                    ],
                    names:["大郎","次郎","莲莲"],
                    user:{username:"小明",age:18,password:123123}
                }               
            })  
        </script>
</html>

v-if与v-show

v-if是根据表达式的值来决定是否渲染元素（当值为false时元素根本不会创建）。
v-show是根据表达式的值来切换元素的display css属性（当值为false时，元素只是单纯的隐藏，元素还是存在的）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        
    </head>
    <body>
        <div id="app" >
            <div v-if="flag">{{user1.username}}</div>
            <div v-show="flag">{{user1.username}}</div>
            <input type="button" value="点我切换" @click="fn1" />
        </div>
    </body>
    <script>
            var x=new Vue({
                el:"#app",
                data:{
                    user1:{username:"小明",age:18,password:123},
                    flag:true
                },
                methods:{
                    fn1:function(){
                        this.flag=!this.flag;
                    }
                }               
            })          
        </script>
</html>

VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue生命周期   </title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="app">  
            {{message}}
        </div>
        
        <script>
            //创建vue对象
            var vm = new Vue({
                el:"#app",  // 选择器    $("#app")
                data:{
                    message:"hello"
                },
                beforeCreate: function() {
//                  console.log(this);
                    showData('创建vue实例前', this);
                },
                created: function() {
                    //写ajax请求 后端服务器 要数据...
                    showData('创建vue实例后', this);
                },
                beforeMount: function() {
                    showData('挂载到dom前', this);
                },
                mounted: function() {
                    showData('挂载到dom后', this);
                },
                beforeUpdate: function() {
                    showData('数据变化更新前', this);
                },
                updated: function() {
                    showData('数据变化更新后', this);
                },
                beforeDestroy: function() {
                    vm.test = "3333";
                    showData('vue实例销毁前', this);
                },
                destroyed: function() {
                    showData('vue实例销毁后', this);
                }
            });
            
             function showData(process, obj) {
                console.log(process);
                console.log('data 数据：' + obj.message)
                console.log('挂载的对象：')
                console.log(obj.$el)
                realDom();
                console.log('------------------')
                console.log('------------------')
            }            
            function realDom() {
                console.log('真实dom结构：' + document.getElementById('app').innerHTML);
            }           
            vm.message = "hello world";
            vm.$destroy(); //销毁
        </script>
    </body>
</html>

VueJS ajax

vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios

引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from 'axios';
//安装方法 npm install axios
//或bower install axios
当然也可以用script引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

为什么推荐用axios

其实他本质和jquery的ajax请求是相同的，都是回调函数，服务端不响应，就不会往下执行，但是它提供了语法糖，让开发者用的舒服些。

使用案列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios-0.18.0.js" ></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    msg:""
                },
                created:function(){
                    //域问题：ajax请求里用this指的是整个页面所以需
                    //将vue对象 传给一个变量，再在ajax里使用。
                    var x=this;
                    //发请求
                    axios.get('http://localhost:8080/user/test/1')
                      .then(function (re) {                 
                        x.msg=re.data;
                      })            
                }
            })                              
        </script>
    </body>
</html>

上面代码用拉姆达表达式写法（推荐）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios-0.18.0.js" ></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    msg:""
                },
                created:function(){                                 axios.get('http://localhost:8080/user/test/1')
                      .then( (resp)=> { 
                       //这里的this直接就代表   vue对象           
                        this.msg=re.data;
                      })            
                }
            })                              
        </script>
    </body>
</html>