vue常用属性我的理解学习理解vue的各属性，准确使用属性给我们更好的开发体验。 data methods compo

前言

学习理解vue的各属性，准确使用属性给我们更好的开发体验。新人一枚，简单的学习分享，请各位大佬指点

简单理解

属性写法          名称                作用
data: {}         数据属性         用来存放需要绑定的数据
methods: {}      事件操作属性     用来放定义的事件方法
components: {}   组件属性         自定义组件声明
props: {}         获取父组件数据   单向绑定
computed: {}     计算属性         提供相对简单的数据计算
watch: {}        侦听器           观察某一特定question的值  
directives: {}   自定义指令属性   注册内部自定义指令
filters: {}      过滤器           自定义过滤器
...

data methods components 三个属性学习vue最常用到的，大家都比较熟悉，这里就不多说了。

用一个简单的例子介绍下computed, watch, filter的用法区别

1.侦听属性 watch

watch 监听某一特定值，数据发生变化出发事件，做出相应的改变

看实现结果

<input data-id="1" style="color: green" v-model="info1" v-focus>

data() {
    return {
      info1: '',
      info2: '',
      connectInfos: ''
    }
  },
watch: {
    info1: function(newInfo, oldInfo) {
      console.log("旧值：", oldInfo);
      console.log("新值：", newInfo);
    }
  },

watch属性带有两个参数，第一个参数为改变后的值，第二个参数为改变前的值。

2.计算属性 computed

既然是计算，肯定存在依赖关系，计算所依赖的参数改变了，结果也会随之改变。所以属性值的依赖属性改变了会触发事件更新其本身。

计算除了直接设置为方法，可以通过getter setter 方法进行操作

<p >
      字段1:
      <input data-id="1" style="color: green" v-model="info1" v-focus>
      字段2:
      <input data-id="2" style="color: green" v-model="info2" >
    </p>
    <p id="computed-example">连接: {{ connectInfo }}</p>

computed: {
    // 计算属性的 getter
    connectInfo: function () {
      // `this` 指向 vm 实例
      this.connectInfos = this.info1 + this.info2;
      return this.connectInfos;
    }
  },

运行结果

computed 与 wacth 区别可以参考 juejin.cn/post/684490… 作者用了一个简单的加法实例，直观展现。

3.过滤器属性 filters

vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器渲染格式化不会改变其本身的文本内容，它只改变输出。

过滤器用在差值表达式{{}}和v-bind表达式中，由管道操作符 ’|‘指示。

<p id="filters-example">全部大写: {{connectInfos | capitalize}}</p>

filters: {
    capitalize(word) {
      return word.toUpperCase();
    }
  },

管道操作符： 符号前是符号后执行的内容

props 属性

组件是vue的一大功能，因此组件通信很关键了，poros属性用于组件的通信。

直接看代码趴

静态绑定：

父组件

<Child info="hello"></Child>

import child from "./components/child_component"

components: {
    Child: child
  },

子组件

<template>
    <div id="child">
    <p>子组件</p>
    <p>{{info}}</p>
  </div>
</template>
 <<script>
 export default {
     props: ['info']
 }
 </script>

动态绑定：

父组件(改)

<Child :info="connectInfos"></Child>

用于组件通信的还有:

$ref: 也是父组件向子组件通信的，主要用来调用子组件里的属性和方法。
$emit：实现子组件向父组件通信，主要绑定一个自定义事件响应给父组件。
props: 主要注重数据传送，不能调用子组件里的属性和方法。

浅谈 directives

vue.js提供的自定义指令还是很有意思的，有很强的复用性。自定义指令和组件、过滤器一样有全局注册和局部注册两种。

官方文档的钩子函数： cn.vuejs.org/v2/guide/cu…

代码查看下参数：

// 全局定义  绝对定位自定义指令
Vue.directive('abLocal', {
  // 指令第一次绑定到元素时
  bind(el, binding, vnode) {
    console.log("el:", el);
        console.log(el.style);
        console.log("color:", el.style.color);
        console.log("data-id:", el.dataset.id);
        console.log(binding);
        console.log(vnode);
    el.style.position = 'absolute';
    el.style.top = binding.value.top+'px';
    el.style.left = binding.value.left+'px';
  }
})

<template>
  <div id="app" data-id="0" style="color: green"  v-abLocal="{top: '50', left: '100'}">   
    <p >
      字段1:
      <input data-id="1" style="color: green" v-model="info1" v-focus>
      字段2:
      <input data-id="2" style="color: green" v-model="info2" >
    </p>
    <p id="computed-example">连接: {{ connectInfo }}</p>
    <p id="filters-example">全部大写: {{connectInfos | capitalize}}</p>
    <Child :info="connectInfos"></Child>
  </div>
</template>

参数 el: *

可以看到绝对定位的样式 {position: absolute; top: 50px; left: 100px} 被添加进去了参数 binging *

传入的值{top: '50', left: '100'} 再binding.value中拿到了。

最后

只是很浅的理解，还需要更深入的学习。文章有不妥的地方请大家指正。

vue常用属性 我的理解

前言