Vue 的一些基本使用

Es6后增加了let和const

1.const修饰的标识符被赋值后，不能修改。

2.在使用const定义标识符，必须进行赋值。

3，常量的含义是指对象不能修改，打完是可以改变对象内部的属性

4，let是加强后的var，var没有作用域，let有作用域

建议，在es6开发中，优先使用const，只有改变某个一个标识符的时候才使用let。

v-on：的语法糖为@，比如v-on：click 变为@click

v-bind：的语法糖为：

当通过methods中定义方法，以供@click调用的时候

情况一:如果该方法不需要额外参数，那么方法后的（）可以不添加

情况二：如果需要用时传入某个参数，同时需要event时，可以通过 $event传入事件

.stop修饰符的使用，阻止冒泡

.prevent阻止默认事件的发生。比如form中的提交

监听某个键盘的键帽

@keyup.enter 监听 enter键抬起

,once只触发一次回调

v-if当条件为false时，压根不会有对应的元素在Dom中。

v-show当条件为false时，仅仅是将原的display的属性设置为none而已

当我们使用key来为每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟dom

splice（）作用：删除元素/插入元素/替换元素

删除元素：第二个参数传入你要删除几个元素

替换元素：第二个参数，标识我们要替换几个元素，后面是用于替换前面的元素。

插入元素：第二个参数，传入0，并且后面跟上要插入的元素。

sort（）用来排序 reverse（）进行反转

vue.set（this.letter，0，“bbbbb”）

123.tofixed（保留几位小数）

设置按钮是否可用，使用disabled当为true，disabled生效，无法被点击。：disabled=“item.count<=1”

使用过滤器在filters：{}写属性

js高阶函数

const num=[4,65,42,43,65,53]
let total=num.filter(n => n<100).map(n => n*2).reduce((pre,n)=>pre+n);

<input type="text" v-model="message">{{实现双向绑定}}

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。

lazy修饰符可以让数据在失去焦点或者回车时才会更新、v-model .lazy=""

number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符可以过滤内容左右两边的空格

组件

1.创建组件构造器

const cpnc= Vue.extend（{

tepalte:

<div></div>

}）

2，注册组件(全局组件)

Vue.component('cpn',cpnc)

3.使用

模板分离的写法

<template ID="mycdn">
    <div>xiaoming 
        <h1>hhaha </h1>
    </div>

components:{
   'cdn':{
       template:"#mycdn"
   }
}

cdn为组件的名称

required：必须的，再添加required属性值，就必须给他传值

什么时候需要自定义事件？

当子组件需要想父组件传递数据时，就要用到自定义事件了。

自定义事件的流程：

在子组件中，通过$emit（）来触发事件

在父组件中，通过v-on来监听子组件事件

前面所学的综合应用

<div id="app">
    <cpn :number1="num1":number2="num2"@numb1change="num1change"></cpn>
</div>
<template id="cdn">
    <div>
       <h1>{{number1}}</h1>
        <H1>{{dNumber1}}</H1>
        <input type="text" :value="dNumber1" @input="inputnum1">
      <H2>{{number2}}</H2>
    </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num1:'xiaoming',
            num2:'小m',
        },
        methods: {
          num1change(value){
              this.num1=value;
          }
        },
        components:{
            cpn:{
                template:'#cdn',
                props:{
                    number1:String,
                    number2:String
                },
                data(){
                    return{
                        dNumber1: this.number1,
                        dNumber2:this.number2,
                    }
                },
                methods: {
                    inputnum1(event){
                      this.dNumber1= event.target.value;
                      this.$emit('numb1change',this.dNumber1)
                    }
                }

            }
        }
    })
</script>

ref的使用

<cdn ref="aaa"></cdn>
<button @click="btnclick">按钮</button>

methods:{
  btnclick(){
       console.log(this.$refs.aaa.name)
  }

插槽的基本用法:

<slot></slot>

插槽的默认用法<slot><button></button></slot>

export，import导入导出

vue的具体详情

狂神说Vue笔记 - 你的雷哥 - 博客园 (cnblogs.com)