组件--插件--辅助

props属性验证

常用形式：

props: {
key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
}

业务：我现在想要 > 1000 我才要，没有 > 1000 我就不要
解决： vue提供了一个：validator

props: {
key: {
validator( value ){
return value 的条件
}
}
}

不常用形式

props: {
propA: [],
propB: {
type: String,
require: true
},
propC: {
type:String,
default: 'yyb'
},
propD: {
type: String,
default: function(){
return 'yyb'
}
}
}

有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库

过滤器

vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写
但是vue提供饿了定义过滤器的方式
过滤器：对数据进行格式化的一个函数
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’

动态组件

- 动态组件就是 component组件，组件身上可以绑定一个is属性，用来表示某一个组件

<body>
  <div id="app">
    <keep-alive>
      <component is = "B"></component>  <!--  直接conponent  is绑定   -->
    </keep-alive>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    components: {
      "A": {          //定义模板
        template: '<div> A </div>'
      },
      "B": {
        template: '<div> B </div>'
      }
    }
  })
</script>

数据的切换

<body>
  <div id="app">
    <button @click = 'type = type === "A"?"B":"A"'> 切换 </button>
    <component :is = "type"></component>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      type: 'A'
    },
    components: {
      "A": {
        template: '<div> A </div>'
      },
      "B": {
        template: '<div> B </div>'
      }
    }
  })
</script>

v-if写法

<body>
  <div id="app">
    <button @click = 'f = !f'> 切换 </button>
    <my-a v-if = "f"></my-a>
    <my-b v-else></my-b>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      type: 'A',
      f: true
    },
    components: {
      "MyA": {
        template: '<div> A </div>'
      },
      "MyB": {
        template: '<div> B </div>'
      }
    }
  })
</script>

不常用的指令

v-text
v-html ----- - 都是用来将数据插入DOM中，但是v-html可以解析标签类型数据
- v-cloak 解决 {{}} 语法短暂原样输出
- v-pre 原样输出
- v-once 只渲染一次

<body>
  <div id="app">
    <h3> v-text </h3>
    <p> {{ msg }} </p>
    <p v-text = "msg"></p>
    <div v-text = "title"></div>
    <h3> v-html </h3>
    <div v-html = "title"></div>
    <div v-html = "msg"></div>
    <h3> v-pre </h3>
    <p v-pre>
      {{ msg }}
    </p>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js',
      title: '<h3> hello title </h3>'
    }
  })
</script>

动态组件

不常用的指令

猜你喜欢