Vue随笔

Vue简介

• 菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html
• 官方网站：https://cn.vuejs.org/v2/guide/

Vue基础

代码编写步骤

1. 定义html，引入vue.js
2. 定义app div，此区域作为vue的接管区域
3. 定义Vue实例，接管app区域
4. 定义model（数据对象）
5. 在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

• 参考网址：https://www.runoob.com/vue2/vuejs-ajax-axios.html

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){}
• 服务器返回的数据较复杂时，获取数据要注意层级结构

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 组件：路由导航到指定组件后，进行渲染显示页面。

路由的使用

• 使用步骤：
  1. 定义路由所需的组件
  2. 定义路由：每个路由都由两部分组成 path (路径) 和 component (组件)
  3. 创建router路由器实例，管理路由
  4. 创建Vue实例，注入路由对象，使用$mount()指定挂载点
• 注意事项：Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载前进行一些其他操作、判断等），之后要手动挂载上。在new Vue时，el和$mount()并没有本质上的不同。