返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue的options选项是什么
  • 479
分享到

vue的options选项是什么

Vue 2023-05-14 21:05:58 479人浏览 安东尼
摘要

本教程操作环境:windows7系统、vue3版,DELL G3电脑。Vue中options的作用options是什么options 顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.const

vue的options选项是什么

教程操作环境:windows7系统、vue3版,DELL G3电脑。

Vue中options的作用

options是什么

options
顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.
const vm = new Vue(options)

  • 无论是Jquery.js 还是 vue.js, 都是在 js 的基础上再次封装对应的操作。如: 通过$(‘div’)获得一个jQuery的div元素实例, 也称为jQuery对象, jQuery对象包含了对选项中的div元素的各种操作api,因此jQuery实例封装的是对选项中元素的各种操作;
  • 而Vue.js 在此基础上更进一步, 封装了对视图的所有操作, 包括数据的读写、数据变化的监听、DOM元素的更新等等, 通过 new Vue(options) 来创建出一个 Vue实例, 也称为Vue对象, 该Vue实例封装了操作元素视图的所有操作, 可通过 Vue实例 来轻松操作对应区域的视图;

options的五类属性

  • 数据: data, props, propsData, computed, Watch;

  • DOM: el, template, render, renderError;

  • 声明周期钩子: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured;

  • 资源: directives、filters、components;

  • 组合: parent、mixins、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')

【相关推荐:vuejs视频教程、WEB前端开发

以上就是vue的options选项是什么的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue的options选项是什么

本文链接: https://lsjlt.com/news/206116.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue的options选项是什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。Vue中options的作用options是什么options 顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.const ...
    99+
    2023-05-14
    Vue
  • vue的options选项有什么作用
    这篇文章主要讲解了“vue的options选项有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的options选项有什么作用”吧!在vue中,options选项是指“构造选项”...
    99+
    2023-07-04
  • Vue中的options选项怎么用
    这篇文章主要介绍了Vue中的options选项怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的options选项怎么用文章都会有所收获,下面我们一起来看看吧。Vue中的options选项optio...
    99+
    2023-06-29
  • Vue中options是什么
    小编给大家分享一下Vue中options是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1. options 是什么无论是 jQuery.js 还是 Vue....
    99+
    2023-06-15
  • 详细聊聊Vue中的options选项
    目录Vue中的options选项options的五类属性入门属性使用vue文件添加组件computed(计算属性)用途缓存示例:watch(监听)用途何为变化deep: true是干...
    99+
    2024-04-02
  • ASP.NETCore中的Options选项模式
    1.前言 选项(Options)模式是对配置(Configuration)的功能的延伸。在12章(ASP.NET Core中的配置二)Configuration中有介绍过该功能(绑定...
    99+
    2024-04-02
  • ASP.NET Core中的Options选项模式怎么配置
    这篇文章主要介绍“ASP.NET Core中的Options选项模式怎么配置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ASP.NET Core中的Options选项模式怎么配...
    99+
    2023-06-29
  • .Net Core 中选项Options的具体实现
    目录由代码开始定义一个用户配置选项定义json配置文件:myconfig.json创建ServiceCollection示例代码代码运行结果通过运行代码得到的结论问题配合源码解决疑惑...
    99+
    2024-04-02
  • boot options电脑上指的是什么
    这篇文章主要介绍“boot options电脑上指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“boot options电脑上指的是什么”文章能帮助大家解决...
    99+
    2023-03-20
    电脑
  • Vue.js中extend选项和delimiters选项的区别是什么
    Vue.js中extend选项和delimiters选项的区别是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。extend...
    99+
    2024-04-02
  • Excel VBA中的.NumberFormat选项是什么
    在Excel VBA中,.NumberFormat属性用于设置单元格格式的数字格式。此属性允许您定义单元格中数字的显示方式,如货币、...
    99+
    2023-09-26
    VBA
  • vue项目中$t()指的是什么
    本篇内容主要讲解“vue项目中$t()指的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中$t()指的是什么”吧!vue中$t()的意思一般项目vue文件中将会把中文字符的数量拉...
    99+
    2023-06-30
  • Java+Selenium实现控制浏览器的启动选项Options
    目录简介Options选项设置浏览器后台运行设置浏览器最大化自定义浏览器大小加载用户配置隐藏指纹特征禁用浏览器正在被自动化程序控制的提示模拟移动设备添加代理设置chrome的下载路径...
    99+
    2023-01-11
    Java Selenium控制浏览器Options Java Selenium控制Options Java Selenium Options Java Selenium
  • vue项目中$t()的意思是什么
    目录vue中$t()的意思vue中$t()的使用说明vue中$t()的意思 一般项目vue文件中将会把中文字符的数量拉至最低,这时候需要用一个文件容器来储存他们。 举例: <e...
    99+
    2024-04-02
  • Vue项目的访问流程是什么
    本文小编为大家详细介绍“Vue项目的访问流程是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue项目的访问流程是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、Vue项目的搭建首先,我们需要使用Vu...
    99+
    2023-07-06
  • vue-cli是什么及创建vue-cli项目的方法
    目录1.什么是 vue-cli2.安装 vue-cli3.解决 Windows PowerShell 不识别 vue 命令的问题4.创建项目 vue-cli4.1 基于 vue ui...
    99+
    2023-05-16
    vue-cl创建项目 vue-cl是什么
  • PostgreSQL创建函数中的选项是什么
    这篇文章主要介绍“PostgreSQL创建函数中的选项是什么”,在日常操作中,相信很多人在PostgreSQL创建函数中的选项是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • plsql首选项配置的方法是什么
    PL/SQL首选项配置的方法包括: 打开SQL开发人员工具,比如SQL Developer。 在菜单栏中选择“工具”(Tools)...
    99+
    2024-04-09
    plsql
  • vue创建项目时sass指的是什么
    这篇文章主要介绍“vue创建项目时sass指的是什么”,在日常操作中,相信很多人在vue创建项目时sass指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue创建项...
    99+
    2024-04-02
  • 初始化vue项目的过程 是什么
    本篇内容主要讲解“初始化vue项目的过程 是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“初始化vue项目的过程 是什么”吧!在命令行执行命令“vue init webpack vue-pr...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作