站长资讯网
在vue中，options选项是指“构造选项”，是在创建Vue实例时传入的参数，是一个对象，语法“const vm = new Vue(options)”。通过“new Vue(options)”来创建出一个Vue实例，也称为Vue对象，该Vue实例封装了操作元素视图的所有操作，可通过Vue实例来轻松操作对应区域的视图。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
Vue中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实例 来轻松操作对应区域的视图;
-
数据: 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')
登录后复制
【