Vue入门

Vue实战

Vue 引言

# 渐进式
 1.易用 html css javascript
 2.高效 开发前端页面 非常高效
 3.灵活 开发灵活 多样性
# 总结
 Vue是一个js框架
# 后端服务端开发人员
 Vue 渐进式js框架:让我们通过操作很少的DOM,甚至不需要操作页面中的任何DOM元素吗,就很容易的完成数据和视图的绑定 双向绑定架构模式 MVVM

Vue入门

# 总结
	1.vue实例(对象)中el属性: 代表Vue的作用范围 在Vue作用范围内都可以使用Vue语法
	2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据,绑定的数据可以通过{{变量名}}在VUe作用范围内取出
	3.在使用{{}}进行获取data数据时,可以在{{}}中书写表达式
	4.el属性中可以书写任意的CSS选择器,但是在开发中推荐是用id选择器

v-text 和 v-html

v-text

v-text:用来获取data中数据 将数据以文本的形式渲染到指定标签内部 类似js中innerText

# 总结
	1.{{}}(插值表达式)和v-text获取数据的区别是
		a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
        b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

v-html

v-html:用来获取data中数据 将数据中含有的html标签先解析再渲染到指定的标签内部 类似于js中的innerHTML

vue中的事件绑定(v-on)

绑定事件语法

# 总结
	1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 
	2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
	3.在vue中事件的函数统一定义在Vue实例的methods属性中
	4.在vue定义的事件中this指的就是当前的vue实例,日后可以在事件中通过this获取实例的相关数据

事件简化语法

可以通过@符号形式 简化 v-on的事件绑定

事件函数两种写法

#1
xxx: fuction() {
    this.count++;
}

#2
xxx() {
    this.count++;
}

Vue事件传递参数

1.在使用事件时,可以直接在事件调用初给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

v-show v-if v-bind

v-show

v-show:用来控制页面中某个元素是否展示 底层控制是标签display

1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

v-if

v-if:用来控制页面元素是否展示 底层控制是DOM元素 操作DOM

v-bind

v-bind:用来给标签绑定相应的属性

v-for

v-for:作用就是用来对对象进行遍历的(数组也是对象的一种)

1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

v-model 双向绑定

v-modle:作用用来绑定标签元素的值与vue实例对象中data数据保持一直,从而实现双向的数据绑定机制

# 总结
	1.使用v-model指令可以实现数据的双向绑定
	2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中的数据变化 称之为双向绑定

# MVVM架构 双向绑定机制
	Model: 数据 Vue实例中绑定数据
	VM: ViewModel 监听器
	View: 页面 页面展示的数据

Vue中的事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止时间的触发机制

常用的事件修饰符总结

1. .stop

   用来阻止事件报告

2. .prevent

   用来组织标签的默认行为

3. .capture

4. .self

   用来针对于当前标签的事件触发 只触发自己标签上的特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

5. .once

   让指定事件只触发一次

6. .passive

按键修饰符

作用:用来与键盘中案件事件绑定在一起,用来修饰特定的按键事件的修饰符

1. .enter

   用来触发回车案件之后触发的事件

2. .tab

   用来捕获到tab键执行到当前标签时才会触发

3. .delete(捕获删除和退格键)

4. …..

Axios基本使用

引言

Axios时一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面布局更新技术 Ajax

Get方式请求

POST方式请求

axios并发请求

将多个请求在同一时刻发送到后端服务接口,最后再集中处理每个请求的响应结果

Vue生命周期

生命周期钩子 => 生命周期函数

VUe中组件(Component)

组件作用

组件作用:用来减少vue实例对象中的代码量,可以根据不同业务功能可以根据不同功能将页面划分为多个 组件,然后由多个组件去完成整个页面的布局,便于日后开发时页面管理.

组件使用

组件注册

1. 全局组件

   参数1 组件名称;参数2 组件配置对象 template: 用来书写组件的html代码(在template中必须存在一个容器)

   说明:全局组注册给vue实例,日后可以在任意vue实例的范围内使用该组件

2. 局部注册

   说明:通过将组件注册给对应vue实例中一个components属性来完成组件注册,这种方式不会对vue实例造成累加

Prop使用

用来给组件传递相应静态数据或者是动态数据

# 总结
	1.使用组件时可以在组件上定义多个属性以及对应数据
	2.在组件内部可以使用props数组声明多个定义在组件上的属性名 日后可以在组件中通过{{属性名}}方式获取组件中属性值

通过在组件上声明动态数据传递给组件内部

组件中定义数据和事件使用

组件中定义自己的data数据

组件中事件的定义

# 总结
	1.组件中定义事件和直接在vue中定义事件基本一直 直接在组件内部对应的html代码加上@事件名=函数名方式即可
	2.在组件内部使用methods属性来定义对应的事件函数即可,事件函数中this 只想的是当前组件的实例

向子组件中传递事件并在子组件中调用该事件

在子组件中调用传递过来的线管事件必须使用 this.$emit(‘函数名’)

Vue中路由

路由 Router

根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

作用

又来在vue中实现组件之间的动态切换

使用路由

1. 引入路由

   

2. 创建组件对象

   

3. 定义路由对象的规则

   

4. 将路由对象注册到vue实例

   

5. 在页面中显示路由组件

   

6. 根据链接切换路由

   

router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由

好处:就是可以自动给路由路径加入# 不需要手动加入

<router-link to="/login">我要登录</router-link>

# 总结
	1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
	2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签

默认路由

作用:用来在第一次进入界面事显示一个默认的组件

路由中的参数传递

• 第一种传递方式

  1. 通过?形式拼接参数

     <router-link to="/login?id=xxxx..."></router-link>

  2. 组件中获得参数

     

• 第二种传递方式传递参数restful

  1. 使用路径方式传递参数

     

  2. 组件中获取参数\

     

嵌套路由

1. 声明最外层和内层路由
2. 创建路由对象含有嵌套路由
3. 注册路由对象
4. 测试路由