Vue框架基础

原生js与Vue框架的区别

用原生实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生</title>
</head>
<body>
    <!-- 原生html写法 -->
    <input type="text" id="txt">
    <p id="p">你输入了:</p>
</body>
</html>
<!-- 原生js写法实现数据双向绑定 -->
<script>
    //找到input标签
    let txt=document.querySelector('#txt')
    //给input设置事件,oninput方法
    txt.oninput=function(){
        //找到p标签
        document.querySelector("#p").innerHTML='你输入了:'+txt.value
        //txt.value就是该用户输入的值,那我们打印一下输入的值
        console.log(txt.value)
    }
</script>

用Vue实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <!-- 导入Vue CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='msg'>
        <p>你输入了:{{msg}}</p>
    </div>
</body>
</html>
<script>
    new Vue({
        //原生就是用querySelector拿到dom
        el:"#app",
        //数据集
        data:{
        msg:''
        }
    })
</script>

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

Vue基本使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
   <!-- 1.导包
        2.html布局
        3.Vue实例化
   -->
   <div id="app">
       <!-- 使用插值语法渲染 -->
       {{msg}}
   </div>
</body>
</html>
<script>
       // function Person(){}
       // new Person('nike', 20)   //构造函数实例化
       // vue实例化,可以创建多个
   new Vue({
       //el实际就是确定Vue的使用范围
       //内部执行的是querySelector
       //不能绑定body和html,否则报错
       el:"#app",
       data:{
           //这是数据集
           msg:"xxj"
       },
       // 方法集
       methods:{

       }
   })
</script>

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

v-text与v-html异同

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text会替换p标签中的内容,可以做一句话表达式 类似于innerText-->
        <p v-text="msg+1">哈哈哈</p>
        <!-- v-html也会替换p标签中的内容,不过它可以解释字符串并以字符串的方式展示出来 类似于innerHtml-->
        <p v-html="message">哈哈哈</p>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            //这里的数据其实就是变量
            msg:'其实一个人挺好的',
            message:'<h1>其实一个人挺好的</h1>'
        }
    })
</script>

v-model指令

<body>
    <div id="app">
       <input type="text" v-model='msg'>
       <p>你输入了:{{msg}}</p>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'hello'
        }
    })
</script>

1.png

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

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

v-on指令

v-on简写@

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

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <!-- @事件名="需要执行的简单代码或者是方法" -->
      <button @click="msg++">+</button>
      <input type="text" v-model="msg" />
      <button @click="jian">-</button>
    </div>
  </body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            // 数据
            msg:0
        },
        methods:{
            // 方法
           jian(){
               if(this.msg>0){
                   this.msg--
               }
           }
        }
    })
</script>

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简写为 :冒号

    <div id="app">
        <button @click='add'>点我啊</button>
        <img :src="image" alt="" :title="title">
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            //设置变量
            image:"http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
            title:"图片"
        },
        methods:{
            //点击事件
            add(){
                this.image="http://img2.imgtn.bdimg.com/it/u=2031173755,158711125&fm=26&gp=0.jpg"
                this.title="美女"
            }
        }
    })

v-bind:属性名="属性值" 该属性值也适用于一句话表达式
//通过绑定该属性后可以控制后面值的修改
v-bind简写 :
标签上天生存在的可以绑定修改，不存在的属性我们也可以绑定修改

v-bind指令之对象用法

<div id="app">
    <button @click="add">点我</button>
    <div :class="{active:bol}"></div>
   </div>
</body>
</html>
<script>
 new Vue({
     el:"#app",
     data:{
         bol:false
     },
     methods:{
         add(){
            this.bol=!this.bol
         }
     }
 })
