【vue2相关指令和方法】

vue的方法和事件

  <!--
      
      1、   变更方法
            push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
            pop() 方法用于删除并返回数组的最后一个元素。
            shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
            unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
            splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
            sort() 方法用于对数组的元素进行排序。
            reverse() 方法用于颠倒数组中元素的顺序。

            替换数组
            filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            concat() 方法用于连接两个或多个数组。
            slice() 方法可从已有的数组中返回选定的元素。

            其他
            split() 方法用于把一个字符串分割成字符串数组。
      2、   vue之事件修饰符详解（ .stop、.prevent、 .capture 、.self、.once、passive）
                .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
                .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
                .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
                .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
                .once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
                .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

                .passive 和 .prevent 不能一起使用:
                .prevent 将会被忽略
                .self 和 .stop 区别:
                self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
                stop是从自身开始不向外部发射冒泡信号
 3、
  -->

vue指令

1、v-on的修饰符.native  //在某个组件的跟元素上监听一个原生事件。该修饰符的作用是把一个vue组件转化为一个普通的HTML标签
2、v-on="$listeners" //它是一个对象，里面包含了作用在这个组件上的所有监听器，将所有的事件监听器指向这个组件的某个特定的子元素（相当于子组件继承父组件的事件）
3、v-bind="$attrs"  //继承所有的父组件属性（除了prop传递的属性、class和style），一般用在子组件的子元素上
4、inheritAttrs:true  //继承除props之外的所有属性
   inheritAttrs:false //只继承class  style属性
5、v-model指令 在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定
             1）.lazy  v-model在change 事件之后将输入框的值与数据进行同步
             2）.number 自动将用户的输入值转为数值类型
             3）.trim 自动过滤用户输入的首尾空白字符
6、v-once指令：当数据发生改变时，插值处的内容不会更新
7、v-html指令：为了输出真正的HTML 
8、v-for指令：基于一个数组来渲染一个列表，需要使用item in items 形式的特殊语法
              其中 items 是源数据数组，而item 则是被迭代的数组元素的别名
              v-for 还支持一个可选的参数，当前项的键名，索引。eg： v-for="(value, item, index) in items"

vue模板语法：

const app = Vue.createApp({
  data() {  //data是一个函数，它应该返回一个对象
    return { }
  }
  methods:{  //methods向组件实例添加方法
     方法名(){ 表达式}
  }
  computed:{//计算属性，会将基于它们的响应依赖关系缓存
     方法名(){ 表达式}
  }
  watch:{//侦听器，允许我们执行异步操作 (访问一个 API)，并设置一个执行该操作的条件
  
  }
})

vue组件

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  props:['title'],  //在组件上注册的一些自定义attribute
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

实例方法

1、$emit 触发当前实例上的事件。附加参数待会传给监听器回调

vue内置组件

<slot>插槽 : 使用 <slot>作为想要插入内容的占位符。如果组件的template中没有包含一个<slot>元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃
<component>: 用法：渲染一个“元组件”为动态组件。依 is 的值来决定哪个组件被渲染