vue总结

指令：

文本渲染指令：

v-text

v-html

区别：v-html指令可以渲染数据中的html标签 而v-text不会

条件渲染指令：

v-if

v-else

当v-if的值为true的时候则显示，为false则激活v-else

还有一个特殊的指令v-show 也可以控制元素的显示与隐藏

区别：v-if通过移除元素节点来实现隐藏 而v-show同过控制display:none来实现元素隐藏

属性绑定：

v-bind：属性=属性值

可以简写为：（注意必须是英文冒号）

列表渲染

v-for

用法：

<li v-for="(item,index) in list">{{ item }}</li>

data:list

注释：item 代表的是每一项数据

          index代表的是数据的下标

表单的绑定：

v-model

用法：

v-model="flag"

在单一复选框中,如果选中flag为true否则为false

在多个复选框中，绑定的数据是个数组，多个复选框绑定的数据相等，默认子可以填入数组

在表单绑定指令中还有修饰符

v-model.number 把表单输入的数据转化为数字

在vue中可以用v-on来绑定事件

比如v-on:click

也可以简写为@click

在事件绑定中也有修饰符

@click.prevent阻止默认事件

.stop 阻止冒泡事件

.once 事件只执行一次

监听：

watch方法来监听一个数据的变化

用法：

watch:{

"要监听的数据":{

        handler:function(val){当要监听的数据发生变化就会触发handler},

        deep:true //属于深层监听当要监听的数据的属性发生变化的时候也会触发handle

    }

}

computed从现有数据中计算出新的数据

用法：

computed:{

rmsg:function(){

      return this.msg.split("").reverse().join('')

  }

}

filters过滤

更改现有数据的显示格式

用法

filters:{

fix(val,参数1，参数2){

  return xxx

    }

}

自定义指令

directives

作用 要操作dom的时候

使用第三方的插件的时候

用法

directives:{

img:{

inserted(el,binding){

  el当前指令所在的节点

  binding.value指令的值

}

}

}

使用 <div v-img="">

class绑定

属性绑定:class="red"

动态绑定 :class="{'red',flag}"

数组绑定 :class="['red','em']"

style绑定

:style='{fontSize:"14px",color:"blue"}'

也可以把样式写在对象里obj里

:style="obj"

vue动画

vue不能直接实现动画，但是它提供了动画各阶段需要的class

<transition>组件提供class

在vue动画中在元素显示与隐藏的过程中，添加class实现的

transition组件提供的class有

v-enter-active 元素进入的过程

v-enter 元素进入开始的状态

v-enter-to 元素进入结束的状态

v-leave-active 元素离开过程

v-leave 元素离开的开始状态

v-leave-to 元素离开的结束状态

动画模式

in-out 先执行进入动画 再执行离开动画

out-in 先执行离开动画 在执行进入动画

组件

组件就是扩展自定义的标签

自建是一个功能的集合

组件能使一个复杂的系统分割为一些简单的组件

组件使前端的分工协作更加方便

组件在大项目中的优势很明显

组件又分为全局组件和局部组件

全局组件

Vue.compnoent(组件名,{

template:`<div>组件模板里面只能由一个跟组件</div>`

})

使用<组件名></组件名>

局部组件

定义组件

let counter={

    template:`<div>只能有一个根节点{{num}}</div>`，

    data:function(){return {

      num:1

  }},

  methods:{}

}

注册组件 new Vue({

  components:{counter,...}

})

使用组件

<counter></counter>