首页 > 其他分享 >Vue 常用

Vue 常用

时间：2023-02-09 12:06:14浏览次数：37  
标签：常用 Vue obj name 对象 age var console


阅读目录

  • ​​Vue3中八个生命周期函数​​
  • ​​js动态添加对象属性​​
  • ​​js 遍历对象​​
  • ​​第一种： for......in​​
  • ​​第二种​​
  • ​​第三种：使用Object.getOwnPropertyNames(obj)​​
  • ​​js 数组、对象转json 以及json转 数组、对象​​
  • ​​js创建对象的方式​​
  • ​​一、通过”字面量“方式创建​​
  • ​​二、使用工厂模式创建对象​​
  • ​​三、通过”构造函数“方式创建​​
  • ​​四、通过object方式创建​​
  • ​​五、原型创建对象模式​​
  • ​​六、组合使用构造函数模式和原型模式​​
  • ​​js:数组，对象的拼接方法​​

Vue3中八个生命周期函数

beforeCreate() ：在实例生成之前会自动执行的函数

created() : 在实例生成之后会自动执行的函数

beforeMount() ：在模板渲染完成之前执行的函数

mounted() ：在模板渲染完成之后执行的函数

beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数

updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数

beforeUnmount()：当Vue应用失效时，会自动执行的函数

unmounted()：当Vue应用失效时，且DOM完全销毁之后，会自动执行

js动态添加对象属性

// 第一种方法
var obj = { "name": "张三", "age": 18 }
var key = "height";
var value = 175;
obj[key] = value;
console.log(obj); // {name: "张三", age: 18, height: 175}

// 第二种方法
var obj1 = { "name": "张三", "age": 18 }
var value = 175;
obj1.height = value;
console.log(obj1); // {name: "张三", age: 18, height: 175}

// 第三种方法，扩展运算符
var obj1 = { "apple": 100, "pear": 200 };
var obj2 = { "cherry": 300 };
var obj3 = { ...obj1, ...obj2 };
console.log(obj3); // {apple: 100, pear: 200, cherry: 300}

// 第四种办法,合并多个对象 Object.assign
var obj1 = { a: "1" };
var obj2 = { b: "2" };
var obj3 = { c: "3" };
var obj = Object.assign(obj1, obj2, obj3);
console.log(obj); // {a: "1", b: "2", c: "3"}
console.log(obj1); // {a: "1", b: "2", c: "3"}  //注意目标对象自身也会改变
console.log(obj2); //{b: "2"}
console.log(obj3); //{c: "3"}

js 遍历对象

第一种： for…in

const obj = {
            id:1,
            name:'zhangsan',
            age:18}

for(let key  in obj){
    console.log(key + '---' + obj[key])
}

Vue 常用_开发语言

第二种

1）、Object.keys（obj）

2）、Object.values（obj）

参数：
obj：要返回其枚举自身属性的对象

返回值：
一个表示给定对象的所有可枚举属性的字符串数组。

const obj = {　　　　
  id:1,　　　　
  name:'zhangsan',　　　　
  age:18}

console.log(Object.keys(obj))
console.log(Object.values(obj))

输出结果： obj对象的key组成的数组
​​​['id','name','age']​​

输出结果：obj对象的value组成的数组
​​​['1','zhangsan','18']​​

第三种：使用Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性（包含不可枚举属性）
遍历可以获取​​​key​​​和​​value​​

const obj = {
         id:1,
         name:'zhangsan',
         age:18
      }
    
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key+ '---'+obj[key])
})

Vue 常用_开发语言_02

js 数组、对象转json 以及json转 数组、对象

1、JS对象，转JSON

var json = {"name":"iphone","price":666}; //创建对象；
var jsonStr = JSON.stringify(json);       //转为JSON字符串
console.log(jsonStr); // {"name":"iphone","price":666}

2、JS数组，转JSON

