vue 获取div_Vue基础笔记(上)

Vue实战

1. Vue 引言

渐进式 JavaScript 框架   --摘自官网

 # 渐进式   1. 易用  html css javascript   2. 高效  开发前端页面 非常高效    3. 灵活  开发灵活 多样性# 总结    Vue 是一个javascript 框架# 后端服务端开发人员:     Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定  双向绑定 MVVM      注意: 日后在使用Vue过程中页面中不要在引入Jquery框架    htmlcss--->javascript ----->jquery---->angularjs -----> Vue  # Vue 作者     尤雨溪   国内的    

---

2. Vue入门

2.1 下载Vuejs

 //开发版本:    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//生产版本:    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

   <div id="app">        {{ msg }}  {{username}} {{pwd}}        <br>        <span>            {{ username }}            <h1>{{ msg }}h1>        span>   div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({            el:"#app",  //element 用来给Vue实例定义一个作用范围            data:{      //用来给Vue实例定义一些相关数据                msg:"百知欢迎你,期待你的加入!",                username:"hello Vue!",                pwd :"12345",            },        });    script>

 # 总结:      1.vue实例(对象)中el属性: 代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法      2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出      3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等      4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

---

3. v-text和v-html

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部             类似于javascript 中 innerText

     <div id="app" class="aa">        <span >{{ message }}span>        <span v-text="message">span>    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({            el:"#app",            data:{                message:"百知欢迎您"            }        })    script>

 # 总结      1.{{}}(插值表达式)和v-text获取数据的区别在于           a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据          b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部  类似于javascript中 innerHTML

 <div id="app" class="aa">        <span>{{message}}span>        <br>        <span v-text="message">span>        <br>        <span v-html="message">xxxxxxspan>    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({            el:"#app",            data:{                message:"百知欢迎您"            }        })    script>

---

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

     <div id="app">        <h2>{{message}}h2>        <h2 v-text="message">h2>        <h2>年龄:{{ age }}h2>        <br>        <input type="button" value="点我改变年龄" v-on:click="changeage">    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({            el:"#app",            data:{                message:"hello 欢迎来到百知课堂!",                age:23,            },            methods:{  //methods 用来定义vue中时间                changeage:function(){                    alert('点击触发');                }            }        })    script>

 # 总结:    事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数    1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click    2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名    3.在vue中事件的函数统一定义在Vue实例的methods属性中    4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

4.2 Vue中事件的简化语法

     <div id="app">        <h2>{{ age }}h2>        <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">        <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({           el:"#app",  //element: 用来指定vue作用范围           data:{               age:23,           },    //data   : 用来定义vue实例中相关数据           methods:{               changeage:function(){                   this.age++;               },               editage:function(){                   this.age--;               }           }  //methods: 用来定义事件的处理函数        });    script>

 # 总结:      1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定

4.3 Vue事件函数两种写法

     <div id="app">        <span>{{count}}span>        <input type="button" value="改变count的值" @click="changecount">    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({           el:"#app",           data:{               count:1,           },           methods:{               /*changecount:function(){                   this.count++;               }*/               changecount(){                   this.count++;               }           }        });    script>

 # 总结:      1.在Vue中事件定义存在两种写法  一种是 函数名:function(){}  推荐    一种是  函数名(){} 推荐

4.4 Vue事件参数传递

     <div id="app">        <span>{{count}}span>        <input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">    div>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>    <script>        const app = new Vue({           el:"#app",           data:{               count:1,           },           methods:{               //定义changecount               changecount(count,name){                   this.count = count;                   alert(name);               }           }        });    script>

 # 总结:      1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

---

5.v-show v-if v-bind

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示        底层使用控制是 display 属性

 <div id="app">        <h2 v-show="false">百知教育欢迎你的加入!h2>    <h2 v-show="show">百知教育欢迎你的加入这是vue中定义变量true!h2>    <input type="button" value="展示隐藏标签" @click="showmsg">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el:"#app",        data:{            show:false,        },        methods:{            //定义时间            showmsg(){               this.show =  !this.show;            }        }    })script>

 # 总结      1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏      2.在v-show中可以通过boolean表达式控制标签的展示课隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示                底层控制DOM元素    操作DOM

 <div id="app">    <h2 v-if="false">百知教育h2>    <h2 v-if="show">百知教育欢迎你的加入h2>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el:"#app",        data:{            show:false        },        methods:{        }    });script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

 <div id="app">    <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="baizhilogo.jpg" alt="">    div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el:"#app",        data:{            msg:"百知教育官方logo!!!!",            showCss:true,        },        methods:{        }    })script>

5.4 v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

 <div id="app">    <img width="300" :title="msg" :class="{aa:showCss}"  :src="src" alt="">    <input type="button" value="动态控制加入样式" @click="addCss">    <input type="button" value="改变图片" @click="changeSrc">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el:"#app",        data:{            msg:"百知教育官方logo!!!!",            showCss:true,            src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"        },        methods:{            addCss(){                this.showCss= !this.showCss;            },            changeSrc(){                this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";            }        }    })script>

