vue2基础知识

vue选项

模板：el	数据：data
方法：methods	指令：directives
过滤：filters	监听：watch
计算：computed	属性：props
创建完毕：created	模板：template
组件：compones

表单绑定：

v-model="num"        把num的数据和表单的值绑定在一起。

    v-model="num"

单行文本

 多行文本

 

 复选框checkbox

 

单选框  radio

 

 多选框

      一个默认值选中为true;未选中为false\

      多个值，绑定的数组动态添加/移除当前元素的value值

下拉select

表单修饰符：

.lazy     //change事件触发数据更新

.number   //强制转换为数字

.trim     //过滤首尾空白

vue操作

    让指令链接数据与dom

    业务操作数据，实现自动更新dom

computed计算       从现有数据计算出新的数据（只读）

computed:{
 "total":function(){
    return  xxx
  }
}

watch监听       监听数据的变化执行回调函数

watch:{
 "obj":{
   handler(nval){
      //执行回调函数
  },
    deep:true
 }
}

:class

        文本

                :class="active"    没有加单引号的active是一个变量不是字符串

        对象

                :class="{'active':flag}"

        数组

                :class="list"

:style         css属性驼峰式写法

        :style="{color:'red',fontSize:'24px'}"

自定义指令   directives

作用：操作dom;实例化第三方基于dom的插件

<input v-focus="true">

更新就执行：update	绑定一次：bind
插入：inserted

过滤，管道   filters           作用：格式化数据

{{3.1415926| fix}}         {{3.1415926| fix(4)}}

val是过滤前的值	return过滤后的值
len fix过滤器的参数

组件

作用：

        1、组件是vue的一个重要的特点

        2、实现多人协作开发

        3、通过组件划分降低开发的难度

        4、实现复用，降低重复劳动

组件解释：  组件就是定义好的——功能模块

        建议：多用props,少在组件中使用data   (降低组件的耦合性，提高复用性)

定义与使用:

1、定义：注意：template有且只有一个根节点

        const steper ={template:`<span></span>`}

2、在父组件中注册

        components:{steper:steper}

3、在组件的模板中使用

        <steper></steper>

传参

        父组件  传  子组件

                父组件<modal:visible="visible">

                子组件

props:{
    visible:{
        type:Boolean,
        default:false
    }
}

子使用

        注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.visible

子组件  传  父组件

        子组件

                this.$emit("update:visible",false)

        父组件       监听事件，修改值

                <modal @update:visible="visible=$event">

插槽：组件的嵌套内容

        父组件

<modal>
  <input>
  <button>确认</button>
</modal>

        子组件      模板中使用

                template:'<div><slot></slot></div>'

具名插槽

插槽作用域