zoukankan      html  css  js  c++  java
  • vue使用总结

    一、vue中能提供数据的有:

    1、data属性,如:data:{message: ''}中的message;

    2、props中的元素,如props: ['title']中的title;

    3、v-for中遍历出的元素,如v-for="todo in todos"中的todo;

    注意:data和props中的数据在methods和computed中被引用时前面必须添加“this.”,在标签中不需要;同样的,在标签中使用methods和computed中的方法时也不需要添加"this.";

    4、插槽slot:

    二、根实例向子组件传递数据的方式:

    1、props:

    2、slot:

    三、子组件向根实例传递数据的方式:

    子组件的通过$emit('event_name', component_value)传递;

    根实例中通过一个方法接收:function(data){......};

    四、vue的methods和computed中的方法在{{}}和指令中其后面不添加“()”表示引用;

    五、v-for可以循环组件;

    六、"{{}}"和"v-html"输出data数据的相同和区别:

    相同:data数据属性直接写入即可(htm标签属性如果想绑定data数据需在标签的属性前添加“v-bind”);

    区别:如果data数据包含html标签,"v-html"可以将html标签解析,"{{}}"形式不行;

    七、data数据的输出位置 :

    1、标签中用“{{}}”输出;

    2、标签属性中用“v-bind:”输出;

    3、标签中直接用“v-html”输出;

    4、标签中用“v-for”循环输出;

    八、methods、computed、watch:

    methods:一般的方法;

    computed:对于任何复杂逻辑,你都应当使用计算属性;

    watch:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的;

    九、v-for 与 v-if:

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用。

    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。

    十:组件:

    组件是可复用的 Vue 实例,且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

    全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

    $emit:向父级组件触发一个事件;

    通过事件向父级组件发送消息的两种方式:

  • 相关阅读:
    python 面向对象(三大特性)
    python 发红包
    python 计算器
    python 模块和包
    python 异常处理
    python 序列化模块
    python 常用模块
    esriSRGeoCS3Type Constants
    esriSRGeoCS2Type Constants
    esriSRGeoCSType Constants
  • 原文地址:https://www.cnblogs.com/samve/p/9250329.html
Copyright © 2011-2022 走看看