Vue的Options用法说明


Posted in Javascript onAugust 14, 2020

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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
js数组的基本使用总结
Jan 18 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 #Javascript
vue 扩展现有组件的操作
Aug 14 #Javascript
如何HttpServletRequest文件对象并储存
Aug 14 #Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 #Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 #Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 #Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
关于vue.js组件数据流的问题
2017/07/26 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
9种方法优化jQuery代码详解
2020/02/04 jQuery
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中super()函数简介及用法分享
2016/07/11 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
查摆问题对照检查材料
2014/08/28 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
事业单位岗位说明书
2015/10/08 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android