Vue小结（一）

基础知识

VUE指令

指令：是带有v-前缀的特殊属性。
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

v-for：基于数据源多次渲染元素或者模块。

v-if：根据表达式的值的真假条件，销毁或重建元素。

v-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
v-show：根据表达式之真假值，切换元素的 display CSS 属性。
v-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

v-model：在表单元素上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
v-model修饰符
<1> .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<2> .number
自动将用户的输入值转化为数值类型
<3> .trim
自动过滤用户输入的首尾空格

v-on：绑定事件。简写【@】

事件修饰符：
.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

    使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
    因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

v-bind：用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。简写【：】

v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及所有的子节点将被视为静态内容并跳过。用于优化更新性能。

v-text：用于更新textContent，可以等同于JS中text属性。

v-html：为输出真正的HTML，等同于JS中的innerHtml。

v-pre：用于跳过这个元素和它的子元素编译过程，可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

v-cloak：用于保持在元素上直到关联实例结束时进行编译。

计算属性/watch

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

<div>{{Name}}</div>
data(){
	return {
		num:0,
		lastname:'',
		firstname:'',
	}
}
//当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值
watch:{
	num:function(val,oldVal){
	    console.log(val,oldVal);
	}
},
//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
    Name:function(){
        return this.firstname+' '+this.lastname;
    }
}

事件

内置事件

内置事件绑定：
<button @click.stop="toggle">切换</button>

自定义事件

$on是监听当前实例上的自定义事件，这个自定义事件可以由$emit来触发，$on回调函数接收的msg便是$emit方法第二个参数传过来的值。当然你也可以在回调函数里不使用msg参数而执行其他操作。

Vue.component('simple-com',{
    template:'<button v-on:click="incresone">{{count}}</button>',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        incresone:function(){
            this.count+=1
            //监听自定义的事件
            this.$on('increment',function(msg){
                //获取$emit方法传递的第二个参数
                console.log(msg);
                alert("1");
            })
            //触发自定义的事件
            this.$emit('increment',this.count)
        }
    }
   })

组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是button-counter。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

                          
new Vue({ el: '#components-demo' })

怎么自定义组件

<1> 建立组件模板，考虑好组件的基本逻辑；
<2> 分析好逻辑，定好props里面的数据、类型；
<3>准备好组件数据的输出；
<4> 封装完毕，直接调用。

span用于接收父组件传递的内容和同胞组件输入框传递的内容，并进行展示

<template>
	<span class="item">
	  {{content}}
	</span>
</template>

<script type="text/ecmascript-6">
  export default{
    data(){
      return{
        content:this.itemContent
      }
    },
    props:{
      itemContent:{
        type:String,
        required:true
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .item
    background #f4f4f4
    padding 3px 5px
    box-sizing border-box
    display inline-block
    cursor pointer
</style>

全局组件/局部组件

全局组件，到目前为止，我们只用过 Vue.component 来创建组件（它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。）：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>



Vue.component('my-component-name', {
  // ... 选项 ...
})

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

然而全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意！！局部注册的组件在其子组件中不可用
如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

组件之间传值

1.父组件发送数据给子组件，可以通过子组件定义props自定义组件属性，去传递数据。
2. EventBus其实就是通过实例化一个Vue实例，然后通过该实例的$ emit方法发送数据消息和$on方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。

过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

在 CSS 过渡和动画中自动应用 class；
可以配合使用第三方 CSS 动画库，如 Animate.css；
在过渡钩子函数中使用 JavaScript 直接操作 DOM；
可以配合使用第三方 JavaScript 动画库，如 Velocity.js。
详情可参考官方文档：Vue过度效果