zoukankan      html  css  js  c++  java
  • 组件基础

    使用v-on 时 可以在根组件上 监听子组件由$emit注册的事件 

    然后进行调试   子组件$emit(注册一个事件名,返回的数据)  该返回的数据可以由 $event 直接捕获到

    <blog-post
      ...
      v-on:enlarge-text="postFontSize += $event" //直接捕获 在等号右边可以是一个变量或者是具体的数据  该变量无需传值 可以从父元素上拿到

    ></blog-post>

    也可以是在根组件上 v-on 上注册一个方法 用这个方法来接收这个参数。

    <blog-post
      ...
      v-on:enlarge-text="onEnlargeText"  //该方法只能接收一个参数 所有在传输多条数据时 可以传一个对象或者一个json
    ></blog-post>
    
    
    methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
      }
    }

    组件内 的template: 可以使用字符串模板 es6 语法需要使用babel 或者使用其他插件来支持IE8  也可以使用 转义符号去支持IE8浏览器 

    组件内使用slot插槽 可以在template中直接使用slot去占位 然后在该组件解析上去使用 和插入内容。

    vue的官网组件切换实例如下

    <component v-bind:is="currentTabComponent"></component>
    这里可以使用
    vue的代码
    var tabs = [
      {
        name: 'Home', 
        component: { 
          template: '<div>Home component</div>' 
        }
      },
      {
        name: 'Posts',
        component: {
          template: '<div>Posts component</div>'
        }
      },
      {
        name: 'Archive',
        component: {
          template: '<div>Archive component</div>',
        }
      }
    ]
    
    new Vue({
      el: '#dynamic-component-demo',
      data: {
          tabs: tabs,
        currentTab: tabs[0]
      }
    })
    
    html的代码
    
    <div id="app">
      <h2>Todos:</h2>
      <ol>
        <li v-for="todo in todos">
          <label>
            <input type="checkbox"
              v-on:change="toggle(todo)"
              v-bind:checked="todo.done">
    
            <del v-if="todo.done">
              {{ todo.text }}
            </del>
            <span v-else>
              {{ todo.text }}
            </span>
          </label>
        </li>
      </ol>
    </div>
     
  • 相关阅读:
    JavaWeb-ajax
    数据库-条件查询和分页
    JSP-EL和JSTL
    ROS的STM32电机驱动
    rosserial_python serial_node.py分析--补遗
    rosserial_python serial_node.py分析
    Python的matplotlib绘图
    kNN算法与python
    利用网售的PID调制工具配置电机PID参数
    mbed的ticker问题
  • 原文地址:https://www.cnblogs.com/l8l8/p/9163734.html
Copyright © 2011-2022 走看看