Vue快速入门 - 黑马 (附音乐播放器源码)

寻归晏

已于 2022-01-21 16:16:20 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-01-21 16:15:33 首次发布

本文链接：https://blog.csdn.net/weixin_51909882/article/details/122622629

版权

本文作为Vue快速入门教程，详细介绍了Vue的基础知识，包括创建Vue实例、el挂载点、data数据对象。进一步讲解了内容绑定、事件绑定、显示切换、属性绑定、列表循环和表单元素绑定等本地应用。并通过实际案例展示了如何使用axios进行网络应用，如歌曲搜索、播放。同时，提供了完整的音乐播放器源码。

摘要由CSDN通过智能技术生成

Vue快速入门

参考官方教程： https://cn.vuejs.org/v2/guide/

视频： https://www.bilibili.com/video/BV12J411m7MG?p=1

音乐播放器源码： https://gitee.com/koulinyi/music-player

一、Vue基础

1. 第一个vue程序

导入开发版本的Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>
    <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>
</body>
</html>

2. el挂载点

el是用来设置Vue实例挂载（管理）的元素。

a. Vue实例的作用范围是什么？

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

<body>
    {
  { message }}
    <div id="app" class="app">
        {
  { message }}
        <span>{
  { message }}</span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            // el:"#app",
            // el:".app",
            // el:"div",
            el:"body", //error
            data:{
     
                message:"hello vue!"
            }
        })
    </script>
</body>

效果如图：

在这里插入图片描述

b. 是否可以使用其他的选择器？

可以使用其他的选择器,但是建议使用ID选择器。

c. 是否可以设置其他的dom元素呢？

可以使用其他的双标签,不能使用HTML和BODY。

3. data数据对象

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据。
渲染复杂类型数据时，遵循js的语法即可。

<body>
    <div id="app">
        {
  { message }}
        <h2> {
  { school.name }} {
  { school.phone }} </h2>
        <ul>
            <li>{
  { campus[0] }}</li>
            <li>{
  { campus[1] }}</li>
            <li>{
  { campus[2] }}</li>
            <li>{
  { campus[3] }}</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!",
                school:{
     
                    name:"黑马程序员",
                    phone:"400-618-9090"
                },
                campus:["北京","上海","广州","深圳"]
            }
        })
    </script>
</body>

二、本地应用

通过Vue实现常见的网页效果。

(一) 内容绑定，事件绑定

1. v-text

v-text作用：设置标签的文本值（textContent）
默认写法会替换全部内容，使用差值表达式 {undefined{}} 可以替换指定内容。（如本例中”深圳的显示”）
内部支持写表达式（如字符串拼接）

<body>
    <div id="app">
        <!-- 全部替换 -->
        <h2 v-text="message + '!'">深圳</h2>
        <h2 v-text="info + '!'">深圳</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:"黑马程序员",
                info:"前端培训"
            }
        })
    </script>
</body>

2. v-html

v-html指令的作用是：设置元素的 innerHTML
内容中有html结构会被v-html指令解析为标签；v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<body>
    <div id="app">
        <!-- 内容中有html结构会被解析为标签 -->
        <p v-html="content"></p>
        <!-- 只能解析为文本 -->
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
     
            el:"#app",
            data:{
     
                content:"<a href='v-text.html'>黑马程序员</a>"
            }
        })
    </script>
</body>

3. v-on基础

v-on指令的作用是：为元素绑定事件
事件名不需要写on；指令可以简写为@；绑定的方法定义在methods属性中
vue中不需要考虑如何更改DOM元素，重点放在更改data中的数据即可，因为数据更新后，使用数据的元素会同步更新。方法内部通过this关键字可以访问定义在data中数据

<body>
    <div id="app">
        <input

最低0.47元/天解锁文章

寻归晏

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录