关于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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP的中问验证码
2006/11/25 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
django输出html内容的实例
2018/05/27 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
numpy基础教程之np.linalg
2019/02/12 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
wxPython实现整点报时
2019/11/18 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
Yahoo-PHP面试题4
2012/05/05 面试题
专题组织生活会方案
2014/06/15 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
安阳殷墟导游词
2015/02/10 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python