Vue的data选项使用注意

使用组件时,大多数可以传入到Vue构造器中的选项可以在Vue extend()或 Vue.component() 中注册组件时使用,但是有一个重要的前提:data必须是函数 .在 var vm = new Vue({ el:'#app', daa:{} })中的data是用来存放数据的,是一个对象 .在Vue.component({})里面或在: let profile = Vue.extend({ template:`` })里面data必须是一个函数,不能是对象 <!DOCTYPE ht…

vue单文件组件data选项的函数体获取vue实例对象

因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent:function(){ //由于a是某个插件的根对象,所以这里无法获取 vue 的实例对象 } } } }) 方法一: 参考export用法文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements…

vue组件data函数

vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props.computed等方式. data如果直接定义为对象data: {message: ''}或者data定义为函数且return同一个对象因为对象为引用类型,如果组件被多次复用,则复用组件data都指向同一个内存地址,组件间数据就会存在相互影响问题,改变其中一个,另外的也会改变. 可以借鉴js原型链.通过原型链实例化对象的概念做理解. JavaScript函数作用域使每个组件数据相互…

vue2,vue指令和选项

vue特点 mvvm框架响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集中ue Vue生态丰富且简单渐进式() Veu和Dom开发思想 Dom开发思想:当我们需要在交互事件中改变视图时,使用DOM选择器选中目标节点.再使用DOM方法直接改变视图. Vue开发思想:当我们需要在交互事件中改变视图时,先在data选项中声明一个合适的变量,再在交互事件中改变这个声明式变量即…

Unity 中关于 BuildSetting 中 “Optimize Mesh Data” 选项的“坑”

Unity 在底层默认希望为你做尽可能多的优化,降低使用门槛,比如 BuildSetting 中的 Optimize Mesh Data 选项就是一个典型的例子. 这个选项到底有什么用呢?文档描述为: Optimize Mesh Data Remove any data from meshes that is not required by the material applied to them (tangents, normals, colors, UV). 即是说:如果开启了此选项,将会在…

vue的data的数据进行指定赋值，用于筛选条件的清空，或者管理系统添加成功后给部分数据赋值为空

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

vue bug & data type bug

vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Null https://github.com/xgqfrms/vue/issues/50 shit bug OK https://github.com/vuejs/vue/issues/5163 https://stackoverflow.com/q…

[Vue]vue中各选项及钩子函数执行顺序

在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMount //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inse…

Vue 组件 data为什么是函数

在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { template: '<div>hello Vue</div>', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回!!! }, }) 你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的.这是怎么回事,为什么到…

VUE：data数据中，能被网页渲染出来的数据类型有哪些

我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型显示结果如下: 由此可以看出来 undefined/null 都渲染不出来. 最后注意一点,{{ }} 里面只能写表达式!!!…

Vue 大量data及rules的data选项结构组织

如果Vue文件需要很多的data成员及表单验证,建议使用类似结构 export default{ data(){ const model = { username: 'suzhen', password: '12345678' } const rules = { username: [ { required: true, message: 'Username is required' }, { min: 2, max: 16, message: 'Username must be between…

vue表单选项框

选项框选的内容在下面显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati…

vue重置data

Object.assign(this.$data, this.$options.data()) 解析:1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. Object.assign(target, -sources): 参数: target => 目标对象. sources => 源对象. 返回值: 目标对象. 2.this.$data 类型:Object 详细:Vue 实例观察的数据对象.Vue 实例代理了对其 data 对象…

为什么vue里面data里面的对象，无法用delete删除属性

因为vue里面的data是用get赋值的,所以无法用delete, 这时你可以用Object.defineProperty() Object.defineProperty(basic,'photo',{enumerable:false}); //将这个对象某个属性设置成不可枚举…

Vue中data返回对象和返回值的区别

速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象返回对象的时候 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">…

vue 需求 data中的数据之间的调用

我遇到过这种情况就是在我的data中会有数据调用data中的其他数据如图我的alertInfoType需要拿到screeningCondition中type的值用过vue的都知道我是不能写成alertInfoType:this.screeningCondition.type这种的原理是什么?忘记了知道了可以评论说下所以我们可以这样写在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况反正我是遇到了两次了第一次忘记怎么处理的了 ...... ove…

Vue 组件 data为什么是函数？

在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { template: '<div>OK</div>', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回 }, }) 你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的.这是怎么回事,为什么到了组件这里就不行了.…

vue的data用到this问题

问题:在vue中用vue-awesome-swiper,在data中初始化,用到swiper一个方法onTap,然后再调vue的一个函数,用到this,可是... data() { return { baseUrl:baseUrl, imgList:[], this.swiperOption={ pagination: '.swiper-pagination', direction: 'horizontal',//滑动方向:水平垂直:vertical slidesPerView: 1,//sl…

thinkphp5控制器向+vue的data里传值

传一维数组传值 $array=['id'=>40,"cat_name"=>"明星产品"]; $MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE); $this->assign([ 'MenuCats_info'=>$MenuCats_info, ]); return view('index'); html里 <!DOCTYPE html> <html> &l…

Vue中data重置问题

Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对象自身且是可枚举的属性到目标对象.该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter. 复制对象 var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy)…

vue定义data的三种方式与区别

在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2.第二种写法,函数. var app = new Vue({ el: '#yanggb', data: function() { return { yanggb: 'yanggb' } } }) 3.第三种写法,函数,是第二种写法的ES6写法. var app = new Vue({ el: '#ya…

vue-为什么子组件中的data选项必须是函数？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../vue.js"></script> </head> <body> <!-- 为什么在Vue.component({})…

Vue中data元素之间相互赋值的陷阱

今天在整理代码时,遇到这样的一个场景,下面将结合示例说明: (一)在Vue文件中定义一个const常量,如下图所示: (二)在data中有三个元素是这样赋值的,如下图所示: (三)在created()或mounted()中打印上述三个数据元素的值,如下图所示: (四)测试结果如下图所示: (五)结果分析: 1.首先说说我为啥会这样赋值,有可能给name.alian1和alian2赋值时都是同一个值,并且这串字符又是比较长的,所以我就想当然地先将这串长字符赋值给name,然后通过this.name…

vue中data为什么不写成data:{}这样而是写成data(){return {}}类型。

data:{}:这样会直接挂载在vue实例中,变成全局变量,容易造成污染,再次今日该组件页面,会保留上次的变量值,不会被初始化 data(){return {}} :return包裹后数据中变量只在当前组件中生效,每次刷新页面就相当每次都初始化…

elementUI vue table 操作选项中弹出框确定dialog

1.html <el-table-column label="操作" width="150" fixed="right" align="center"> <template scope="scope"> <el-button type="text" size="mini" @click="blockUp(scope.row)&q…

vue 初始化data中的数据

Object.assign(this.$data, this.$options.data());…

VUE2.0 饿了吗视频学习笔记(一)：VUE示例data.json

https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "seller": { "name": "粥品香坊(回龙观)", "description": "蜂鸟专送", "deliveryTime": 38, "score": 4.2, "…

Vue实例data对象里允许有哪些类型数据

做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: 'test', data () { return { string: 'I'm string', number: 1, boolean: false, array: [], object: {}, tryFun: function() { alert('just tryFun'); } } },…

[Vue]Vue实例的选项props传递数据props为驼峰式命名

在vue的中文官网有这样的说明: HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名. 如果你使用字符串模板,那么这个限制就不存在了. 1.当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式. 2.当组件中template及props等使用字符串模板,在html中改成对应的小…

[Vue] Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready. <template> <section class="c…

【Vue的data选项使用注意】的更多相关文章