Vue框架入门

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>

最后编辑于：2019.07.12 20:33:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,802评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,109评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,683评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,458评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,452评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,505评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,901评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,550评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,763评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,556评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,629评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,330评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,898评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,897评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,140评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,807评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,339评论 2赞 342