关于Vue中的options选项


Posted in Vue.js onMarch 22, 2022

Vue中的options选项

options的五类属性

  • 数据: data,props,propsdata,computed,methods,watch
  • DON: el,template,render,rebderError
  • 生命周期钩子函数:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,erroCaptured。
  • 资源:directives,filters,components
  • 组合:parent,mxins,extends,provide,inject

入门属性

  • el(挂在点)
new Vue({
    el:"#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")
  • data(内部数据)支持对象和函数,优先使用函数
    • 会被Vue监听
    • 会被Vue实例代理
    • 每次data的读写都会被Vue监听
    • Vue会在data变化是更新UI
对象
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount('#app')
函数
vue非完整版只支持函数
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')
  • methods(方法)事件处理函数或者普通函数
new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	console.log('我可以是事件处理函数也可以是普通函数')
}
        }
}).$mount('#app')
  • components(vue组件:注意大小写)三种方式
注册全局组件
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
注册局部组件
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
   //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>组件3</h3>"
  }
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount('#app')

使用vue文件添加组件

deon4.vue文件

<template>
  <div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "组件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

main.js

import Deon4 from './deon4.vue'
Vue.component('Deon1', {
  template: "<h2>全局组件</h2>"
})
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
  //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>组件3</h3>"
    },
    Deon4
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount('#app')
  • 常用的四个生命周钩子函数
    • created: 实例出现在内存中
    • mounted:实例出现在页面中触发
    • updated:实例出现了变化触发
    • destroyed:实例被销毁了触发
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    },
     created() {
    console.log("实例出现在内存中了触发");
  },
  mounted() {
    console.log("实例出现在页面中触发");
  },
  updated() {
    console.log("实例出现了变化触发");
  },
  destroyed() {
    console.log("实例被销毁了触发");
  }
}).$mount('#app')
  • props(外部数据)父组件想子组传值
    • name="n"(传入字符串)
    • :name="n"(传入this.n数据)
    • :fn="add":(传入this.add函数)
new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount('#app')

computed(计算属性)

  • 不需要加括号
  • 他会根据依赖是否变化来缓存(如果依赖没有变化,就不会重新结算)
  • 类型{ [key: string]: Function | { get: Function, set: Function } }

用途

缓存

  • 如果依赖的属性没有变,化就不会重新计算
  • getter/setter默认不会做缓存,Vue做了特殊处理
  • 如何缓存?看示例 这是示例不是Vue的实现

示例

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch(监听)

  • data变化,就会执行函数
  • options.watch用法
  • this.$watch用法
  • deep:侦听的对象的 property 改变时被调用,不论其被嵌套多深
  • immediate:侦听开始之后被立即调用
  • 类型{ [key: string]: string | Function | Object | Array }

用途

  • 当数据变化时,执行一个函数
  • 例子1撤销
  • 例子2 模拟computed 这样很傻,一般不这样做

何为变化

 原本 let obj = {a:'a'} 现在 obj={a:'a'} 请问
 obj变了没有. obj.a变了没有
简单类型看至,复杂类型(对象)看地址
这其实就是 ===的规则

示例

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true//监听是否深入
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组,它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined

deep: true是干什么的?

  • 如果object.a变了,请问object算不算变

  • 如果需要的答案是(也没变啦),那么就用deep: true

  • 如果需要的答案是(没有变),那么就用deep: false

  • deep的意思是监听 object的时候是否往深了看

computed和watch的区别

computed计算属性

  • computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
  • computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  • 调用时不需要加括号

watch 监听器

  • watch是监听器,可以监听某一个数据,然后执行相应的操作;
  • 不支持缓存,数据变直接会触发相应的操作;
  • 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 支持异步操作;
  • deep选项:侦听的对象的 property 改变时被调用,不论其被嵌套多深
  • immediate:为true时侦听开始之后被立即调用

总结

到此这篇关于Vue中options选项的文章就介绍到这了,更多相关Vue的options选项内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
You might like
php 调试利器debug_print_backtrace()
2012/07/23 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python实现简单多线程任务队列
2016/02/27 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python logging模块的使用总结
2019/07/09 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
什么是Web Service?
2012/07/25 面试题
优秀护士演讲稿
2014/04/30 职场文书
物业管理专业求职信
2014/06/11 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript