Vue框架基础

原生js与Vue框架的区别

用原生实现双向数据绑定

用Vue实现双向数据绑定




    
    
    Vue
    
    


    
        
        你输入了:{{msg}}

Vue是一个javaScript框架,从以上可以发现Vue无需操作DOM,只关心数据层

Vue基本使用




   
   
   Document



   
   
       
       {{msg}}

Vue是用数据驱动视图,视图改变从而数据改变

v-text与v-html异同

v-model指令


    
       
       你输入了:{{msg}}

1.png

v-model能够实现表单元素值的双向绑定（注：适用范围为：表单元素如：input,textarea,select等）

一开始input中的值是通过v-model取到msg的值,从而获取到数据
后面用户输入值改变input框中的值,影响到了msg的改变,实现p标签中内容的改变
双向绑定就是msg与input框的值不分彼此，不管哪一个变化，另一个都会跟着变。

v-on指令

v-on简写@

用于事件绑定,比如click,dblclick,mouseover 等只要是事件，都可用它来绑定

Vue实例中的this

在methods里面访问data =>this.data
在methods里A方法访问methods里的B方法 => this.B()

this是指当前 new Vue实例,vue实例时会将data里面属性与methods方法平铺过来到vue实例里面，所以this能直接访问到data与methods
在html中不需要加this来访问data或者方法

v-on常用的几个修饰符

@事件名.stop="事件执行代码" 阻止冒泡
@事件名.prevent="事件执行代码" 阻止默认行为
@keyup.enter="事件执行代码" 相当于只有按键盘回车我才触发

v-bind指令

v-bind简写为 :冒号

绑定相应属性值后，可以动态控制该属性值，通过控制该属性值让页面满足不同的需求效果

v-for基本使用

  
       
       {{item}}

v-for对象使用


    
        
        {{value}}--{{key}}--{{index}}

v-if v-else-if v-else指令

v-if="boolean值" 一句话表达式转换而成boolean值

如果为true 就渲染该标签
如果为false 不渲染该标签
v-else-if 和v-if一样，v-if不成立时，就到v-else-if身上了
v-else无须条件，前面的都不成立，就会执行它
注意点 v-if 与v-else-if v-else都要是是兄弟标签关系才可以这样写

  
        
        没问题，我们结婚吧！
            
        
        我先看看,考虑考虑！
        不考虑了，太低了！
        完全不考虑，还不如嫁给老头

forEach方法

它能对一个数据进行循环遍历

比如我现在要实现一个数组里面找到大于3的数值
原生写法:

let arr=[1,2,3,4,5,6]
        let newArr=[]
        for(let i=0;i3){
                newArr.push(arr[i])
            }
        }
        console.log(newArr)

使用forEach

key值的基本使用

当我们写html标签的时候相识度太高时,Vue框架并不一定可以识别,加上key相当于加上了一个编号,让Vue更容易去识别你操作了那个标签

v-show指令

控制标签是否显示

2.png

v-show与v-if的区别

3.png

从上图发现v-show和v-if虽然都有显示,隐藏的功能,但是:v-show控制display,而v-if对标签控制是否渲染

应用场景
1:当某些标签需要频繁切换使用时，建议优先考虑v-show,主要是在性能方向会更佳一些
2:当某些标签需要判断条件较多，且切换不太频繁，就优先考虑v-if

axios基本使用

为什么用axios?
1:原生的ajax过于麻烦,不方便调用
2:jquery相比ajax过于宠大，我们有时候我们只需要一个网络接口请求功能。
3:axios只做接口请求，体积较小，网络加载会快些，而且功能还挺丰富如（请求拦截，数据返回拦截等）

get请求

//get请求
axios.get('请求接口路径', 
          //params就是要传的参数，也可直接串到路径上
          {params: {
              ID: 123
           }}
           )
    .then(response=>{console.log("成功的处理");})  
    .catch(error=>{console.log("错误的处理");});

post请求

//post请求
axios.post('请求接口路径',          
           {     //接口请求参数
            firstName: 'xxj',
            lastName: 'tq'
             })
    .then(response=>{console.log("成功的处理");})  
    .catch(error=>{console.log("错误的处理");});

axios之config配置模式

//axios(config)模式  
axios({
        method: '请求方法如:post.get',
        url: '请求接口路径',
    //post需要传递的参数
        data: {
        xxx: 'oo'
         },
        
    //get接口地址上需要传递的参数
        params: {
              ID: 123
         }    
}).then(response=>{console.log("成功的处理");})  
  .catch(error=>{console.log("错误的处理");});

Vue生命周期

什么是生命周期?

我的理解是:在什么时候该做什么事,就像一个人从出生到成年到结婚,有一番事业,最后死亡,那Vue也是这样
所有的生命周期都是一个函数
在Vue实例化里面与data和methods同级

image-20191225102557694.png

计算属性computed

依赖一个或者多个数据而生成一个新的数据


    
        
            
                {{item.name}}
                
                
                

            
        
        {{money}}

作用:对data中数据进行二次加工，同时会实时的响应data中数据变化，data中数据变了，它立马会改变，同时不改变data中的数据，自己得到的结果也会缓存起来当属性使用

ref的基本使用

Vue中如何获取dom

单元素动画

产生条件:进入/离开 v-if/v-show

使用:
1.用transition包住
2.用transition加一个name='xxx'
该值就是后面css的一个前缀
3.css
.xxx-enter-active //进入动画的执行体
.xxx-leave-active //离开动画的执行体
.xxx-enter 进入前的状态,希望从一个什么状态变到正常
.xxx-leave-to 离开的最后一刻的状态,希望从正常

如何在组件中引入其他组件

往往处于规范考虑，会把子组件放入components文件夹下面

1.导入组件
2.注册组件

export default {
  components: {
    组件名,     //注册的组件都写在components对象下。
  }
}

3.使用该组件

 <组件名>   //该组件名来自于在组件注册时的组件名

在组件中如何使用外部插件

以axios为列

1.装包

npm i axios//在相应的目录执行该命令

2.导包

import  axios from 'axios'

3.用包

axios({
url:"请求地址",
data:{
参数
},
method:"请求方式"
})
.then(res=>{
console.log('请求成功')
})
.catch(err=>{
console.log('失败')
})

export与import

输出：export default 值
导入：import 名字 form 路径