var arr = [1,2,3, { a : 1 } ];
console.log(JSON.stringify(arr)); // [1,2,3,{"a":1}]

3、JSON转，JS数组

var jsonStr = '[1,2,3,{"a":1}]';
var jsarr=JSON.parse( jsonStr );
console.log(jsarr);

Vue 常用_开发语言_03


4、JSON转JS对象

var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString);    //转换为json对象
console.log(jsObject); // {bar: 'property', baz: 3}

js创建对象的方式

javascript是一种“基于prototype的面向对象语言“，与java有非常大的区别，无法通过类来创建对象。

那么，既然是面象对象的，如何来创建对象呢？

一、通过”字面量“方式创建

方法：将成员信息写到 ​​{}​​ 中，并赋值给一个变量，此时这个变量就是一个对象。

如果 ​​{}​​ 中为空，则将创建一个空对象：

var person = {} //创建空对象

演示代码：

<script type="text/javascript">
var person = {
    name: "dongjc",
    age: 32,
    Introduce: function () { 
        alert("My name is " + this.name + ".I'm " + this.age); 
    }
};
person.Introduce(); 
</script>

Vue 常用_laravel_04

我们还可以给对象丰富成员信息。
​​​对象.成员名称 = 值;​​​​对象[成员名称] = 值;​​

也可以获取对象的成员信息。
​​​对象.成员名称;​​​​对象[成员名称];​​

<script type="text/javascript">
    var person = {
    name: "dongjc",
    age: 32,
    Introduce: function () {
        alert("My name is " + this.name + ".I'm " + this.age);
    }
};
person.worker = 'coding'; //丰富成员信息
console.log(person); // {name: 'dongjc', age: 32, worker: 'coding', Introduce: ƒ}
</script>

二、使用工厂模式创建对象