---

6.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

 <div id="app">    <span>{{ user.name }} {{ user.age }}span>    <br>        <span v-for="(value,key,index) in user">        {{index}} : {{key}} : {{value}}    span>        <ul>        <li v-for="a,index in arr" >            {{index}} {{a}}        li>    ul>        <ul>        <li v-for="user,index in users" :key="user.id">            {{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}        li>    ul>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el: "#app",        data: {            user:{name:"小陈",age:23},            arr:["北京校区", "天津校区", "河南校区"],            users:[                {id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},                {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},            ]        },        methods: {}    });script>

 # 总结  1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

---

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

 <div id="app">    <input type="text" v-model="message">    <span>{{message}}span>    <hr>    <input type="button" value="改变Data中值" @click="changeValue">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el: "#app",        data: {            message:""        },        methods: {            changeValue(){                this.message='百知教育!';            }        }    });script>

 # 总结    1.使用v-model指令可以实现数据的双向绑定     2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定# MVVM架构  双向绑定机制  Model: 数据  Vue实例中绑定数据  VM:   ViewModel  监听器  View:  页面  页面展示的数据

---

8. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

 # 1.常用的事件修饰符  .stop  .prevent  .capture  .self  .once  .passive

8.1 stop事件修饰符

用来阻止事件冒泡

 <div id="app">    <div class="aa" @click="divClick">                <input type="button" value="按钮" @click.stop="btnClick">    div>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>    const app = new Vue({        el: "#app",        data: {},        methods: {            btnClick(){                alert('button被点击了');            },            divClick(){                alert('div被点击了');            }        }    });script>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

         <a href="http://www.baizhibest.com/" @click.prevent="aClick">百知教育a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发     ===========> 只触发自己标签的上特定动作的事件     只关心自己标签上触发的事件 不监听事件冒泡

         <div class="aa" @click.self="divClick">                <input type="button" value="按钮" @click.stop="btnClick">        <input type="button" value="按钮1" @click="btnClick1">    div>

8.4 once 事件修饰符

once 一次 作用:  就是让指定事件只触发一次

         <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育a>

---

9. 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

 # 按键修饰符  .enter  .tab  .delete (捕获“删除”和“退格”键)  .esc  .space  .up  .down  .left  .right

9.1 enter 回车键

用来在触发回车按键之后触发的事件

  <input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

 <input type="text" @keyup.tab="keytabs">

---

10. Axios 基本使用

10.1 引言

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染       页面局部更新技术  Ajax

10.2 Axios 第一个程序

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js

10.2.1 GET方式的请求

     //发送GET方式请求    axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){        console.log(response.data);    }).catch(function(err){        console.log(err);    });

10.2.2 POST方式请求

     //发送POST方式请求    axios.post("http://localhost:8989/user/save",{        username:"xiaochen",        age:23,        email:"xiaochen@zparkhr.com",        phone:13260426185    }).then(function(response){        console.log(response.data);    }).catch(function(err){        console.log(err);    });

10.2.3 axios并发请求

并发请求:  将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

  //1.创建一个查询所有请求    function findAll(){        return axios.get("http://localhost:8989/user/findAll?name=xiaochen");    }    //2.创建一个保存的请求    function save(){        return axios.post("http://localhost:8989/user/save",{            username:"xiaochen",            age:23,            email:"xiaochen@zparkhr.com",            phone:13260426185        });    }    //3.并发执行    axios.all([findAll(),save()]).then(        axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理            console.log(res1.data);            console.log(res2.data);        })    );//用来发送一组并发请求

---

11. Vue 生命周期

生命周期钩子   ====>  生命周期函数

 # Vue生命周期总结    1.初始化阶段        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性            console.log("beforeCreate: "+this.msg);        },        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法            console.log("created: "+this.msg);        },        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译            console.log("beforeMount: "+document.getElementById("sp").innerText);        },        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面            console.log("Mounted: "+document.getElementById("sp").innerText);        }            2.运行阶段        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据            console.log("beforeUpdate:"+this.msg);            console.log("beforeUpdate:"+document.getElementById("sp").innerText);        },        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致            console.log("updated:"+this.msg);            console.log("updated:"+document.getElementById("sp").innerText);        },            3.销毁阶段        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁        },        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁        }

---