Vue.js

什么事Vue.js

Vue.js事目前最火的一个前端框架，React是流行的一个框架（React除了开发网站还可以开发手机App，Vue语法也可以用于手机App开发的，需要借助于Wee ek）。
Vue.js是前端的**主流框架之一，和Angular.js 一起，并成为前端三大主流框架！

mvc

MVVM

MVVM是前端视图的分层开发思想把页面分成了下面三块

M :每个页面单独的数据
V：每个页面的html 结构
VM ：分割了m和v
：MVVM思想的核心，应为vm事M和V之间的调度者

3E002E13-08D9-4CFB-B06C-AB41B853AECB.png

Vue使用

https://cn.vuejs.org/v2/guide/

导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

申明和渲染

    <div id="app">
        {{ message }}
    </div>

      <script>
  // vue 的创建方式
  // 当我们导入包后，在浏览器的内存中就多了一个Vue构造函数
  new Vue({ //这个实力对象在mvvm 中是VM
      el:'#app', //表示我们 这个Vue控制上面的区域
      data:{ //data 属性不能放的是el 中要用到的数据，可以看场是mvv 中的 m
          message:'hello Vue.js!' //通过Vue提供的指令，很方便的就能把数据渲染到也买呢上，程序员不在
          //手动操作dom元素了 【前端的Vue之类的狂，不提倡我们去操作Dom】


      }

  });

</script>

v-text （输出文本格式）
会覆盖元素中原本的内通，但是插值表达式只会替换自己的占位字符串
v-text 和{{msg}}方法一样。只是这歌在加载过程中不会显示显示{{}};
```
  <span v-text="msg"></span>
  
  <span>{{msg}}</span>
```
v-html (输出html格式)
输出html 格式的文本时，可以将文本转换成html

v-vind:绑定 https://cn.vuejs.org/v2/api/#v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on (https://cn.vuejs.org/v2/api/#v-on)

绑定时间监听器。时间类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰字符也可以省略。
用在普通的元素上时，智能监听原生的DOM事件。用子啊自定义元素组建上时，也可以监听子组件触发的自定义事件。
在监听原声DOM事件时，方法以事件为唯一参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

      <input type="button" value ="按钮" v-on:click="show">
        <script>
var vm = new Vue({
        el :"#app",
        data :{
            msg:'app',
        },
        methods:{
            show : function(){
                alert('123');
            },
            show1 : function(){
                alert('123');
            }
        }
    });

</script>

要在Vue的实例化方法中添加一个methods：{这里面来放对应的方法}

@click.stop 阻止冒泡

<div id = app>
    <div class ="inner" @click="divHandler" >
        <input type="button" value="点击" @click="btnhandeler" @click.stop="dothis">
    </div>
</div>

        <script>

    var vm =new Vue({
        el:"#app",
        data :{

        },
        methods:{
            btnhandeler(){
                console.log('点击来btn');
            },
            divHandler(){
                console.log('点击来div');
            },
            dothis(){
                console.log('停止冒泡');
            }

        }


    })

</script>

@click.prevent="privent"

阻止跳转。

@click.capture 捕获事件

让事件触发从外到里执行

self (https://cn.vuejs.org/v2/api/#v-on)
*onece (https://cn.vuejs.org/v2/api/#v-on)

v-model 数据双向绑定只能用在表单元素中

input(radio, text,address,email.....) select checkbox textarea
<div id = app>
<p>{{msg}}</p>
<input type="text" v-model="msg">//通过v-model实现双向绑定，改变v-model中msg的值，会改变，vm.msg中的值
</div>
<script>
var vm =new Vue({
el:"#app",
data :{
msg:"大家好才是真的好"
}
})
</script>

Vue中class 样式使用 (https://cn.vuejs.org/v2/guide/class-and-style.html#ad)

 建议使用对象的方式
在为class使用v-bind 绑定对象的时候，对象的属性名，由于对象的属性可带引号，也可以不带引号。所以这里没有写引号
    <div
  class="static"
    v-bind:class="{ active: isActive, 'text-danger':     hasError }"
></div>

绑定内连样式

对象语法
v-bind:style 的语法十分直观-- 看起来非常像css，但是其实是一个JavaScript对象。css属性值可用驼峰命名

  <div id = "app">
  <!-- 使用字符串对象的方式 -->
  <p :style="{'color':'red','font-weight':'200'}">段落</p>  
     //直接绑定到一个样式对象通常更好，这会让模板更清晰：
   <p :style="styleObj1">段落</p>  
  // 绑定一个数组的方式
       <p :style="[styleObj1, styleObj2]">段落</p>         
</div>
      <script>
  var vm = new Vue({
      el:'#app',
      data:{
          styleObj1:{'color':'red','font-weight':'200'},
                          styleObj2:{'color':'red','font-weight':'200'},
      },
      methods:{
      }
  })
      </script>

v-for

我们可以用V-for 指令基与一个数组俩来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中items 是原数组组，而item 则是北迭代的数组元素的别名。

        <div class="app">
<ul>
    <li v-for="item in items">
        {{item.message}}
    </li>

</ul>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        items:[
        {message:'foo'},
        {message:'Bar'}
        ]
    },
    methods:{
    }
})
</script>

