Vue全掌握——指令

Vue介绍:
是一套用于构建用户界面的渐进式框架

与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用

只关注视图层,因此它非常容易学习,非常容易与其它库或已有项目整合

“渐进式框架”:我的理解是,需要什么往里面加,不需要多余的部分!有多少东西,干多少活!显得简洁,主张最少

“自底向上逐层应用”:由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

Vue优点

本地应用
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.

{{ vulue }} 差值表达式
文本值

el挂载点
问题:

  1. Vue实例的作用范围

Vue会管理el选项中的元素及其内部的后代元素

  1. el是否可以使用其他选择器

可以,建议使用ID选择器

  1. 在html和body标签上支持Vue的 el 吗

不支持,不能使用HTML和body

data数据对象
可以写数值类型、布尔类型、字符串类型、数组、复杂类型(字面量对象…)

        data: {
            mess: '人物介绍',
            person: {
                name: 'Tom',
                sex: 'M',
                description: '来自美国加州...',
                subjects: ['高数', '英语', '毛概', 'android']
            }
        }

Vue指令
文本指令:v-text、v-html

v-text文本指令
作用和差值表达式类似

姓名:
v-text指令会将标签内文本覆盖

v-text指令可以采用+拼接的方式达到差值表达式的效果

v-html指令

data: {
mess: ‘百度
}

v-on事件绑定指令
两种写法:

点我1
<span @click=“doIt”>点我2
methods: {
doIt: function() {
console.log(‘点击了!’)
}
}

页面显示是跟随数据变化的,比如

点我1
<span @click=“doIt”>点我2

{{ say }}
data: { say: 'hello,小黑!' }, methods: { doIt: function() { this.say += '好!' } }

那如果传传参数呢?这样:

<span @click=“doIt(‘点了一下’)”>点我2
methods: {
doIt: function§ {
console.log§
}
}

v-show显示/隐藏指令
该指令实际修改的是display

显示
隐藏
data: { hidden: true, none: false }

v-if条件判断指令
该指令实际是对DOM元素的添加和移除

显示
隐藏
data: { hidden: true, none: false }
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">良</p>
    <p v-else>差</p>

指令布尔值简单判断方式v-if="{hidden: true}"、v-show="{hidden: true}"

(--------------v-show更适合频繁操作显示和隐藏---------------------------------)

v-bind设置属性指令




data: {
imgSrc: ‘images/offline.gif’,
title: ‘这是一张图片…’,
width: 300
}

如果一个属性有多个值,使用json格式!比如:

:class="{myclass1: show1, myclass2: show2}" (其中show1、show2的值为true/false)

v-for迭代指令
作用对象:作用于被迭代的元素标签

{{ item }}
data: { subjects: ['数学', '英语', '地理'] }

添加数组下标(注意:下标参数在后)

{{ index }} {{ item }}

如果被迭代的是对象的属性,则是键值对的方式:

        <li v-for="(v, k, i) in obj">
            值:{{v}},键:{{k}},索引:{{i}}
        </li>

v-model获取和设置表单数据(数据双向绑定)

{{ mess }}
data: { mess: '你好啊!' } div文本和表单输入的值是一样的 !

JavaScript代码可以嵌入Vue,非常灵活!
data数据对象中:

data: {
message: '页面加载于 ’ + new Date().toLocaleString()
}
methods中就不必说了!

基础综合演练(小黑记事本)
任务需求:对已有HTML结构和css元素的记事本,需要完成新增、删除、统计、清空、隐藏五个功能。

分析:显示列表实际是以数组存储的,那么实现增删改查都是对数组进行操作。

代码:

网络应用
上面的知识点只是针对本地的应用,没有涉及到网络数据的交互,这里讲网络请求库axios

axios内部使用的是原生JavaScript的ajax,完成异步请求。

axios
axios掌握重点:(导入axios的js库文件、会使用axios的get和post请求方法,以及回调函数)

