zoukankan      html  css  js  c++  java
  • vue.js基础学习(2)

    vm=new vue({

    date:{name:"aa",

    user:{“name”:"lsm"}});

    获取属性值

    1:vm.name

    2:vm.$data.name

    3:获取vue关联的实例  vm.$el

    vm.$el.style.color="red"

    4:获取自定义属性

    vm.$options.name

    5:获取所有添加了ref属性的元素

    vm.$refs         <h2 ref="hello"></h2>    vm.$el.hello.style.color="red"

    6:$set  $delete  对象属性的添加和删除

    method:{

    add(){

    this.$set(this.user,"age",22)

    }

    del(){

    this.$delete(this.user,"age")

    }

    }

    7:全局组件

    创建方法1:var Component =vue.extend({

    template:'<h1>hello</h1>'

    })

    vue.component(“hello”,Component)

     创建方法2: vue.component(“wrold”{

    template:'<h1>wrold</h1>'

    })

    引用:<hello></hello>

    8:局部组件

    1.自动挂载

    components:{

    "my-adress":{

    template:'<h1>wrold</h1>'},

    "my-name":{

    template:'<h1>{{name}}</h1>',

    data(){

    return {"name":"lsm"}}}

    }

     2.手动挂载

    "my-name":{

    template:'#myname',

    data(){

    return {"name":"lsm"}}}

    }

    <template id="myname"><template>

    9.$nextTick  用于延时,待页面渲染以后再获取dom元素的值

    10:组件之间的传值

    1):父传子   父使用指定变量传参(如a="2"b="6"),子组件使用对应的参数(props:["a","b"])接收,参数名对应,如果需要限制类型,

    写法为

    props:{

    a:string,

    b:string,

    name:{

    type:string,

    required:false

    },

    age:

    {type:number,  数据类型

    default:10,  默认值

    validator:function(){return value<0}  参数校验

    }

    2):子传父  $emit发射

    this.$emit("name",parm1,parm2)      写在子组件中

    <my-child message1="dddd" message2="ffff"@name=“getSubData“></my-child>

    也可以在生命周期mounted中使用vm.$on("name",name=>{this.name=name})    $on用于监听指定事件

    触发getSubData为父组件的方法用于获取广播过来的参数

    3):非父子关系组件之间使用$emit发射的方式

  • 相关阅读:
    实训-涉及前端的一些小总结
    实训-mybatis-经验总结2
    实训-mybatis-经验总结
    中软实训笔记
    jsp 中JSTL遇到的报错异常
    mysql的小发现
    Maven笔记
    springmvc-3-拦截器
    springmvc 上传图片
    springmvc
  • 原文地址:https://www.cnblogs.com/min-min-min/p/10043405.html
Copyright © 2011-2022 走看看