</script>
<style>
    .active{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

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

v-for基本使用

  <div id="app">
       <!-- item相当于list[i],而index是他们的下标 -->
       <p v-for="(item, index) in list" :key="index">{{item}}</p>
   </div>
</body>
</html>
<script>
   new Vue({
       el:"#app",
       data:{
           //数组
           list:[
               "哈哈",
               "呵呵",
               "嘻嘻"
           ]
       }
   })
</script>

v-for对象使用

<body>
    <div id="app">
        <!-- value是属性值,key是属性名,index是下标 -->
        <p v-for="(value, key,index) in obj" :key="index">{{value}}--{{key}}--{{index}}</p>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            //对象
            obj:{
                name:'xxj',
                age:20,
                gender:"男"
            }
        }
    })
</script>

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都要是是兄弟标签关系才可以这样写

  <div id='app'>
        <input type="text" v-model="money">
        <p v-if="money>=10000">没问题，我们结婚吧！
            <!-- <span v-else>123</span> -->
        </p>
        <p v-else-if="money>=6000">我先看看,考虑考虑！</p>
        <p v-else-if="money>3000">不考虑了，太低了！</p>
        <p v-else>完全不考虑，还不如嫁给老头</p>

    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                money: 15000
            }
        })
    </script>

forEach方法

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

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

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

使用forEach

<script>
        let arr=[1,2,3,4,5,6]
        let newArr=[]
        let temp=arr.forEach((item,index)=>{
            if(item>3){
                newArr.push(item)
            }
            //这里的return只会中止return后面的代码,而不会中止循环
           // return
            console.log(index)//0.1.2.3.4.5
        })
        //[4,5,6]
        console.log(newArr)
        //forEach是没有返回值的,返回值为undefined
        console.log(temp)//undefined
    </script>

key值的基本使用

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

v-show指令

控制标签是否显示

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <!-- 取反 -->
        <button @click='bol=!bol'>点我</button>
        <div class="box" v-show="bol"></div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            bol:false
        }
    })
</script>

2.png

v-show与v-if的区别

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
<body>
    <div id="app">
        <!-- 为false不显示 -->
        <div class="box" v-if="bol"></div>
        <div class="box2" v-else></div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            bol:false
        }
    })
</script>

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{item.name}}
                <button @click="item.num++">+</button>
                <input type="text" v-model='item.num'>
                <button @click='add(index)'>-</button>

            </li>
        </ul>
        {{money}}
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            list:[{
               name:'白菜',
               num:0,
               price:2
           },{
               name:'鱼',
               num:0,
               price:8
           }]
        },
        methods:{
            add(index){
                if(this.list[index].num>0){
                    this.list[index].num--
                }
            }
        },
        computed: {
            //我们可以直接当属性去使用它  所以使用时就是：计算属性名字
            money(){
                let ha=0;
                this.list.forEach((item,index)=>{
                    ha+=item.num*item.price
                })
                //计算属性计算一个函数,return这个结果就是该函数的返回值
                return ha
            }
        },
    })
</script>

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

ref的基本使用

Vue中如何获取dom

<body>
    <div id="app">
        <button @click='add'>点我</button>
        <!-- //绑定dom -->
        <div ref="xxx"></div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            add(){
                //获取dom
                console.log(this.$refs.xxx)
            }
        }
    })
</script>

单元素动画

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

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

<style>

        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }
        /* 进入动画的执行体 */
        .xxx-enter-active{
            transition:all 2s;
        }
        /* 离开动画的执行体 */
        .xxx-leave-active{
            transition: all 2s;
        }
        /* 进入前的动画,希望从什么状态到正常状态 */
        .xxx-enter{
            opacity: 0;
            transform:translateX(-400px)
        }
        /* 离开时的状态,希望从正常状态到一个什么状态 */
        .xxx-leave-to{
            opacity: 0;
            transform:translateX(400px)
        }

    </style>
</head>
<body>
    <div id="app">
        <button @click='bol=!bol'>点我啊</button>
        <transition name='xxx'>
            <div class="box" v-if='bol'></div>
        </transition>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            bol:false
        }
    })
</script>

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

往往处于规范考虑，会把子组件放入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 路径

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,122评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,070评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,491评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,636评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,676评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,541评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,292评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,211评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,655评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,846评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,965评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,684评论 5赞 347
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,295评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,894评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,012评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,126评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,914评论 2赞 355