Vue选项/资源

阳光穿透心脏的1/2处 2024-04-17 05:54 57阅读 0赞

Vue选项/资源

  • directives
  • filters
  • components

directives

  • 类型:Object
  • 详细:包含 Vue 实例可用指令的哈希表。

示例:

  1. <div id="app">
  2. <span v-hello="color3">{
  3. {message}}</span>
  4. <button @click="add"> 点击开始加1</button>
  5. </div>
  6. Vue.directive("hello",function(el,binding,vnode){
  7. el.style["color"]= binding.value;
  8. })
  9. var app = new Vue({
  10. el:"#app",
  11. data:{
  12. message:10,
  13. color3:"red"
  14. },
  15. methods:{
  16. add:function(){
  17. this.message++;
  18. }
  19. }
  20. })

filters

  • 类型:Object
  • 详细:包含 Vue 实例可用过滤器的哈希表。

示例:

  1. <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
  2. Vue.filter("change", {
  3. read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
  4. return value;
  5. },
  6. write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
  7. console.log("newVal:"+newVal);
  8. console.log("oldVal:"+oldVal);
  9. return newVal;
  10. }

components

  • 类型:Object
  • 详细:包含 Vue 实例可用组件的哈希表。

示例:

  1. let child1 = Vue.extend({
  2. template: ` <p>子组件child1</p> `
  3. });
  4. let child2 = Vue.extend({
  5. template: ` <p>子组件child2</p> `
  6. });
  7. Vue.component('like', {
  8. components: {
  9. 'child-com1': child1,
  10. 'child-com2': child2
  11. },
  12. template: ` <div> <child-com1></child-com1> <child-com2></child-com2> </div> `
  13. });

发表评论

表情:
评论列表 (有 0 条评论,57人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue基础----选项

    propsData Option 全局扩展的数据传递 propsData 不是和属性有关,他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识,作一个 的扩展标签出来