*第二种方式在v-for块种，我们可以访问所有父作用的属性。V-for还可以支持一个可选的第二个参数

    <div class="app">
<ul>
    <!-- <li v-for="item in items">
        {{item.message}}
    </li> -->
    <li v-for="(item1, index) in items">
            {{parentMessage}} - {{item1.message}} -{{index}}

    </li>
  //也可以这样以兼职对的方式来获取
    <li v-for="(value,name, index) in items">
        {{index}} -- {{name}}---{{value}}

    </li>
</ul>

//循环count 是从1开始的
<li v-for="count in 10">这是第{{count}}次循环</li>
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
parentMessage:'Parent',
items:[
{message:'foo'},
{message:'Bar'}
]

    },
    methods:{

    }

})

</script>

v-for 循环中Key的注意事项

    <div class="app">
    <div>id: 
        <input type="text" v-model="id">
        <input type="text" v-model="name"></input>
        <input type="button" value="添加" @click="handerClick">
    </div>
    <!-- 注意  v-for 循环的时候，key 属性只能使用nuber-->
    <!-- 注意：key 在使用的时候必须使用v-bind 属性绑定的形式指定key的值 -->
    <!-- 在组件中，使用v-for 循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时制定等唯一字符串数字：key的值 -->
    <p v-for="item in list" :key="item.id">
        <input type="checkbox" >
        {{item.id}} --{{item.name}}
    </p>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        id:'',
        name:'',
        list :[
            {id:1,name:'3'}
        ]
    },
    methods:{
        handerClick(){
            // this.list.push({id:this.id,name:this.name})
             this.list.unshift({id:this.id,name:this.name})
        }
    }



})

</script>

v-if v-else- if v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。

    <div class="app">
    <h1 v-if="awasome"> vue is awwsome!</h1>
    <h1 v-else-if="flag">on on</h1>
    <h1 v-else>哈哈</h1>
</div>
    <script>
    var vm = new Vue({
        el:'.app',
        data:{
            awasome:false,
            flag:false  
        },
        methods:{
        }
    })

</script>

v-show

更具一个条件展示元素的选项v-show
<h1 v-show="ok">Hello!</h1>

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

过滤器 https://cn.vuejs.org/v2/guide/filters.html

下买是一个简单的例字具体参考文档

  <div class="app">
  <p>{{msg | msgFomart('疯狂')}}</p>
</div>
 <script>
Vue.filter('msgFomart',function(data,arg){
return data.replace(/好好/g,arg);
})
 var vm = new Vue({
el:'.app',
data:{
    msg:'好好学习，天天向上'
}
})
    </script>

padStart() 字符串填充指令

string.padstart(2,'0') 意思是长度为2位，不够的用0补够

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode 特性也是允许的：
<input v-on:keyup.13="submit">
这个13 这些可以自定义
Vue.config.keyCodes.f2 = 13; 定义f2的键盘码为13
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

使用新的

2.1.0 新增 https://cn.vuejs.org/v2/guide/events.html#按键修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do something</div>
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

Vue.directive( id, [definition] )

      <script>
Vue.directive('focs',{ 
    // el 在所有的函数中第一个参数永远是el ，el表示被绑定了指令的那个元素。这个el是一个原生的Js对象
    bind:function(el){ //每当指令绑定到元素上的时候，会立即执行bind这个方法
        //元素刚绑定了指令的时候，元素还没有插入dom中去。这是狗叼用没有用
    }, 
    inserted:function(el){
    el.focus();
    },
    updata:function(el){
        
    }
    // componentUpdated:functin(){},
    // unbind:function(){}

})

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：https://cn.vuejs.org/v2/guide/custom-directive.html

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

      Vue.directive('color-swatch', function (el, binding) {
        el.style.backgroundColor = binding.value
    })

Vue生命周期

