zoukankan      html  css  js  c++  java
  • vue指令参考

    vue 指令 directive, 只是dom上的行间属性,vue给这类属性赋予一定的意义来实现特殊的功能。所有指令以v-

    开头。

    <input type="text" v-model='message' >
    //value 属性默认会被vue忽略,selected,checked属性也如此。
    let vm=new Vue({
       el:'#app',
       data:{
          person:{name: ' '} //使用变量时先要初始化,否则新加的属性不会导致页面更新。即 name需要赋值,哪怕赋值为空。如果没定义该属性,则需用vm.$set(vm.person, 'name', 'aaa')给对象添加响应式数据变化,或用替换原对象方法,即vm.person={name:'aaa'}
        }
    });
    let vm=new Vue({
       el:'#app',
       data:{
          arr:[1,2,3]//改变数组中的某一项是监控不到的,也不能使用改变其长度的方法。即 vm.arr[0]=xxx, vm.arr.length-=1,可使用可改变原数组值的函数加工。如pop,push,shift,unshift,sort,reverse,splice,也可用map, filter等函数,如:
      //vm.arr=vm.arr.map(val=>val*=2);
    
        }
    });    

    v-once 指令:只绑定一次。当数据再次变化也不会导致页面刷新。

    <div v-once>{{name}}</div>

    v-html:渲染带html代码的字符串. 一定要是可信任的html

    <div v-html="text"></div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa',
          text:'<p>hello world!</p>'
        },
      
    });    
    v-for 指令
    <ul>
    <li v-for="item in items">{{item.name}}:{{item.price}}</li> //不加索引的格式
    </ul>
    
    <ul>
    <li v-for="(item,index) in items">{{item.name}}:{{index+1}}</li> //加索引的格式
    </ul>

    v-for 循环嵌套

    <ul>
    <li v-for="item in items">{{item.name}}:{{item.price}}</li>
    <ul>
    <li v-for="(type,childindex) in items.types">{{childindex+1}}:{{type}}</li>
    </ul>
    </ul>

    v-on 事件处理

    调用无参数函数:
    <div v-on:click='clickme‘> Click Me </div>
    或者:
    <div @click="clickme">Click Me </div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa'
        },
        methods:{
        clickme(){alert(this.name)}
        }
    });    
    调用有参数函数:
    <div v-on:click='clickme($event,1)‘> Click Me </div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa'
        },
        methods:{
        clickme(event, param){if param==1 console.log(event)}
        }
    });    

    如果不传参数,则v-on:click后调用函数不要写括号,会自动传入事件源。如果传参数,要手动传入$event属性。methods中的this指代根实例,即vm. methods和data里的数据会全放到vm上,且名字不能冲突。

  • 相关阅读:
    pat 甲级 1065. A+B and C (64bit) (20)
    pat 甲级 1064. Complete Binary Search Tree (30)
    pat 甲级 1010. Radix (25)
    pat 甲级 1009. Product of Polynomials (25)
    pat 甲级 1056. Mice and Rice (25)
    pat 甲级 1078. Hashing (25)
    pat 甲级 1080. Graduate Admission (30)
    pat 甲级 团体天梯 L3-004. 肿瘤诊断
    pat 甲级 1099. Build A Binary Search Tree (30)
    Codeforce 672B. Different is Good
  • 原文地址:https://www.cnblogs.com/itwatcher/p/8410713.html
Copyright © 2011-2022 走看看