简易了解Vue基本知识及入门开发相关配置

最新推荐文章于 2023-08-22 06:04:50 发布

置顶 weixin_39254069

最新推荐文章于 2023-08-22 06:04:50 发布

阅读量198

点赞数 1

分类专栏： Vue知识点文章标签： vue

本文链接：https://blog.csdn.net/weixin_39254069/article/details/103927352

版权

Vue知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标题Vue.js基础知识简介

一、Vue作者尤雨溪，是一套用于构建用户界面的渐进式框架（mvvm：数据双向绑定）。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层。(渐进式：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：S- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）。所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。)

二、学习vue.js主要学习的内容包含下面几个模块，即Vue全家桶：vue+vue-router+vue-cli+axios+vuex。下面分模块讲解这几部分知识点。

三、Vue主要知识点解读（学习网站：https://cn.vuejs.org/）：

组件
组件是以 .vue结尾的文件，文件写法是用<template></template>标签包含的其它标签的文件，且<template></template>内只能有一个<div></div>为子元素。
组件引入：

<div>
	<text-Page></text-Page>
</div>
<script>
//text.vue文件的路径
Import textPage from ‘@/components/text’
export default{
	//注册标签textPage
	components:{
		textPage
	}
}
</script>

指令

1、v-bind 绑定指令：
Class和Style的绑定
如class的绑定

<div v-bind:class="{ active: isActive }"></div>；
data(){
	return{
		isActive:true
	}
}

上面的语法表示 active 这个 class 存在与否将取决于数据属性的isActive的truthiness（真值）。
如内联样式的绑定

<div v-bind:style="{ color: ‘#ffffff’, fontSize: 12 +'px' }"></div>

上面绑定的数据其实就是jQuery定义css的一种对象的写法。
v-bind:class和v-bind:style可以缩写为 :class和 :style；

2、v-text,v-html 数据绑定：

<span>{{ msg }}</span>
<div v-text=”msg”></div>
<span v-html=”msg”></span>
data(){
	return{
		msg :”hello world”
	}
}

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

3、v-show 根据表达式之真假值，切换元素的 display CSS 属性

<div v-show=”bool”></div>
data(){
	Return{
		bool:true
	}
}

4、v-if,v-else,v-else-if 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建(区别与v-show之间的差异)，v-else前一兄弟元素必须有 v-if 或 v-else-if；v-else-if 前一兄弟元素必须有 v-if 或 v-else-if。

<div v-if=”a==1”>1</div>
<div v-else-if=”a==2”>2</div>
<div v-else=”a==3”>3</div>
data(){
	return{
		a:2
	}
}

5、v-for可对Array | Object | number | string四种类型的值遍历

<div v-for=”(item,index) in items” :key=”index”></div>
<div v-for=”(val,index) in object” :key=”index”></div>
<div v-for=”(val,key,index) in object” :key=”index”></div>
data(){
	return{
		Items:[1,2,3,4],
		objext:{
			A:{
				Id:”test1”
			},
			B:{
				Id:”test2”
			}
		}
	}
}

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略，这个默认的模式是高效的，。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

6、v-on事件绑定指令，指令缩写@+绑定的事件，如@click

<div v-on:click=”sllickFun”>click</div>
<div @click=”sllickFun”>click</div>
methods：{
	clickFun(){
	}
}

7、v-model 双向数据绑定
你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<Input v-model=”messege”></input>
<div>{{messege}}</div>
data(){
	return{
		messege:”hello world”
	}
}

以上指令是在开发项目中常用到的一些指令，还有其它一些指令大家可以参考API自行学习。

数据属性

1、data 类型：Object | Function，限制：组件的定义只接受 function
（我们项目开发是基于node环境下，所以用function类型）
data为Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

data(){
	return{
		Items:[1,2,3,4],
		objext:{
			A:{
				Id:”test1”
			},
			B:{
				Id:”test2”
			}
		}
	}
}

2、props 类型：array（string）| object
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

props:[“height”,”id”,”theme”]
Props:{
	//检测类型
	height:’Number，
	//检测类型+其它验证
	age:{
		type:Number,
		Default:0,
		validator:function(){
			return value>=0
		}
	}
}

3、computed 类型{[key:string]:function | {get:function,set:function}}
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id=”test”>{{message.split(“ ”).reverse().join(“ ”)}}</div>
data(){
	return{
		message:”hello”
	}
}

所以，对于任何复杂逻辑，你都应当使用计算属性

<div>{{reverseMessage}}</div>
data(){
	return{
		message:”hello”
	}
}
computed:{
	//计算属性的getter
	reverseMessage(){
		return  this.message.split(“ ”).reverse().join(“ ”)
	}
}

输出的结果是：olleh

4、methods类型:{[key:string]:function}
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

<div @click=”clickevent”>{{reverseMessage}}</div>
data(){
	return{
		message:”hello”
	}
}
methods:{
	reverseMessage(){
		return  this.message.split(“ ”).reverse().join(“ ”)
	},
	clickevent(){
		Console.log(“这是一个点击事件”)
	}
}

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果。

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

5、watch类型:{[key:string]:string | Function | Object | Array}
watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

data(){
	return{
		a:1,
		b:2,
		c:3,
		d:4,
		e:{
			f:{
				g:5
			}
		}
	}
}
watch:{
	a:function(val.oldval){
		Console.log(‘new:%s,old:%s’,val,oldval)
	},
	//方法名
	b:”someMethod”,
	//深度watch
	c:{
		handler:function(val.oldval){},
		deep:true
	},
	//该回调将会在监听开始之后立即调用
	d:{
		handler:function(val.oldval){},
		Immediate:true
	},
	e:[
		Function handler1(){},
		function handler2(){}
	],
}

