文章目录
Vue简介
Vue基础
代码编写步骤
- 定义html,引入vue.js
- 定义app div,此区域作为vue的接管区域
- 定义Vue实例,接管app区域
- 定义model(数据对象)
- 在app中展示数据
Vue常用指令
指令是指带有 v-
前缀的特殊属性,以此来操作DOM元素。
指令 | 作用 |
---|---|
v-text | 获取data 数据,设置标签的内容注意事项:默认写法会替换全部内容,使用插值表达式 {{}} 可以替换指定内容 |
v-html | 设置元素的 innerHTML (可以向元素中写入新的标签) |
v-on | 为元素绑定事件,比如:v-on:click ,可以简写为@click="methodName" 绑定的方法定义在VUE实例的 method 属性中 |
v-show | 根据表达式的真假,切换元素的显示和隐藏(原理:修改元素的display )建议:频繁切换,使用 v-show ,反之使用 v-if |
v-if | 根据表达式的真假,切换元素的显示和隐藏(原理:直接操纵dom元素) 建议:频繁切换,使用 v-show ,反之使用 v-if |
v-bind | 为元素绑定属性(v-bind 可以省略,简写为冒号,例如:<img :src="imgSrc"> ) |
v-for | 根据数据生成列表结构,通常与数组搭配使用 |
v-model | 获取和设置表单元素的值(实现双向数据绑定) |
v-cloak | 解决插值表达式闪烁问题 (网络较慢时,网页还在加载 Vue.js 而导致 Vue 来不及渲染,此时页面就会显示出 Vue 源代码) |
axios
get请求方式
axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});
// function(response){} 请求响应完成后触发
// function(error){} 请求失败时触发
post请求方式
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})
注意事项
- 通过回调函数的形参可以获取响应的内容或错误信息。
- 回调函数中的
this
指向已经改变,无法访问data
中的数据- 解决方案一:在axios代码之前使用一个变量将
this
保存起来,回调函数中直接使用保存this
的变量即可 - 解决方案二(推荐使用,但ES6以上才支持):使用箭头函数
(response) => {}
替换function(response){}
- 解决方案一:在axios代码之前使用一个变量将
- 服务器返回的数据较复杂时,获取数据要注意层级结构
Component组件
参考网址:https://www.runoob.com/vue2/vue-component.html
全局组件
- 语法格式:
Vue.component("组件名", {
// 组件的HTML结构代码
template: "html代码",
// 组件数据
data(){
return {}
},
// 组件相关的js方法
methods: {
方法名(){
// 逻辑代码
}
}
})
- 注意事项:
- 组件名以小写开头,采用短横线分割命名: 例如
hello-World
- 组件中的
data
必须是一个函数,注意与Vue实例中的data
区分 - 在
template
模板中, 只能存在一个根元素
- 组件名以小写开头,采用短横线分割命名: 例如
局部组件
- 语法格式:
new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() {
return { msg: "xxxx" };
},
},
},
});
- 注意事项:
- 相对于全局组件,局部组件只能在同一个实例内才能被调用
- 局部组件需要写在Vue实例内
- 创建局部组件时,注意
components
,末尾有s
,而全局组件则没有,这意味着components
内可以创建多个组件
Vue生命周期
钩子函数
- 参考链接:https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
- 简单理解:在一个事件触发时,做一些操作(避免误人子弟,建议直接查看官方文档)
钩子函数 | 说明(触发时机) |
---|---|
beforeCreate() | 创建Vue实例之前,例如:加载动画操作 |
created() | 实例创建完成,属性已绑定,但DOM还没有生成 |
beforeMount() | 模板已经在内存中编辑完成,尚未被渲染到页面中 |
mounted() | 内存中的模板已经渲染到页面,用户已经可以看见内容 |
beforeUpdate() | 数据更新的前一刻,组件在发生更新之前调用 |
updated() | 内存中的数据已更新,并且页面已经被渲染 |
beforeDestroy() | 实例销毁之前 |
destroyed() | 实例销毁之后 |
Vue Router 路由
路由的概念
在Web开发中,路由是指根据URL分配到对应的处理程序。路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图单页面web应用(single page web application,SPA)
SPA的概念
单页面Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用不存在页面跳转,它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为 body
内某些元素的替换和更新,举个栗子:
整个body
的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上,页面只是随着用户操作,实现了局部内容的更新,依然还是在 index.html
页面中。
- 单页面应用的优势:
- 用户操作体验更佳,用户不用刷新页面,整个交互过程都是通过Ajax来操作。
- 适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染。
路由相关的概念
- router:Vue.js 官方的路由管理器。它与 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌,router 就相当于一个管理者,它来管理路由。
- route:router相当于路由器,route就相当于一条路由。例如:Home按钮 => home内容,这是一条route,news按钮 => news内容, 这是另一条路由。
- routes:一组路由,把上面的每一条路由组合起来,形成一个数组。例如:[{home按钮 => home内容},{about按钮 => about内容}]
- router-link:router-link是一个组件,对a标签的一个封装。该组件用于设置一个导航链接,切换不同 HTML内容。to 属性为目标地址, 即显示的内容。
- router-view 组件:路由导航到指定组件后,进行渲染显示页面。
路由的使用
- 使用步骤:
- 定义路由所需的组件
- 定义路由:每个路由都由两部分组成
path
(路径) 和component
(组件) - 创建router路由器实例,管理路由
- 创建Vue实例,注入路由对象,使用
$mount()
指定挂载点
- 注意事项:Vue 的
$mount()
为手动挂载,在项目中可用于延时挂载(例如在挂载前进行一些其他操作、判断等),之后要手动挂载上。在new Vue
时,el
和$mount()
并没有本质上的不同。