什么事生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子：就是生命周期事件的别名而已。
生命周期钩子= 生命骤你函数=生命周期事件
主要的生命周期函数分类：
- 创建期间的生命周期函数
  - beforeCreate:实例刚在内存中被创建出来，此时，还没有初始好data 和methods 属性
  - created 实例已经在内存中创建OK，此时data 和methods 已经创建Ok，此时还没开始编译模版
  - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  - mounted:此时，已经将编译好的模板，挂载到了页面制定的容器中显示。

    beforeCreate(){
        // console.log(this.msg), 没有初始化
        // this.show() //还没有被初始化
    },
    created(){
        // console.log(this.msg), 已经初始化
        this.show() //已经初始化
    },
    beforeMount(){//这是遇到的第三个生命周期函数，表示模版已经在内存中编译完成了，但是还没有渲染在模版中。
        console.log(document.getElementById('h3').innerText)
        //在这里页面中的元素还没真正被替换

    },
    mounted(){
        页面从内存渲染出来，显示完成。
    },
    //接下来的两个事件 数据有变化才会调用这两个方法
    beforeUpdata(){ //数据有更新，页面还没有更新时间

    },
    updated(){
        //更新界面
    },
    beforeDestory(){
        //页面即将销毁
    },
    destoryed(){
        //组件已经被销毁
    }
})

Vue-resource实现get，post，jsonp请求 https://www.runoob.com/vue2/vuejs-ajax.html

1.之前学习中，如何发起数据请求
2.常见的数据请求类型？get post jsonp

测试的URL请求资源

get请求地址：http://vue.studyit.io/api/getlunloo
post 请求地址：http://vue.studyit.io/api/post

jsonp 请求地址：http://vue.studyit.io/api/jsonp

httpGet(){
console.log('开始请求')
this. $http.get('http://vue.studyit.io/api/getprodlist').then(function(res){ console.log(res.body); },function(){ console.log('失败了'); }) }, //手动发起的post请求，默认没有表单格式，所以服务器处理不了 // 通过post 方法第三个参数：{emulateJSON:true} 设置提交的内容类型为普通表单数据格式 httppost(){ this.$ http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(function(res){

            console.log(res);
        });
    },
    httpJsonp(){

        this.$http.jsonp('http://jsonplaceholder.typicode.com/users',{}).then(res=>{

            console.log(res);

        });
    }

设置根域名

Vue.http .options.root ='www.baicu.com/'

全局穷emulatejson

Vue.http.options.emulateJson= ture; 这只后post 不用传 {emulateJSON:true} 这个参数啦

Vue中动画

为什么要有动画：动画可以帮助用户更好理解动画

      <style>
            style中定义两种动画
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /*入场动画*/
    .v-enter-active, 
    .v-leave-active{
        
        transition: all 0.4s ease;
    }

</style>
</head>
<body>
<div class="app">
    <input type="button" value="改变" @click="flag = !flag">
    <!-- 需求 点击button 让h1改边 -->
    <!-- 1 使用transition 把要动画的包裹起来 -->
    <!-- transition是官方提供的 -->

    <transition >
        <h1 v-show="flag">我是h1</h1>

    </transition>
    
</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:true

        },
        

    })
</script>

给transition取一个别名子

   style 里面这么写
       .my-enter,
.my-leave-to {
   opacity: 0;
   transform: translateY(150px);
}
/*入场动画*/
.my-enter-active, 
.my-leave-active{
   
   transition: all 0.4s ease;
}
    <transition  name="my">
   <h1 v-show="flag">我是h1</h1>
</transition>

3 勾子函数实现动画 https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子

        <div class="app">

    <input type="button" value ="点击加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script><div class="app">

    <input type="button" value ="点击加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script>

transition-group动画

在实现列表过渡的时候，如果需要过渡元素，是通过v-for 循环渲染出来的，不能使用transition 包裹，需要使用transitionGroup
如有要为一个v-for 循环创建的元素设置动画，必须为每一个元素设置key 属性。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
        li {
            border: 1px ;
            margin: 10px;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active{
            
            transition: all 0.5s ease;
        }
        li:hover{
            background-color: red;
            transition: all 0.5s ease;
        }
</style>

</head>
<body>
<div class="app">
<input type="text" v-model="id">
<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.name}} --- {{item.id}}
</li>
</transition-group>
</ul>

</div>

<script>
    var vm = new Vue({
        el:'.app',
        data:{
            id:'',
            name:'',
            list:[{name:'1',id:'1'},
            {name:'2',id:'2'}
            ]
        },
        methods:{
            add(){
                this.list.push({name:this.name,id:this.id});
                this.id = this.name='';
            }
        }

    })
</script>

列表删除的动画

      .v-move{
            transition: all 0.5s ease;
        }
        .v-leave-active{
            position: absolute;
        }

appear 实现入场动画

        <ul>
        <transition-group appear>
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    </ul>

tag

这里用tag 渲染transition-group  渲染成啦ul 这样外面的ul就不需要啦，如果不渲染 transition-group  默认是一个span元素
<!-- <ul> -->
        <transition-group appear tag="ul"> 
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    <!-- </ul> -->

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