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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
javascript动画浅析
Aug 30 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python代码太长换行的实现
2019/07/05 Python
Python sorted排序方法如何实现
2020/03/31 Python
在keras中实现查看其训练loss值
2020/06/16 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
市场营销毕业生自荐信范文
2014/04/01 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
vue如何清除浏览器历史栈
2022/05/25 Vue.js