vue 学习笔记

1、指令

• v-bind:title
• v-bind:src —— 还可以写成： :src=''
• v-on:click —— 还可以写成： @click='' 阻止点击事件继续传播：@click.stop=''
• v-if
• v-else-if
• v-else
• v-show
• v-for ——v-for="(item, index) in items"
• v-model
• v-html
• v-text
• v-cloak —— 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
• ref —— 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象

— ref

 new Vue({
    el: '#example',
    data: {
      content: '百度一下'
    },
    methods: {
      hint () {
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
  
  // HTML
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>

— v-cloak

// js
 new Vue({
   el: '#example',
   data: {
     content: 'hello'
   }
 })

// CSS
<style>
	[v-cloak] { display: none }
</style>

//HTML
<div id="example">
	<p v-cloak>{{content}}</p>
</div>

2、计算属性和侦听器

— computed

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

<div id="app">
  <p>
   {{reversedMessage}}
  </p>
</div>

3、使用v-model收集表单数据

new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
      }
    }
  })
<div id="demo">


  <form action="/xxx" @submit.prevent="handleSubmit">
    <input type="text" v-model="username"><br>
    <input type="password" v-model="pwd"><br>
    <input type="submit" value="注册">
  </form>
</div>

4、自定义过滤器

// [moment 插件](https://momentjs.com/)
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
 // 定义过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
return moment(value).format(format);
})
new Vue({
  el: '#test',
  data: {
    time: new Date()
  },
  mounted () {
    setInterval(() => {
      this.time = new Date()
    }, 1000)
  }
})

// html
<
div id="test">
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

5、自定义指令

<script type="text/javascript">
  // 注册一个全局指令
  Vue.directive('v-upper-text-text', function (el, binding) {
	 // el: 指令所在的标签对象
	 // binding: 包含指令相关数据的容器对象
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  
  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 注册局部指令
    directives: {
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }

  })

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

//HTML
<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>

6、Vue插件

// vue-myPlugin.js
(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.toUpperCase();
    })

    // 4. 给Vue原型添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  window.MyPlugin = MyPlugin
})(window)

// 使用插件
<script type="text/javascript">
  // 声明使用插件
  Vue.use(MyPlugin) // 内部会执行MyPlugin.install(Vue)
  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()

  new Object()
</script>

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