VUE学习六【指令】

<style>[v-cloak] { display: none }style>
<div id="example">
  <p v-text="url">p>
  <p v-html="url">p>
  <img :id="myid" :src="imageSrc">
  <p>
    <span ref="message">atguigu.comspan>
    <button @click="showMsg">显示左侧文本button>p>
  <p v-cloak>{{url}}p>div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">alert('模拟加载慢') new Vue({
    el: '#example',
    data: {
      url: '尚硅谷',
      myid: 'abc123',
      imageSrc: 'http://cn.vuejs.org/images/logo.png'
    },
    methods: {
      showMsg: function() {
        alert(this.$refs.message.textContent)
      }
    }
  })script>
<div id="demo1">
  <p v-upper-text="msg">p>
  <p v-lower-text="msg">p>
div>
<div id="demo2">
  <p v-upper-text="msg2">p>
  <p v-lower-text="msg2">p>
  div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">

//注册全局指令
 Vue.directive('upper-text', function (el, binding) { el.innerHTML = binding.value.toUpperCase() })
new Vue({ el: '#demo1', data: { msg: 'NBA love this game!' },directives: { // 注册局部指令 'lower-text': { bind (el, binding) { el.innerHTML = binding.value.toLowerCase() } } } })
new Vue({ el: '#demo2', data: { msg2: 'I Like You' } }) 
  script>