• 时间:
  • 分类: Web

Vue2

响应式数据与插值表达式

插值表达式

使用插值表达式{{}}可以显示对应单一内容:

<p> {{x}} </p>                //显示变量或属性;
<p> {{x+1}} </p>              //显示单行表达式;
<p> {{X?'true':'false'}} </p> //显示三元计算式;
<p> {{fun()}} </p>            //显示方法返回值;

响应式数据

数据变化时,会自动更新对应方法、属性、插值表达式。

变量

方法

计算属性

  • 属性
    计算属性调用时作为变量调用，无需()。
  • 缓存性
    计算属性具有缓存性，相关的响应式数据变化时，针对多次调用只会计算一次。

侦听器

通过设置与属性同名监听方法，可以在属性变化时，做更多操作。

指令

  • 内容指令

    • v-text
    • v-html

  • 渲染指令

    • v-for
      for (item,name,index) in obj
      for item in arr
    • v-if
    • v-show
  • 属性指令
    可用v-bind:一般属性 绑定响应式数据到html属性，如v-bind:title, 可简写为:title;
  • 事件指令
    可用v-on:一般事件名 绑定响应式数据到html事件，如v-on:click, 可简写为@click;

  • 表单指令
    可使用v-model绑定响应式数据到表单，如：

     <input type="text" v-model="inputVale"/>
 <p v-text="inputValue"></p>

  • 修饰符
    可使用修饰符将Dom数据处理后再传到Vue变量，如：

     <input type="text" v-model.trim="inputValue">

    则可将输入数据去空格赋值。

<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body >

</body>
</html>

<script>
const app = new Vue({
    el:'#app',
    data(){
        return {
            title:'text'
        }
    }，

});
</script>

组件通信

父传子

通过props传递.
父组件调用子组件时,直接以属性名传递值:

<child msg="message"  > </child>

在子组件定义中:

export default{
     props:{
        msg:String,
        count:{
            types: [String, Number],
            required: true
        }
    }
}

则子组件能够得到props内属性值.

子传父

通过事件传递.
子组件中触发事件:

fun(){
    this.$emit('event-child',this.msg);
}

父组件监听事件:

<child @event-child="handler"  > </child>
...
handler(msg)
{
    alert(msg);
}
...

同级传递

  1. 通过父中转;
  2. 引用EventBus,通过一个额外的Vue实例传递;
  3. 使用全局状态工具VueX;

组件插槽

默认插槽

在子组件中使用设置插槽位置,父组件可在子组件标签内用标签自定义其内容;

具名插槽

子组件中拥有多个插槽时可使用name标签标识,如 name="footer", 在父中可以在\<template> 中使用 v-slot:footer 或 #footer 属性来选择;
如:

  • 子组件

  • 父组件




作用域插槽

插槽可用于传递一些值,但仅能用于父中的子组件标签内:
如子中写:

<slot :variable="name"></slot>

则父中可以这两种方式调用:

  • \<template #footer="data"> {{data.name}}
  • \<template #footer="{{name}}"> {{name}}

标签: none

添加新评论