Vue的基本语法笔记(二)

来源:xiaoger 发布时间:2020-03-31 09:31:03 作者:admin 阅读量:169

组件


  • 相当于一个自定义的标签,里面有一些自定义内容。
<div id="app">
    <runoob></runoob>    //这里使用的就是自定义标签
</div>
 
<script>
// 注册
Vue.component('runoob', {    //Vue.component(op1,op2),第一个参数是自定义的标签名,第二个参数
  template: '<h1>自定义组件!</h1>'  //是配置项
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

prop

  • prop是子组件接受父组件传过来的数据,其实就是上一层的数据传入下一层而已
  • prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。

<div id="app">
    <child message="hello!"></child>   //设置父标签中message的内容
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],    //接受父标签传来的数据
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'    //子标签中可以接收到message数据
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

自定义事件


  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件
<button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')    //触发自定义increment事件从而调用incrementTotal方法!
    }                            //这里的incrementTotal方法没写
  },
})
  • 上述代码首先自定义了一个标签,<button-counter>,标签中有一个按钮,并且绑定了事件,点击按钮就调用 incrementHandler 方法

自定义指令


  • 使用directives来注册局部指令
<div id="app">
  <p>页面载入时,input 元素自动获取焦点:</p>
  <input v-focus>
</div>
 
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>
  • 钩子函数详情可以看这里



Original article, reproduced please specify:Vue的基本语法笔记(二) | xiaoger

(本站所有资源来源于网络,仅供学习交流使用,本站不承担关于本资源的任何法律责任。)

我要评论 登录后才能发布评论

  Article archive

感谢鲶鱼博客提供的模板   我要留言
中央许可免备案
Catfish(鲶鱼) CMS V 5.9.15