关于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 25 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 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写的简易聊天室代码
2011/06/04 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
20个常用Python运维库和模块
2018/02/12 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python实现的发邮件功能示例
2019/09/11 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
中间件分为哪几类
2016/09/18 面试题
Servlet面试题库
2015/07/18 面试题
省优秀教师事迹材料
2014/01/30 职场文书
手工社团活动方案
2014/02/17 职场文书
学生干部培训方案
2014/06/12 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
岗位说明书怎么写
2014/07/30 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
高中军训的心得体会
2014/09/01 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书