vue入门6---vue基本指令、自定义指令、插件

一、vue常用指令概览

1) v:text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果为 true, 当前标签才会输出到页面
4) v-else: 如果为 false, 当前标签才会输出到页面
5) v-show : 通过控制 display 样式来控制显示/隐藏
6) v-for : 遍历数组/对象
7) v-on : 绑定事件监听, 一般简写为@
8) v-bind : 强制绑定解析表达式, 可以省略 v-bind
9) v-model : 双向数据绑定
10) ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

<style>
 [v-cloak] { display: none }
</style>
<div id="example">
  <p v-cloak>{{content}}</p>
  <p v-text="content"></p>   <!--p.textContent = content-->
  <p v-html="content"></p>  <!--p.innerHTML = content-->
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a 
    },
    methods: {
      hint () {
// this.$refs.msg 是对象
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
</script>

二、vue自定义指令

注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
注册局部指令
directives : { 'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
} }
}
使用指令
v-my-directive='xxx'
demo:

<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写 v-upper-text
  2. 功能类型于v-text, 但转换为全小写 v-loweer-text
-->

<div id="test">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="test2">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>
<script type="text/javascript">
  // 1.定义一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的  容器对象，比如<p>
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 2.注册局部指令
    directives: {
// lower-text 是属性名，需要加单引号
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }
  })

  new Vue({
    el: '#test2',
    data: {
      msg: "I Like You Too"
    }
  })

三、写插件

Vue 插件是一个包含 install 方法的对象；
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等；
写一个插件：

(function (window) {
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive----'+binding.value
    })

    // 4. 添加实例方法 以$开头
    Vue.prototype.$myMethod = function () {
      console.log('vue实例化对象 $myMethod()')
    }
  }
// 5. 向外暴露
  window.MyPlugin = MyPlugin
})()

使用插件

<body>

<div id="test">
  <p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // *** 声明使用插件(即安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
// vm变量调用实例方法
  vm.$myMethod()
</script>
</body>