<script type="text/javascript">
function createPerson(name,age,job){
    var o = new Object();

        o.name = name;
        o.age = age;
        o.job = job;

        o.sayName = function(){
            alert(this.name);
        };

    return o;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

console.log(person2);
person2.sayName(); 

</script>

Vue 常用_json_05


在使用工厂模式创建对象的时候，我们都可以注意到，在​​createPerson​​函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第三种创建对象的模式。

三、通过”构造函数“方式创建

var obj = new 函数名();

这与通过类创建对象有本质的区别。

通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象。

<script type="text/javascript">
function Person() {
    this.name = "dongjc";    //通过this关键字设置默认成员
    var worker = 'coding';    //没有this关键字，对象创建后，该变量为非成员
    this.age = 32;

    this.Introduce = function () {
        alert("Introduce My name is " + this.name + ".I'm " + this.age);
    };
    alert("My name is " + this.name + ".I'm " + this.age);
};
var person = new Person();
person.Introduce();
</script>

Vue 常用_php_06


Vue 常用_json_07


此代码一共会两次跳出对话框，原因在于创建对象是自动执行了该函数。

注意：
this关键字的使用。
这里的this与php中话法意思类似，指调用该函数的对象，这里指的是person。

对比工厂模式，我们可以发现以下区别：

1.没有显示地创建对象
2.直接将属性和方法赋给了this对象
3.没有return语句
4.终于可以识别的对象的类型。对于检测对象类型，我们应该使用instanceof操作符，我们来进行自主检测：

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的，但是它也有它的缺点：

就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。

四、通过object方式创建

方法：先通过object构造器new一个对象，再往里丰富成员信息。

var obj = new Object();

实例代码：

<script type="text/javascript">
var person = new Object();

person.name = "dongjc";
person.age = 32;
person.Introduce = function () {
    alert("My name is " + this.name + ".I'm " + this.age);
};

person.Introduce();
</script>

Vue 常用_创建对象_08

五、原型创建对象模式

<script type="text/javascript">
function Person(){}

Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';

Person.prototype.sayName = function(){
 alert(this.name);
};

var person1 = new Person();
person1.sayName();
</script>

Vue 常用_json_09


使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式，请看下面代码：

<script type="text/javascript">

function Person(){}

Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';

Person.prototype.sayName = function(){
 alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

person1.name ='Greg';

alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型

</script>

Vue 常用_php_10


Vue 常用_开发语言_11


当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。

六、组合使用构造函数模式和原型模式

<script type="text/javascript">

function Person(name,age,job){
    this.name =name;
    this.age = age;
    this.job = job;
}

Person.prototype = {
    constructor:Person,
    sayName: function(){
        alert(this.name);
    }
}
var person1 = new Person('Nike',20,'teacher');

console.log(person1);

</script>

Vue 常用_json_12

js:数组，对象的拼接方法

说明：把两个对象的数据放在一个对象里面

方法1

<script type="text/javascript">
    var tmpa  = {
        q : 'qq',
        w : 'ww'
      }
    var tmpb = {
        e : 'ee',
        r : 'rr'
      }
    var tmp = Object.assign(tmpa , tmpb)
    console.log("tmp",tmp)
</script>

​​tmp {q: 'qq', w: 'ww', e: 'ee', r: 'rr'}​​

方法2

<script type="text/javascript">
var tmpa  = {
                q : 'qq',
                w : 'ww'
            }

var tmpb = {
    ...tmpa,
    e : 'ee',
    r : 'rr'
}

console.log("tmp",tmpb) // tmp {q: 'qq', w: 'ww', e: 'ee', r: 'rr'}
</script>


标签：常用,Vue,obj,name,对象,age,var,console
From： https://blog.51cto.com/u_13571520/6046599

相关文章

  • swoole 常用
    阅读目录​​常用命令​​常用命令bash~$php-m|grepswooleswoolebash~$php--riswoole|grepVersionVersion=>4.5.11swoole安装信息查看php--riswoole......
  • Vue 的优化技巧
    演示代码使用Vue3+ts+Vite编写，但是也会列出适用于Vue2的优化技巧，如果某个优化只适用于Vue3或者Vue2，我会在标题中标出来。代码优化v-for中使用key使用v......
  • 运维常用技巧！！！！！！！！！
    运维必备的17个技巧网络工程师笔记 运维网工 2023-02-0909:00 发表于重庆收录于合集#网络运维10个#运维管理13个#运维工程师44个#网络工程师7个1、查找当......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件：E:\node\vue296\src\router\index.js入口：E:\node\vue296\src\main.js组件：E:\node\vue296\src\components\Count.vue......
  • Vue 中遇到的错误
    阅读目录解决VUE启动问题（Youmayusespecialcommentstodisablesomewarnings）两种方法解决方法一方法二安装vuex启动报错“export‘watch‘wasn......
  • [email protected]选项卡
    阅读目录<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>body{font-family:"Micr......
  • JavaScript 常用技巧
    阅读目录对象属性操作对象通过动态属性名称取值根据条件向对象添加属性检查属性是否存在对象中使用动态键进行对象解构扁平化数组值操作空值合并`??`操......
  • Vue 命令行工具 Vue-CLI 详解
    阅读目录阐述vue全家桶vue-cliVueCLI的安装①默认安装vue/cli脚手架3②默认安装失败，解决mode版本问题③nvm下载太慢问题解决④安装Node^12.0.0......
  • Linux基础课：第七章笔记--管道，环境变量与常用变量
    开始第七章的学习。技术都是手段，目标是最短的时间内，将学到的知识转化成想要的东西。y总金句：如果想在35岁之前出人头地，能正常工作的不过十来年，那么现在就应该好好学习，工作......
  • VS常用快捷键
    Ctrl+j=>列出所有成员Ctrl+Shift+空格键=>列出所有重载（也适用于JS）Ctrl+Alt+p=>附加到w3wp进程调试F12=>转到定义Ctrl+F12=>转到实现Shift+F1......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99