Vue 实例及构造选项 options

简介: Vue 实例及构造选项 options

1、Vue 实例

const vm = new Vue( options );这句话表示创建一个 Vue 的实例 vm,类似 jQuery 的封装思想,vm 对象内封装了对视图的所有操作,比如:数据的读写、事件的绑定、Dom 更新等(但是没有 Ajax,因为 Vue 主要是视图层的操作,不涵盖网络层)。

如图所示,vm 对象中封装了图中的蓝色区域对象,该对象的所有操作都可以通过 vm 实例的 API 来操作。vm 的构造函数是 Vue,按照 ES6 的说法,vm 所属的类是 Vue,options 是 new Vue 的参数,一般称之为 选项构造选项

2、构造选项 options

options 是创建 vue 实例时的参数,具体可以查看 选项官方文档,options 内含 五大类 属性:


数据:data、props、propsData、computed、methods、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

红色代表基础重要属性,黄色代表高级重要属性,紫色代表特殊的重要属性,其余的到官网做一些了解即可。

3、options 基础重要属性

import Demo1 from './demo.vue'    //第一种使用组件的方式 - .vue,文件名最好小写,组件名最好大写
Vue.component('Demo2',{           //第二种使用组件的方式 - Vue.component,可接收的参数和vue实例的一样,data、methods等
  template: `<div>demo2</div>`
})
new Vue({
  el:'#app',    //挂载点,等价于$mount('#app')
  data:{        //或是函数的形式:data:function(){ return {num:0} }
    num: 0
  },
  methods:{},  //内定义事件处理函数 or 普通函数
  components:{ Demo1: Demo1 },   //引用外部组件.vue 文件,内部的组件不用引入。改属性支持直接写组件内容template等属性
  template: `<div> <Demo1/> <Demo2/> </div>`,    //使用组件占位符引用组件
  props:['message','fun']    //外部属性/方法,传入后可在当前vue实例/组件内使用:(this.)message,@click="fun"
})

el 属性 - 挂载点:页面渲染会以 el 属性上的元素作为挂载点进行内容替换,与 $mount 有替换关系,二者选其一。


   补充:new Vue({ el:'#app' }) 等价于 new Vue({}).$mount('#app')、挂在基本上和 append() 概念差不多。


data 属性 - 内部数据:内部数据支持对象和函数,优先用函数。data:{ num:0 } 或者 data:function(){return { num:0 }}


   解释:vue 官方文档说明,如果是在 .vue 文件中的 data 只能使用函数。vue 组件其实是一个对象,它会被作为参数传递给 h 函数,相当于 new Vue( 组件对象 ),渲染一次不会有任何问题,但是如果组件复用,需要渲染两次或多次,则多次 new Vue( 组件对象 ) 的组件对象中的 data 是同一个对象,这样就会导致一个 data 数据同时被两个组件使用,如果其中一个组件将 data 改变了,则另一个组件中的 data 必然收到影响。


   使用 data 函数是为了组件的复用,new Vue(组件对象) 操作时,如果发现 data 是函数,则会先执行类似这样的操作:组件对象._data = 组件对象.data();使得每份组件都可以有一份 data 的拷贝,防止不同组件修改数据时被相互覆盖,如果 data 是对象话,对象会在这个组件的所有实例中共享,这样导致数据被多个组件使用,会相互影响。


methods 属性 - 方法:内部定义事件处理函数或者是普通函数。


   说明:页面每次变化都会执行写在 template 或 html 中的 {{ function() }}( function 定义在 methods 属性中)。


components 属性 - 组件:使用 Vue 组件,注意大小写


   组件可以是两种形式,一种是外部引入 .vue 文件,需要引入,在 components 属性中注册,并在模板中填写占位符。第二种可以是通过 Vue.component 直接声明,不需要在 components 属性中注册即可使用。组件名最好大写!


四个钩子 - 生命周期:可以通过 debugger 的方式检测。具体可参看这篇博客:➡ Vue 实例的生命周期图解


   created():表示实例出现在内存中,但是没有被渲染到页面中。

   mounted():实例已经被渲染到页面中。

   updated():实例更新了,比如点击按钮,页面数字 + 1 操作,可以拿到更新后的数据。

   destroyed():实例消亡了,从页面中消失了。可结合 v-if 控制当前模块在页面中是否显示,消失就触发 destoryed()。


props 属性-  外部属性:


   在组件占位符上以赋值的形式向子组件传值,如:<Demo message = 'hello'/>,如果需要给子组件传递当前组件的变量的话,则需要:<Demo  v-bind:message = 'this.data'/>,其中 v-bind 可以省略,只留下 :,如果加上 v-bind:则引号 "" 内的都以 JavaScript 的代码进行处理。


   基于上述理论,如下两种形式是相同的:<Demo :message=" '0' ">  or  <Demo message="0">,都是传递字符串 0。


   除了传递属性,还可以传递方法给子组件。在子组件中,props 以数组的形式接收外部传递进来的属性/方法,当然也可以是以对象的形式,这样的话就可以设置 传值类型 和 default 默认值。

目录
相关文章
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
9 3
|
2天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
2天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
10 2
|
JavaScript
vue实例-vue官网学习笔记
1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的: var vm=new Vue({ //选项 }); ②在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板挂载元素、方法、生命周期钩子等选项。
879 0
|
9天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
2天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0