关于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+iview分页组件的封装
Nov 17 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue postcss-px2rem 自适应布局
May 15 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
我的论坛源代码(十)
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php的hash算法介绍
2014/02/13 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
php实现留言板功能
2017/03/05 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python sorted方法和列表使用解析
2019/11/18 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
医学生个人求职信范文
2013/09/24 职场文书
派出所所长先进事迹
2014/05/19 职场文书
节能减耗标语
2014/06/21 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
作文评语集锦
2014/12/25 职场文书
初中同学会致辞
2015/08/01 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis