Vue2-黑马

Posted 2023-04-12 dengfengling999

目录：

（1）axios-响应格式

（2）axios-拦截器

（3）vue2-条件渲染

（4）vue2-列表渲染

---

（1）axios-响应格式

下面看axios的返回响应对象的内部组成

后端跨域的配置：可以在启动类这里做全局的配置

 

 

 

data部分： 

 

 响应头：响应体的格式是json格式，status：是响应的状态码

 status的状态码还有：

访问不存在的资源：返回404

 

 

前端可以捕获下异常： 

 

 请求方式错误：

 

 

 （2）axios-拦截器

 比如说我们要做一个JWT的认证方式，每次请求，都要在请求头里加tocken的信息，如果每次请求，把tocken令牌写在请求方法里面，代码有很多重复的方法，我们可以用拦截器做 代码就可以简化了，在拦截器的第一个函数config加一个tocken，

 

请求拦截器： 

 

 

可以看到请求头里面加了Authorization： 

 

 响应拦截器：

前面的请求出现异常，使我们自己加的try  catch，我们使用拦截器，不用自己加了，实现响应异常的统一处理

 

 

 

 

前面我们自己创建了axios和拦截器，这些代码具有通用性，我们可以单独的抽到js文件里面，创建myaxios.js

 

 

 

 

 然后子在组件里引入就可以使用啦

 

 

 

请求头里带了Authorization： 

 

 （3）vue2-条件渲染

 

 style里面加scope后样式的影响范围变小只会影响当前组件

 

 

 

 

 

（4）vue2-列表渲染

 v-if：条件判断

v-for：循环

在使用v-for的时候，必须加一个特殊的：key 这个属性必须加vue内部会用到，：key做了数据绑定更能跟起到标识的做绑定

v-if和v-for必须分别使用在多个标签上，不能一下子用到一个标签上

 

 

 能不能做到一个效果不点按钮，希望页面一加载的时候就调用方法进行页面展示：

需要给option加一个属性mounted函数，这个函数会在mounted会在组件架加载完成之后执行

mounted：组件加载完毕之后执行的函数

 

 

VUE入门指令学习--＞黑马程序员

框架和库的区别：

1. 框架：一套解决方案，堆项目的侵入大，更换框架则项目要重构。如：Node 中express

2. 库(插件)：提供某个功能，项目中可随意切换。 如：从Jq切换到Zepto

打包工具 Webpack, Gulp

发展历程：

Js ->JQ(解决兼容)->模板引擎(解决字符串拼接)->vue/react(减少DOM操作)

框架优点:

• 不再操作dom

• 提高渲染效率

• 双向数据绑定

MVVM: model, view, VM, ViewModel

使用步骤：

1. Js导入vue框架

2. 上图，app标签就是view层。script代码时VM层，其中的data是model层。

指令：

**{{ }}：**插值表达式

<P v-cloak>{{ msg }}</P>
<h2 v-text="msg"></h2>

v-cloak： 能够解决插值表达式{{}}闪烁问题(display增加none属性)

v-text: 默认没有闪烁问题。但是它将完全覆盖元素内容。

**v-html： **输出html格式，会覆盖内容。

**v-bind： **用于绑定属性的指令，还可以加表达式。简写形式：。

v-on: 用于绑定事件，mouseover、click等。简写形式@

<input type="button" value="点击" v-on:click="show">

方法的定义也可以简写：

    var vm = new Vue({

     el:'#app',

      data:{

        msg:'啤酒饮料矿泉水，瓜子花生八宝粥。'

     },

     methods:{

       run(){

         console.log(this.msg)

        }

      }

    })

方法里必须用this.来调用msg，substring截取字符串

定时器 ： setInterval(function()=>{},400)

符号=>解决this指向问题

事件修饰符@click.prevent.once

• Stop：阻止冒泡(点击按钮不会同时触发外层的事件)

• Prevent：阻止默认事件(比如点击链接阻止跳转)

• Capture：添加事件侦听器时使用时间捕获模式(从外到里触发事件)

• Self：只当事件在该元素本身(比如不是子元素)触发时触发回调

• Once：事件只触发一次

v-model和双向数据绑定:

浏览器控制台查看VM对象：window.vm

v-bind只能实现数据的单向绑定，M到V.

**v-model：**可以实现表单元素和Model中数据的双向数据绑定，只能运用在表单元素中

使用样式：

1. 使用数组。如

   <h1 :class="['thin','red']">
   

2. 数组使用三元表达式

   <h1 :class="['thin','red',flag?'active':'']">
   

3. 对象的形式

   <h1 :class="['thin','red',{'active':flag}]">
   

4. 直接使用

   <h1 :class="[thin: true,red:false]">
   

使用内联样式：

1. 直接在元素上使用

2. 将样式对象定义到data，直接引用style

3. 通过数组引用data上的样式对象

V-for和key：

v-for数组

普通数组（直接打印）

<p v-for="item in list">{{item}}</p>
<p v-for="(item,i) in list">索引值{{i}}---{{item}}</p>

全数组(data中用[ ]保存)

 <p v-for="(user,i) in list">ID:{{user.id}}---{{user.name}}--- 索引{{i}}</p>

对象(data中用{ } 保存)

<p v-for="(val,key,index) in user"> {{index}}---{{val}}---{{value}}</p>

v-for迭代

从1开始

<p v-for="count in 10">这是第{{count}}次循环</p>

注意事项:

v-for的key属性只能使用number获取string

使用key的时候,必须使用v-bind属性绑定的形式,指定key的值

在组件中,或一些特殊情况,v-for如果有问题,必须指定唯一的字符串/数字 类型:key 值-

v-if / v-show

 <input type="button" value="rto" @click="flag=!flag">

​    <h3 v-if="flag">v-if</h3>

​    <h3 v-show="flag">v-show</h3>

v-if的特点是,每次都会删除或创建元素.有较高的切换性能消耗

v-show只是切换元素的display:none样式,不删除创建.有较高的初始渲染消耗

如果涉及频繁的切换,推荐使用v-show,如果元素可能永远也不会被显示出来给用户看到,则推荐使用v-if.

**不需要使用Jquery,在VUE中不推荐使用

**

品牌案例:

通过索引, 使用Some, findIndex完成删除操作

Vue-devtools的两种安装方式:

**注意：**forEach some filter findIndex 这些都属于数组的新方法，都会对数组每一项进行遍历。 forEach不能终止，filter过滤，findIndex找索引。

ES6为字符串提供了一个新方法，叫做String.prototype.includes(‘要包含的字符串’)，包含返回true，否则返回false

过滤器 {{ name | 过滤器名称 }}，管道符 |

  <div id="app">
        <p> {{ msg | msgFormat}}</p>
  </div>
   

 <script>
    //定义一个Vue全局过滤器

​    Vue.filter('msgFormat',function(msg){

​      // return msg.replace('芜湖','哈哈')

​      //这个只能换第一个，

​      return msg.replace(/芜湖/g,'哈哈')

​    })

​    var vm = new Vue({

​      el: '#app',

​      data: {

​        msg: '芜湖，曾经，我芜湖芜湖起飞'

​      },

​      methods: {}

​    });

可以多次调用：

   <div id="app">

       <p> {{ msg | msgFormat('疯狂','123') | test }}</p>

 </div>
   <script>

//定义一个Vue全局过滤器

​    Vue.filter('msgFormat',function(msg,arg,arg2){

​      // return msg.replace('芜湖','哈哈')

​      //这个只能换第一个，

​      return msg.replace(/芜湖/g,arg+arg2)

​    })



​    Vue.filter('test',function(msg){

​      // return msg.replace('芜湖','哈哈')

​      //这个只能换第一个，

​      return msg+'========='

​    })



​    var vm = new Vue({

​      el: '#app',

​      data: {

​        msg: '芜湖，曾经，我芜湖芜湖起飞'

​      },

​      methods: {}

​    });

继续做品牌案例

定义私有的过滤器:

Body中新建id为app2的div

在js代码中新建vm2

他们不属于一个vm对象,但是可以调用全局的过滤器

如果私有和全局的过滤器同名,则优先调用私有过滤器

ES6字符串新方法，padtoStart，字符串补0

var hh = dt.getHours().toString().padStart(2,'0')

按键修饰符：@keyup.enter=“add”

.tab .delete .up……更多按键可以查看js对应的按键码 @keyup.ente.(码值)

自定义全局按键修饰符： Vue.config.keyCodes.f2 =113

文本框获取焦点

​ //定义全局指令,参数一指令的名称，指令名前不需要加v-前缀,调用时必须加v-

​ Vue.directive(‘focus’,{参数二 }) 参数二有bind: inserted: updated

​

    Vue.directive('focus',{

​      inserted:function(el){

​        el.focus()

​      }

​    })

Bind:执行一次，绑定好之后。Inserted插入到DOM时执行一次。Updated更新就触发

定义私有指令：

  directives:{ //自定义私有指令

​    'fontweight':{

​      bind: function (el,binding){

​        el.style.fontWeight = binding.value

​      }

指令函数的简写形式：不写function

**生命周期：**各种事件

生命周期钩子=生命周期函数=生命周期事件

第一个生命周期函数： 此时data和method都没初始化好

BeforeCreate( ){ }

**第二个生命周期函数：**此时data和method可以使用

Created

第三个生命周期函数： 此时模板在内存编辑完成，但是尚未渲染到页面

BeforeMount( ){ }

**第四个生命周期函数：**表示内存中模板已真实挂载到页面,最后一个生命周期函数。

Mounted( ){ }

//接下来是运行中的两个事件

BeforeUpdate( ) { } 此时页面显示数据还是旧的，data是最新的，二者尚未保持同步。

Update(){} 此时显示数据已经更新，保持同步。

第二节：数据请求

除了vue-resource之外，还可以使用’axios’的第三方包实现数据的请求

vue-resource 实现get，post，jsonp请求

步骤：

首先需要js导包，vue-resource依赖于vue.js所以需要先导入vue.js再导入vue-resource

其中post请求多两个参数，需要表单数据

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Then方法中的回调函数会在请求成功或失败时触发