美文网首页vue学习
Vue属性汇总 持续更新

Vue属性汇总 持续更新

作者: 努力努力的老姑娘 | 来源:发表于2017-08-19 14:21 被阅读0次
  • 首先用js的new关键字实例化一个vue
  • el: vue组件或对象装载在页面的位置,可通过id或class或标签名
  • template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板
  • data: 数据通过data引入到组件中
在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,   
才不会因为为一个组件的值发生改变而改变其他页面的内容。
data () {
     return {
          ......
     }
}
  • computed 计算属性,用于简单的运算,会保留缓存,当相关依赖没有发生改变时多次访问computed中的函数时,立即返回之前的计算结果,不会再次调用函数获得数据
  • methods 方法/函数 没有缓存,每访问一次调用一次函数
  • watch 监听vue的变量,每当变量被改动的时候都去执行特定的操作
    <input type="text" v-model="myVal">
export default {
  components: {
    componentA: componentA
  },
  data () {
    return {    
      myVal: ''
     }
  }
  watch: {
    myVal: function (val, oldVal) {
      console.log(val, oldVal)
    }
  }
}

在文本框中随意输入123abd的过程中,控制台输出了文本框中的当前值和修改前的值。

  • props 传递数据,让子组件使用父组件的数据。
    接受两种类型的值。
    ①数组 props: ['first' , 'sceond',...]
    ②对象
props: {
     'number-to-do' : Number,         //在html中传过来的都是字符串,所以这里可能会报错
     'second': [Number, String, Object]     //接受的类型,可为多个。
}

相关文章

  • Vue属性汇总 持续更新

    首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名...

  • Vue3.0 Openlayers教程

    Vue3.0 Openlayers教程持续更新中......

  • vue-cli3

    终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)完整详细配置(持续更新...

  • Vue 数据更新了但页面没有更新

    原文链接: Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结[https://segmentfault...

  • Vue实现原理

    vue实现原理 1、了解Object的属性defineProperty 2、vue中mvvm的实现: 数据变化更新...

  • 文章汇总--持续更新

    总结 总结一些这一段时间在平台上流水账式的记录和分享,也感谢各路大神,同行给的一些支持,我写的文章本来是记录给我自...

  • 我的Android学习之路

    2020/11/24 1、Android学习资源汇总(持续更新)[https://www.jianshu.com/...

  • 前端项目demo

    uni-app简单例子vue简单例子特效例子...持续更新

  • RAC实战

    RAC实战 RAC实战 - 专题 - 简书 RAC(ReactiveCocoa)学习资源汇总~持续更新 - CSD...

  • 数字货币交易所免翻墙汇总

    免翻墙汇总,持续更新...地址https://www.btcqushi.com/archives/387 包含了火...

网友评论

    本文标题:Vue属性汇总 持续更新

    本文链接:https://www.haomeiwen.com/subject/lorwlxtx.html