初识Vue2

最新推荐文章于 2024-11-18 20:18:04 发布

猿究院+

最新推荐文章于 2024-11-18 20:18:04 发布

阅读量342

点赞数 3

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_73638669/article/details/140934434

版权

什么是Vue?

Vue.js（通常简称为Vue) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

Vue周边库

vue-cli：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

引入外部js文件中变量的方式：

js文件中：
写法一：分别暴露

export let uname="张三";
export let age=18;

写法二：统一暴露

let uanme ="张三";
let age=10;
function fun(){
 console.log("js模块化")
}
export {uanme,age,fun}

写法三：默认暴露

export default{
	uanme:"张三",
	age:17,
	obj:{
    	oName:"132456"
	}
}

html页面中如何使用：
导入模块

import * as m1 from "./moduleTest.js"

分别暴露和统一暴露的使用方式

console.log(m1.uname);
m1.fun;

默认暴露的使用方式

console.log(m1.default.uname);
console.log(m1.default.age);
console.log(m1.default.obj);
console.log(m1.default.obj.oName);

解构赋值

数组的解构赋值

let arr=["铁甲小宝","塞罗埃特曼","米奇妙妙屋","神兵小将"];
let [tie,sia,mi,miqi]=arr;
console.log(tie);
console.log(sia);
console.log(mi);
console.log(miqi);

简单对象的解构赋值

let obj={
    uname:"铁甲小宝",
    age:10
}
let {uname,age}=obj;
console.log(uname);
console.log(age);

复杂对象的解构赋值

// 写法一
// let {uname,age,arr}=obj;
// console.log(uname);
// console.log(age);
// let [a,b,c]=arr;
// console.log(a);
// console.log(b);
// console.log(c);

// 写法二
let {uname,age,arr:[a,b,c]}=obj;
console.log(uname);
console.log(age);
console.log(a);
console.log(b);
console.log(c);

…rest参数与…扩展运算符

…rest参数:不确定参数数量时使用(rest参数只能放在最后)

//情况一
function fun(...num) {
    console.log(...num);
}
fun(1, 2, 3, "adadaddad");
//情况二
function fun(a, b, ...num) {
    console.log(a, b, ...num);
}
fun(1, 2);

…扩展运算符：

// 展开数据
// let arr1 =[1,2,3,4];
// let arr2 =[4,5,6,7];
// console.log(arr1,...arr2);

// 展开对象
// 展开对象时，如果对象中的属性名一样，后面的属性会覆盖前面的属性
let obj1 = {
    uname1: "姓名A",
    age1: 18
}
let obj2 = {
    uname2: "姓名B",
    age2: 18
}
let obj3 = {
    uname3: "姓名C",
    age3: 18
}
let obj={...obj1,...obj2,...obj3}
console.log(obj)

实例化Vue对象的方式

在Vue.js中，属性的使用方式有两种主要的形式，它们之间有一些关键的区别，特别是在组件和实例的上下文中。

第一种形式：对象字面量

let vm = new Vue({  
 el:"#app",//绑定视图
data: { // 数据模型  
    str: "Vue中的数据"  
}  
});

这种形式直接通过对象字面量定义了Vue实例的响应式数据。这种方式适用于Vue的根实例或者当你不需要通过函数来返回数据时。在这种形式下，data是一个普通的JavaScript对象，它的所有属性都将是响应式的。

第二种形式：函数返回对象

let vm = new Vue({  
data() {  
    return {  
        arr: ["Java", "Mysql", "SpringBoot"],  
        obj: {  
            uname: "张三",  
            phone: "123456789"  
        }  
    }  
}  
});
 // 绑定视图
vm.$mount("#app");

在这种形式中，data是一个函数，这个函数返回一个对象。这种方式主要用于Vue组件中，但也可以用于Vue实例（尽管在根实例中不常见）。使用函数的好处是，每次组件被创建时，都会调用这个函数来返回新的数据对象，从而确保每个组件实例都能维护一份被返回对象的独立拷贝。这对于避免组件间的数据污染非常重要。

指令式语法

v-text指令：展示纯文本，相当于innerText

<div v-text="str"></div>

v-html指令：展示文本及样式，相当于innerHTML

<div v-html="str"></div>

v-bind指令:单向绑定数据(动态绑定数据)

<a v-bind:href="aLink">点我跳转</a>
<!-- 简写 : -->
<img :src="path" style="width: 200px;">
<hr>
<!-- 动态绑定样式  -->
<div :class="{bg:bol}">{{str}}</div>

v-for指令:循环遍历

<h2>循环遍历数字</h2>
<div v-for="item in num">{{item}}</div>
<h2>循环遍历字符串</h2>
<div v-for="(item,index) in str">{{item}}--{{index}}</div>
<h2>循环遍历数组</h2>
<div v-for="(item,index) in arr">{{index}}--{{item}}</div>
<h2>循环遍历对象</h2>
<!-- <div v-for="item in obj">ffitem}}</div>-->
<div v-for="(item,key) in obj">{{item}}--{{key}}</div>

v-if和v-for的优先级：
v-for的优先级更高；v-if和v-for在同时使用时，需要将v-if放在父元素上使用