过滤器

<div id="root"><div>{{new Date() | year}}-{{new Date() | month('arg1Value')}}</div>
</div>
<script type="text/javascript">Vue.config.productionTip = false;// 全局过滤器Vue.filter('month', function (value, arg1) {return value.getMonth() + 1;});let vm = new Vue({// 局部过滤器filters: {year(value) {return value.getFullYear();}}}).$mount('#root');
</script>

指令

v-text 向标签插入文本，不支持html标签解析
v-html 向标签插入html，支持结构解析，注意XSS攻击
v-clock 保持在元素上直到关联Vue实例结束编译，可用于隐藏未编译的标签

<style>
[v-cloak] {display: none;
}
</style>
<div v-cloak>{{ message }}
</div>

v-once 初次动态渲染后视为静态内容（例如显示数据初始值，加快渲染速度）
v-pre 跳过标记的标签，加快静态内容渲染速度

自定义指令

注：使用全小写
注：指令函数内this==window而非vm

<div id="root"><div v-upper-case="name"></div><input type="text" v-lower-case="name"/>
</div>
<script type="text/javascript">Vue.config.productionTip = false;let vm = new Vue({data() {return {name: 'abc'}},directives: {// 调用时机 1.元素与指令绑定时 2. 指令所在模板重新解析时调用'upper-case': function(el, binding) {el.innerText = binding.value.toUpperCase()},'lower-case': {bind(el, binding) {// 元素与指令绑定时el.value = binding.value.toLowerCase()},inserted(el, binding) {// 指令所在元素插入页面时el.focus()},update(el, binding) {// 指令所在模板被冲洗解析时el.value = binding.value.toLowerCase()}}}}).$mount('#root');// 全局指令Vue.directive('my-directive', function (el, binding) {});
</script>

生命周期

生命周期函数的this都是vue实例

1. 数据代理和数据侦测创建

• beforeCreate
  无法访问data,methods
• created
  可以访问data,methods

2. vm实例挂载

• beforeMount
  页面呈现未经vue编译的dom结构
  所有对dom操作最终均无效（会被编译后的dom覆盖）
• mouted
  页面呈现经过vue编译的dom
  对dom操作有效
  一般在此：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作

3. 数据更新

• beforeUpdate
  数据已经更新但页面还未更新，页面与数据不同步
• updated
  页面已经根据数据更新，页面和数据保持同步

4. vm实例销毁

• beforeDestroy
  当vm.$destroy被调用时触发
  data,methods,指令等都可用，但是不会再执行beforeUpdate/updated/更新页面
  一般在此：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作
• destroyed
  注destroy只会解绑自定义事件不会解绑dom原生事件回调