【vue】常用选项API，过滤器filter、指令directive、方法、计算属性、监听

1、过滤器

【更新】vue2.0及后v-html中过滤器的使用[链接]

• 使用：内部自动执行，不用加()调用，加()可以用来传其他参数，第一个参数永远是前面的数据；

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

• 全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

• 私有过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

2、自定义指令

• 使用：<input v-focus>、<input v-color=" 'red' ">/不加引号，解析时会当作变量
• 自定义全局指令

/不需要参数的指令
Vue.directive('focus',{
/指令的钩子函数
  bind:function(el){},/指令绑定到元素上时，一般可以写元素样式
  inserted:function(el){ el.focus() },/元素插入到dom中后执行，一般是dom行为
  update:function(el){console.dir(el);}/当vnode发生更新时执行，可以多次触发
})
/需要参数的指令
Vue.directive('color',{
	bind:function(el,binding){
		el.style.color = binding.value
	}
})

• 私有指令

directives: {
  focus: {
	 // 指令的定义
	  inserted: function (el) {
	    el.focus()
	  }
  },
  fontsize:function(el,binding){//简写，相当于同时定义在bind、update中
  	el.style.fontSize = parseInt(binding.value)+'px'	
  }
}

3、计算属性、方法、侦听属性

• computed、methods方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值；
• computed用于监测数据变化，做简单的数据操作，返回操作后的数据供页面使用；
• methods用于处理业务逻辑；
• watch 用于监测数据变化，也可以做业务处理；
  • 侦听data中定义的属性、也可以侦听路由地址等非dom元素中的改变；
  • 当需要在数据变化时执行异步或开销较大的操作时，计算属性就不支持了；
• computed：计算属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {//简写
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
---
computed: {//完整
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

• methods:方法

<p>Reversed message: "{{ reversedMessage() }}"</p>
---
/ 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

• watch:侦听属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {//不用return
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    },
    '$router.path':function(new,old){}
  }
})

特殊地：watch可以直接赋值一个方法名，来触发这个方法；

watch:{
	msg:'aa'
},
methods:{
	aa(){
		console.log(this.msg)
	}
}

4、组件私有样式

<style lang="scss" scoped>
</style>

• lang属性：规定当前元素内容的语言
• scoped属性：通过属性选择器[data-v-xxx]的形式实现，私有化；
  • 就是多了一个属性要求，其他样式规则不变，还是可以继承；
  • 不使用这个属性，就是全局样式；
  • 使用这个属性，会给当前组件中元素添加专属属性，样式在添加时会同时要求有这个属性；会给子组件的最外层也加上；
    

5、Mint UI

• 基于Vue.js的移动端组件库；
• 使用：
  • 全局导入：直接使用import Mint from 'mint-ui';Vue.use(Mint);，css组件、form组件不用单独导，js组件在哪个组件中使用还是要在哪单独导入；
  • 按需导入：首先需要配置babel，css组件、form组件在main.js中单独导入全局使用import { Button } from 'mint-ui'，并使用Vue.component(Button.name, Button)；形式安装使用；js组件还是在组件内单独导入；
  • Toast组件（js组件）的图标可以使用bootstrap的css样式中的图标；也可以找到样式类对内部样式进行修改；

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);
/全局导入组件后，css组件、form表单这些在标签中使用就不需要单独导了，但是js组件还要在使用的组件中单独导入；
/只是不需要配置

// 按需引入部分组件（常用）
借助 babel-plugin-component，语法兼容，我们可以只引入需要的组件，以达到减小项目体积的目的。
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}
---
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'/js组件还是在哪个组件中用，就在哪个组件单独导入
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为，，，但是测试这种不行
 * Vue.use(Button)
 * Vue.use(Cell)
 */