欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue的Options用法说明

程序员文章站 2022-06-24 23:02:36
el:挂载点与$mount有替换关系new vue({ el: "#app"});new vue({}).$mount('#app')注:被你选为挂载点的那个元素,如果在index.html里那个元素...

el:挂载点

与$mount有替换关系

new vue({
 el: "#app"
});

new vue({}).$mount('#app')

注:被你选为挂载点的那个元素,如果在index.html里那个元素里面本来就有内容,在渲染时会消失(网速慢可以看到),被这个vue实例的对应内容所覆盖。

data:内部数据

支持对象和函数,优先用函数

new vue({
 //优先使用函数
 data() {
  return {
   n: 0,
  }
 }
}).$mount("#app");

注:能写函数尽量写函数,否则有可能有bug;

methods:方法

事件处理函数

new vue({
   data (){
    return{
      n:0
    }
   },
  template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
    </div>
  `,
 //add必须写到methods里面
  methods:{
     add(){
       this.n+=1
     }
  }
}).$mount('#app')

普通函数:methods代替filter

import vue from "vue";
vue.config.productiontip = false;

new vue({
 data() {
  return {
   n: 0,
   array: [1, 2, 3, 4, 5, 6, 7, 8]
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button> //事件处理函数
 <hr>
 {{filter()}}  //普通函数(js的filter直接在视图里调用,每一次更新渲染都会调用一次)
 </div>
 `,//主动在模板里面调用
 methods: {
  add() {
   this.n += 1; //事件处理函数
  },
  filter() {
   return this.array.filter(i => i % 2 === 0); //普通函数
  }
 }
}).$mount("#app");

components:方法

使用vue组件,注意大小写

(建议用法) 模块化:

新建一个vue文件demo.vue,这个vue文件就是一个组件

在main.js中引入这个vue文件

在vue实例的components中声明这是我要用的组件,并且命名为demo

这样在这个vue实例的template中就可以直接使用这个组件<demo/>

import vue from "vue";
import demo from "./demo.vue"; //引入这个vue文件  ---文件名最好小写 组件名最好大写
vue.config.productiontip = false;

new vue({
 components: {
  demo //在vue实例的components中声明这是我要用的组件,并且命名为demo
  //如果组件名就叫demo,即demo:demo,那就写demo --es6缩写
  //components: {demo},
 },
 data() {
  return {
   n: 0
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button>
 <demo/>  //这样在这个vue实例的template中就可以直接使用这个组件`<demo/>`
 </div>
 `,
 methods: {
  add() {
   this.n += 1;
  },
 }
}).$mount("#app");

四个钩子

created -- 实例出现在内存中后触发
created(){
     debugger
     console.log('这玩意出现在内存中')
  },

mounted-- 实例出现在页面中(挂载了)后触发

 mounted(){
  debugger
     console.log('这玩意儿已出现在页面中')
  },

updated -- 实例更新了后触发

updated(){
     console.log('更新了')
    console.log(this.n) 
  },
 //当你+1的时候,能证明他在更新的时候触发,还可以拿到最新的n

destroyed -- 实例从页面和内存中消亡了后触发

props:外部属性

外部来传值

message="n"传入字符串

:message="n"传入vue实例的this.n数据

:fn="add"传入vue实例的this.add函数

补充知识:vue $options初始化

vue实例化时,对$options进行初始化

vue/src/core/instance/init.js

 vue.prototype._init = function (options?: object) {
  const vm: component = this
  // a uid
  vm._uid = uid++

  let starttag, endtag
  /* istanbul ignore if */
  if (process.env.node_env !== 'production' && config.performance && mark) {
   starttag = `vue-perf-start:${vm._uid}`
   endtag = `vue-perf-end:${vm._uid}`
   mark(starttag)
  }

  // a flag to avoid this being observed
  vm._isvue = true
  // merge options
  if (options && options._iscomponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initinternalcomponent(vm, options)
  } else {
  //初始化$options
   vm.$options = mergeoptions(
    resolveconstructoroptions(vm.constructor),
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.node_env !== 'production') {
   initproxy(vm)
  } else {
   vm._renderproxy = vm
  }
 }
}

以上这篇vue的options用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关标签: Vue Options