vue入门--基础命令+axios+案例练习

vue入门–基础命令+axios+案例练习

vue入门–vue常用属性、生命周期、计算属性、过滤器、组件、虚拟DOM、数组的响应式方法、页面闪烁、ES6简单语法增强

vue入门–js高阶函数(箭头函数)、v-model数据绑定、组件化、父子组件通信及访问

Vue基础

简介

• 是JavaScript框架
• 简化Dom操作
• 响应式数据驱动

Vue文档地址

第一个Vue程序

使用vscode时可以安装live server插件，实现热部署，动态刷新页面，节省开发时间。

<div id="app">
        {{ message }}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello Vue"
        }
    })
script>

要注意网页元素和script标签引入的顺序，引入vue框架后，再去创建vue对象。

基础

el挂载点

• el属性挂载的元素内部，都可以使用差值表达式，使用Vue对象中定义的数据。(元素内部的子元素中也可以使用)

<div id="app">
        {{ message }}
    <div>
        {{ message }}
    div>
div>

• el挂载点，不止可以使用id选择器，同样可以使用class等选择器，建议使用id选择器

<div id="app" class="abc">
    {{ message }}
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: ".abc",
        data:{
            message: "Hello Vue"
        }
    })
script>

• el可以挂载很多dom页面元素(必须是块元素，且不能是body元素)

尽量使用el去挂载div元素

data属性

数据对象

<div id="app">
    {{ message }}

    <h2>{{ user.name }}h2>

    <ul>
        <li>{{ arrays[0] }}li>
        <li>{{ arrays[1] }}li>
    ul>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello Vue",
            user: {
                name:"张三",
                age: 21
            },
            arrays:["数组1", "数组2", "数组3"]
        }
    })
script>

vue指令

v-text: 设置标签的文本值

使用v-text时，元素内部的所有值都会被替换掉(双标签元素，也就是块元素)

<div id="app">
    <h2 v-text="message" >aaah2>
    <h2>{{ message }}北京h2>     
    <h2>{{ message + "!!" }}h2> 
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello Vue"
        }
    })
script>

v-html: 设置标签的innerHTML

内容中有html结构，会被解析为标签

v-text指令，无论是什么内容，只解析为文本。

<div id="app">
    <p v-html="message">p>
    <p v-text="message">p>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "百度一下，你就知道"
        }
    })
script>

v-on

• @click : 点击事件
• @keyup.enter : 回车事件

为元素绑定事件

<div id="app">
    <input type="button" value="事件绑定" v-on:click="doIt">
    <input type="button" value="事件绑定2" @click="doIt">

div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        methods:{
            doIt:function(){
                alert("do it")
            }
        }
    })
script>

使用this关键字，可以获取到当前vue对象中的数据。

<div id="app">
    <h2 @click="changeFood">{{ food }}h2>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            changeFood:function(){
                this.food += "abc";
            }
        }
    })
script>

v-on补充

传递自定义参数，事件修饰符

<div id="app">
    <input type="button" @click="doIt('i','am')" value="调用方法"> 

div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

<script>
    var app = new Vue({
        el:"#app",
        methods:{
            doIt:function(p1,p2){
                alert(p1+p2)
            }
        }
    })
script>

案例—计数器

<div id="app">
    <div class="input-num">
        <button @click="sub">
            -
        button>
        <span>{{num}}span>
        <button @click="add">
            +
        button>
    div>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add:function(){
                if (this.num == 10) {
                    alert("不能大于10")
                    return
                }
                this.num ++;
            },
            sub:function(){
                if (this.num == 1) {
                    alert("不能小于1")
                    return
                }
                this.num--
            }
        }
    })
script>

v-show

根据表达值的真假，切换元素的显示和隐藏,本质上是设置元素的display属性值

<div id="app">
    <input type="button" value="切换图片显示" @click="changeImageShow">
    <img src="./sheep.jpg" alt="" v-show="isShow">
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        }, 
        methods:{
            changeImageShow:function(){
                this.isShow = !this.isShow
            }
        }
    })
script>

注意 v-show是根据条件的真假，来显示，所以我可以

<img src="./sheep.jpg" alt="" v-show="1>2">	

1>2，条件不成立，那么图片不显示。

v-if

根据表达式的真假，切换元素的显示和隐藏(是操纵DOM元素)

注意和v-show的区别，v-if是将元素给移除或添加了，而v-show只是把元素的display属性值给改了

需要频繁修改的元素使用 v-show，反之则用 v-if

<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">hello 北京p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            toggleIsShow:function(){
                this.isShow = !this.isShow
            }
        }
    })
script>

v-bind

设置元素的属性

语法：

v-bind可以省略

v-bind:属性名=表达式

<div id="app">
    <img v-bind:src="imgSrc" v-bind:title="imgTitle + '!!!'">
    <br>
    <img :src="imgSrc" :title="imgTitle + '!!!'" :class="isActive?'active':''" @click="toggleActive">

    <br>
    <img :src="imgSrc" :title="imgTitle + '!!!'" :class="{active:isActive}" @click="toggleActive">
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            imgSrc:"./logo.png",
            imgTitle:"hello view",
            isActive:false
        },
        methods:{
            toggleActive:function(){
                this.isActive = !this.isActive
            }
        }

    })
