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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
vue实现选中效果
Oct 07 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python实现Windows电脑定时关机
2018/06/20 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Django values()和value_list()的使用
2020/03/31 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
天网面试题
2013/04/07 面试题
linux面试题参考答案(8)
2016/04/19 面试题
团支书竞选演讲稿
2014/04/28 职场文书
党员争先创优承诺书
2015/01/20 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
MySQL的存储过程和相关函数
2022/04/26 MySQL