当a的值变成2时，输出：new:2,old:1
在vue中计算属性computed和监听属性watch都是用来来监听某个属性的变化，两者之间的差异如下：

a、计算属性适用的情形
一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，如：当firstName或者lastName变化时，我们要获取fullName这个值

<div>{{fullName}}</div>
data(){
	return{
		firstName:”small”,
		lastName:”song”
	}
}
computed:{
	//计算属性的getter
	fullName(){
		return  this.firstName+’ ’+this.lastName;
	}
}

如果用监听属性：

<div>{{fullName}}</div>
data(){
	return{
		firstName:”small”,
		lastName:”song”,
		fullName:”small song”
	}
}
watch:{
	firstName:function(val){
		this.fullName =  this.firstName+’ ’+this.lastName;
	},
	lastName:function(val){
		this.fullName =  this.firstName+’ ’+this.lastName;
	}
}

fullName属性依赖于firstName和lastName，这里有个缺点就是，无论firstName或lastName其中的任何一个发生改变时，都要调用不同的监听函数来更新fullName属性。如果用监听属性代码就会变得有点冗余，但是当我们使用计算属性时，代码就会变得更加简洁。

b、监听属性适用的情形
watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况，如

<div>{{data1}}</div>
<input v-model=”seachData”></input>
data(){
	return{
		seachData:”百度”,
		data1:””
	}
}
method:{
	getData1(){							
		axios.post(“url”,{“name”:this.seachData}).then(res => {
			this.data1 = res.data;		
		})
	}
}
watch:{
	seachData:function(val){
		this.getData1();
	}
}

生命周期钩子

mounted 类型：function
就如jQuery的￥$(function(){})，页面初始化完后加载的方法

data(){
	return{
		seachData:”百度”,
		data1:””
	}
}
mounted(){
	this..getData1();
},
method:{
	getData1(){							
		axios.post(“url”,{“name”:this.seachData}).then(res => {
			this.data1 = res.data;		
		})
	}
}

四、Vue-router主要知识点解读，网站https://router.vuejs.org/zh/

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
1、嵌套的路由/视图表
2、模块化的、基于组件的路由配置
3、路由参数、查询、通配符
4、基于 Vue.js 过渡系统的视图过渡效果
5、细粒度的导航控制
6、带有自动激活的 CSS class 的链接
7、HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8、自定义的滚动条行为

下载：
在这里插入图片描述
配置：

动态路由匹配

五、vue-cli(vue的脚手架)主要知识点解读，网站https://cli.vuejs.org

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

1、通过 @vue/cli 搭建交互式的项目脚手架。
2、通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
3、一个运行时依赖 (@vue/cli-service)，该依赖：
a、可升级；
b、基于 webpack 构建，并带有合理的默认配置；
c、可以通过项目内的配置文件进行配置；
d、可以通过插件进行扩展。
4、一个丰富的官方插件集合，集成了前端生态中最好的工具。
5、一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

安装：
在这里插入图片描述

六、AXIOS主要知识解读，网站：https://www.jianshu.com

Axios基于promise（ES6里面的一个构造函数）用于浏览器和node.js的http客户端
特点：

1、支持浏览器和node.js
2、支持promise
3、能拦截请求和响应
4、能转换请求和响应数据
5、能取消请求
6、自动转换JSON数据
7、浏览器端支持防止CSRF(跨站请求伪造)

安装：
在这里插入图片描述
get请求

Post请求

请求方法别名

为了方便我们为所有支持的请求方法均提供了别名，如下：
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注释
当使用以上别名方法时，url，method和data等属性不用在config重复声明。
详细的使用方法请参考学习网站。

七、VUEX 主要知识解读网站：https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（简单的理解就是统一管理和维护各个vue组件的可变化状态）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vue是单向数据流的，那么它的状态管理一般包含如下几部分：

state; 驱动应用的数据(一般指data中返回的数据)。
view；一般指模板，以声明的方式将state的数据映射到视图。
actions: 响应在view上的用户输入导致的状态变化。
但是当我们的应用遇到多个组件共享状态时候，那么单向数据流可能不太满足我们的需求：
比如如下几个方面：
多个视图依赖于同一状态。
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此我们可以把组件的共享状态提取出来，作为全局来管理，因此vuex产生了。
vuex的优点：
最主要解决了组件之间共享同一状态的问题。可以把组件的共享状态提取出来，作为全局来管理。
安装：

什么情况下我应该使用 Vuex？

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建是一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
一个简单是store实例：

我们项目运用中一般是通过computed的计算属性直接赋值，如：

data(){
	return{
		
	}
}
computed:{
	//获取store值
	count(){
		return  this.$store.state.count;
	}
},
Method:{
	//设置store的值
	setCount(){
		this.$store.commit(‘increment’,1);
	}
}

以上的Vue相关知识点只是个人对vue使用过程总的大致总结，详细学习请查询官方网站API。谢谢！

weixin_39254069

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易了解Vue基本知识及入门开发相关配置

标题Vue.js基础知识简介一、Vue作者尤雨溪，是一套用于构建用户界面的渐进式框架（mvvm：数据双向绑定）。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层。(渐进式：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两个版本都...
复制链接

扫一扫