script>

案例—图片切换

<div id="app">
    <input type="button" value="上一张" @click="prev" v-show="index!=0">
    <img :src="imgArr[index]">
    <input type="button" value="下一张" @click="next" v-show="index">
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

<script>
    var app =new Vue({
        el:"#app",
        data:{
            imgArr:[
                "./sheep.jpg",
                "./javacode1.png",
                "./javacode2.png"
            ],
            index:0
        },
        methods:{
            prev:function(){
                this.index--;        
            },
            next:function(){
                this.index++;
            }
        }
    })
script>

v-for

根据数据生成列表结构

<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{ index+1 }}城市：{{ item }}
        li>
    ul>

    <h2 v-for="item in users">
        {{ item.name }}
    h2>
    <input type="button" value="增加数据" @click="add">
    <input type="button" value="减少数据" @click="remove">
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","天津","上海","广州"],
            users:[
                {name:"张三"},
                {name:"李四"},
                {name:"王五"}
            ]
        },
        methods:{
            add:function(){
                this.users.push({name:"深圳"}); // 新增数据
            },
            remove:function(){
                this.users.shift();	// 删除最左边的数据
            }
        }
    })
script>

v-model

获取和设置表单元素的值(双向数据绑定)

<div id="app">
    <input type="text" v-model="message">
    <h2 v-text="message">h2>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello world"
        }
    })
script>

网络应用

Vue结合网络数据进行开发应用。

axios

axios，是一个基于promise网络请求库，作用于node.js和浏览器中

引入 axios

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

基本语法：

axios.get(地址?key=value&key2=value2).then(function(res){}, function(err){})
axios.post(地址,{key:value}).then(function(res){}, function(err){})

axios+vue

<div id="app">
    <input type="button" value="获取随机字符" @click="getStr">
    <p>{{ str }}p>
div>

<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            str:"aaa"
        },
        methods:{
            getStr:function(){
                var that = this;
                axios.get("http://127.0.0.1:8080/app/report/test").then(
                    function(res){
                        console.log(res.data)
                        that.str = res.data;
                    },
                    function(err){
                        console.log(err);
                    }
                );
            }
        }
    })
script>

这里需要注意的是，axios回调函数中的this是已经改变了，所以要在axios回调函数外面，把vue对象存起来到变量中。

案例–天知道

axios+vue --天知道案例

js代码

var app = new Vue({
    el:"#app",
    data:{
        city:"",
        weatherList:[]
    },
    methods:{
        searchWeather:function(){
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(
                function(res){
                    that.weatherList = res.data.data.forecast;
                    console.log(res.data.data.forecast)
                }
            ).catch(function(err){})
        },
        changCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

案例–悦听

知识点:

• audio标签的 play事件会在音频播放时触发
• audio标签的pause事件会在音频暂停时触发
• 通过对象的方式设置类型，类名生效与否取决于后面值的真假

:class="{playing:isPlaying}"	

axios+vue案例–悦听

js代码

var app = new Vue({
    el: "#player",
    data: {
        query: "",
        musicList: [],
        musicUrl: "",
        musicCover: "./images/cover.png",
        hotComments:[],
        isPlaying:false,
        isShow:false,
        mvUrl:""
    },
    methods: {
        seachMusic: function () {
            var that = this
            axios.get('https://autumnfish.cn/search?keywords=' + this.query).then(
                function (res) {
                    console.log(res);
                    that.musicList = res.data.result.songs;
                }
            );
        },
        playMusic: function (musicId) {
            var that = this
            axios.get('https://autumnfish.cn/song/url?id=' + musicId).then(
                function (res) {
                    console.log(res.data.data[0].url)
                    that.musicUrl = res.data.data[0].url;
                }
            );
            axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).then(
                function (res) {
                    console.log(res.data.songs[0].al.picUrl)
                    that.musicCover = res.data.songs[0].al.picUrl;
                }
            );

            axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(
                function (res) {
                    that.hotComments = res.data.hotComments;
                }
            );
        },
        play:function(){
            this.isPlaying = true;
        },
        pause:function(){
            this.isPlaying = false;
        },
        playMV:function(mvId){
            var that = this;
            axios.get('https://autumnfish.cn/mv/url?id=' + mvId).then(
                function(res){
                    that.isShow = true;
                    that.mvUrl = res.data.data.url;
                }
            );
        },
        hide:function(){
            this.isShow = false;
        }
    }
})

vue入门–基础命令+axios+案例练习

vue入门–vue常用属性、生命周期、计算属性、过滤器、组件、虚拟DOM、数组的响应式方法、页面闪烁、ES6简单语法增强

vue入门–js高阶函数(箭头函数)、v-model数据绑定、组件化、父子组件通信及访问