案例:
axios+Vue完成第三方接口返回的数据处理:

        接口1:随机笑话
        请求地址:https://autumnfish.cn/api/joke/list
        请求方法:get
        请求参数:num(笑话条数,数字)
        响应内容:随机笑话

        接口2:用户注册 
        请求地址:https://autumnfish.cn/api/user/reg
        请求方法:post
        请求参数:username(用户名,字符串)
        响应内容:注册成功或失败

        接口3:天知道天气预报 
        请求地址:http://wthrcdn.etouch.cn/weather_mini
        请求方法:get
        请求参数:city(城市名,字符串)
        响应内容:城市近几天的详细天气信息

        悦听音乐
        接口4:歌曲搜索 
        请求地址:https://autumnfish.cn/search
        请求方法:get
        请求参数:keywords(查询关键字,字符串)
        响应内容:歌曲搜索结果
        接口5:获取某个歌曲的url
        请求地址:https://autumnfish.cn/song/url
        请求方法:get
        请求参数:id(歌曲id,字符串)
        响应内容:歌曲的url地址
        接口6:获取某个歌曲的详情信息
        请求地址:https://autumnfish.cn/song/detail
        请求方法:get
        请求参数:ids(歌曲id,字符串)
        响应内容:歌曲的详情(包括封面信息)
        接口7:获取某个歌曲的评论
        请求地址:https://autumnfish.cn/comment/hot?type=0
        请求方法:get
        请求参数:id(歌曲id,字符串;type固定为0)
        响应内容:歌曲的热门评论
        接口8:获取某个歌曲的MV
        请求地址:https://autumnfish.cn/mv/url
        请求方法:get
        请求参数:id(歌曲id,字符串)
        响应内容:歌曲的MV

(下面案例代码修正:v-for作用对象应该在被迭代的元素上,比如li;因为发的是截图,代码不好修改,请注意!)

案例1:随机笑话

案例2:用户注册

案例3:天知道天气预报

案例4:基于歌曲搜索的在线音乐播放网站

<div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
           <li v-for="item in lists">
             <a href="javascript:;" @click="playMusic(item.id)"></a> 
             <b>{{ item.name }}</b>
             <span v-show="item.mvid" @click="playMv(item.mvid)"><i></i></span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing: isplay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="picUrl" v-model="picUrl" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in commentsList">
              <dt><img :src="item.user.avatarUrl" alt=""></dt>
              <dd class="name">{{ item.user.nickname }}</dd>
              <dd class="detail">
                {{ item.content }}
              </dd>
            </dl> 
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause"  :src="url" v-model="url" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
    </div>
  </div>
<script src="js/customVue.js"></script>

const app = new Vue({
el: ‘#player’,
data: {
query: ‘’,
lists: [],
url: ‘’,
picUrl: ‘’,
commentsList: [],
isplay: false,
mvUrl: ‘’,
isShow: false
},
methods: {
searchMusic: function() {
let that = this;
axios.get(‘https://autumnfish.cn/search?keywords=’+ that.query)
.then(function(response) {
console.log(response);
that.lists = response.data.result.songs;
}, function(err) {
console.log(err);
});
},
playMusic: function(id) {
let that = this;
axios.get(‘https://autumnfish.cn/song/url?id=’+ id)
.then(function(response) {
console.log(response);
that.url = response.data.data[0].url;
}, function(err) {
console.log(err);
});

            axios.get('https://autumnfish.cn/song/detail?ids='+ id)
            .then(function(response) {
                console.log(response);
                that.picUrl = response.data.songs[0].al.picUrl;
            }, function(err) {
                console.log(err);
            });

            axios.get('https://autumnfish.cn/comment/hot?type=0&id='+ id)
            .then(function(response) {
                console.log(response);
                that.commentsList = response.data.hotComments;
            }, function(err) {
                console.log(err);
            });
    },
    play: function() {
        this.isplay = true;
    },
    pause: function() {
        this.isplay = false;
    },
    playMv: function(mvid) {
        let that = this;
        axios.get('https://autumnfish.cn/mv/url?id='+ mvid)
            .then(function(response) {
                console.log(response);
                that.isShow = true;
                that.mvUrl = response.data.data.url;
            }, function(err) {
                console.log(err);
            });
    },
    hide: function() {
        this.isShow = false;
    }
}

————————————————

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页