[前端开发] 快速入门VUE（笔记+几个小demo）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

  • 基本知识
    • el 挂载点
    • data 数据对象
    • methods 添加方法
  • 本地应用
    • 内容绑定
      • v-text
      • v-html
    • 事件绑定
      • v-on
      • 实例-计数器
    • 显示切换
      • v-show
      • v-if
    • 属性绑定
      • v-bind
      • 实例-切换图片
    • 列表循环
      • v-for
    • 表单元素绑定
      • v-model
      • 实例-记事本
  • 网络应用
    • axios
    • axios+vue
    • 实例-天气预报
  • 综合实例-音乐播放器

基本知识

首先导入开发版VUE <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

el 挂载点

  • el 用于设置VUE实例挂载（管理）的元素

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

  • 可以使用各种选择器，但使用ID选择器更好。

  • 除了<html>和<body>都可以使用。

data 数据对象

  • VUE中用到的数据定义在__data__中

  • data中可以写复杂类型的数据

  • 渲染复杂类型数据时，遵守js的语法即可

methods 添加方法

  • VUE中用到的函数方法在 methods 中

  • methods 用 this.属性名 访问到 data中的数据

  • 在构造函数外部可以使用 vm.方法名 定义或者调用方法

本地应用

内容绑定

v-text

  • v-text 指令的作用是设置标签的内容（textContent）

  • 默认写法会替换标签里的所有内容，使用 差值表达式“{{}}” 可以替换指定内容

  • 内部支持写表达式 <h2 v-text="message+\'!\'"></h2>

v-html

  • v-html 设置元素的innerHTML

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

  • 内容中只有文本，效果和 v-text 相同

事件绑定

v-on

  • v-on 为元素绑定事件

  • 事件名不需要写 on<input type="button" value="v-on指令" v-on:click="doit">

  • v-on 可以简写为 @<input type="button" value="v-on简写" @click="doit">

  • 绑定的方法定义在methods属性中

  • 方法内部通过 this 关键字访问定义在data中的数据

    补充：

  • 事件绑定的方法写成函数调用的参数，可传入参数

  • 事件的后面跟上 . 修饰符，对事件进行控制 @keyup.enter

实例-计数器

    <div id="app">
        <button @click="sub">-</button>
        <span> {{ num }} </span>
        <button @click="add">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                sub: function(){
                    if(this.num==0) alert("没有了！");
                    else this.num--;
                },
                add: function(){
                    if(this.num==10) alert("太多了！");
                    else this.num++;
                }
            },
            data:{
                num: 0,
        })
    </script>

  1. VUE实例

    • el 挂载点

    • data 数据

    • methods 方法

  2. v-on 绑定事件，简写为@

  3. this 获取 data 中数据

  4. v-text 设置文本值，简写为{{}}

显示切换

v-show

  • v-show 根据表达式真假切换元素的显示状态

  • 原理是 修改display属性

  • 指令后的内容，不管是什么，解析为布尔值

v-if

  • v-show 根据表达式真假切换元素的显示状态

  • 原理是 操作dom

  • 频繁切换使用 v-show ，反之使用 v-if

属性绑定

v-bind

  • v-bind 为元素绑定属性

  • 完整写法： v-bind:属性名<img v-bind:src="imgSrc" alt="">

  • 简写： :属性名<img :src="imgSrc" alt="" :title="imgTitle+\'!!!\'">

  • 动态增删class，可以使用对象的方式 {类名: bool型变量}<img :src="imgSrc" alt="" :title="imgTitle+\'!!!\'" :class="{active:isShow}">

实例-切换图片

    <div id="app">
        <a href="javascript:void(0)" @click="prev" v-show="index>0">上一张</a>
        <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1">下一张</a>
        <br/>
        <img :src="imgArr[index]" alt="">
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            },
            data:{
                imgArr:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],
                index:0,
            }
        })

  • 列表数据使用数组保存

  • v-bind 设置元素属性，例如src

  • v-show 和 v-if 都可以切换元素的显示状态

列表循环

v-for

  • DarkCyan 根据数据生成列表结构

  • 数组经常和 v-for 结合使用

  • 语法： (item, index) in data

  • item 和 index 可以结合其他指令使用

表单元素绑定

v-model

  • v-model 便捷设置和获取表单元素的值

  • 绑定的数据会和表单元素值相关联

  • 双向绑定 绑定的数据 <=> 表单元素的值

实例-记事本

    <section id="todoapp">
        <header>
            <h1> to do list </h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
        <section>
            <ul>
                <li v-for="(item, index) in list">
                    <div>
                        <!-- <span>{{index+1}}.</span> -->
                        <label for="">{{item}} </label>
                        <button @click="remove(index)">delete</button>
                    </div>
                </li>
            </ul>
            <footer v-if="list.length!=0">
                <span>
                    {{list.length}} items left
                </span>
                <button @click="clear"> clear </button>
            </footer>
        </section>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#todoapp",
            data: {
                list: [],
                inputValue: ""
            },
            methods: {
                add: function () {
                    this.list.push(this.inputValue);
                },
                remove: function (index) {
                    this.list.splice(index, 1);
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>

网络应用

axios

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

  • GETaxios.get(url?key1=value1&key2=value2).then(function(response{}, function(error){}));

  • POSTaxios.post(url, {key1: value1, key2:value2}).then(function(response{}, function(error){}));

axios+vue

  • 注意 axios 回调函数中的this指向window，无法访问到data的数据

  • 解决方案：1）保存this；2）箭头函数；

实例-天气预报

    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="img/2.jpg" alt="logo" height="200"  width="400"></div>
            <div>
                <input type="text" v-model="city" class="input_txt" placeholder="请输入查询的天气" @keyup.enter="searchWeather">
                <button class="input_sub"> 搜 索 </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity(\'北京\')">北京</a>
                <a href="javascript:;" @click="changeCity(\'上海\')">上海</a>
                <a href="javascript:;" @click="changeCity(\'深圳\')">深圳</a>
                <a href="javascript:;" @click="changeCity(\'广州\')">广州</a>
            </div>
        </div>
        <ul class="weather_list">
            <li v-for="item in weatherList">
                <div><span>{{item.type}}</span></div>
                <div>
                    <b>{{item.low}}</b>
                    ~
                    <b>{{item.high}}</b>
                </div>
                <div><span>{{item.date}} </span></div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                city: "",
                weatherList:[]
            },
            methods: {
                searchWeather: function () {
                    axios.get(\'http://wthrcdn.etouch.cn/weather_mini?city=\' + this.city)
                        .then(response => {
                            this.weatherList = response.data.data.forecast;
                            console.log(this.weatherList);
                        })
                },
                changeCity: function(city){
                    this.city = city;
                    this.searchWeather();
                }
            }
        })
    </script>

综合实例-音乐播放器

    <div class="wrap">
        <div id="player">
            <div class="search_bar">
                <img src="" alt="">
                <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
            </div>
            <div class="song_wraper">
                <div class="song_list">
                    <ul>
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playMusic(item.id)">{{item.name}}</a>
                            <button v-if="item.mvid!=0" @click="playMv(item.mvid)"> mv </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="player_con" :class="{playing:isplay}">
                <img :src="musicImg" alt="">
            </div>
            <div class="audio_con">
                <audio ref="audio" :src="musicUrl" :play="play" :pause="pause" controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="video_con" v-show="isShow">
                <video :src="mvUrl" controls="controls" ></video>
                <!-- <div class="mask" @click="hide"></div> -->
                <button @click="hide">关闭</button>
            </div>
            <div class="comment_wrapper">
                <h5>热门评论</h5>
                <div class="comment_list">
                    <dl v-for="item in musicComments">
                        <dt><img :src="item.user.avatarUrl" alt=""></dt>
                        <dd class="name">{{item.nickname}}</dd>
                        <dd class="detail">{{item.content}}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#player",
            data: {
                query: "",
                musicList: [],
                musicUrl: "",
                musicImg: "",
                musicComments: [],
                isplay: false,
                mvUrl:"",
                isShow:false
            },
            methods: {
                searchMusic: function () {
                    axios.get("https://autumnfish.cn/search?keywords=" + this.query)
                        .then(response => {
                            // console.log(response);
                            this.musicList = response.data.result.songs;
                        }, error => {
                            console.log(error);
                        })
                },
                playMusic: function (musicId) {
                    axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                        .then(response => {
                            // console.log(response);
                            this.musicUrl = response.data.data[0].url;
                        }, error => {
                            console.log(error);
                        })
                    axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
                        .then(response => {
                            console.log(response);
                            this.musicImg = response.data.songs[0].al.picUrl;
                        }, error => {
                            console.log(error);
                        })
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
                        .then(response => {
                            console.log(response);
                            this.musicComments = response.data.hotComments;
                        }, error => {
                            console.log(error);
                        })
                },
                play:function(){
                    isplay = true;
                },
                pause:function(){
                    this.isplay = false;
                },
                playMv:function(mvId){
                    axios.get("https://autumnfish.cn/mv/url?id=" + mvId)
                        .then(response => {
                            this.mvUrl = response.data.data.url;
                            this.isShow = true;
                        }, error => {
                            console.log(error);
                        })
                },
                hide:function(){
                    this.isShow = false;
                }
            }
        })
    </script>

有机会把这个案例的css补上。

以上是 [前端开发] 快速入门VUE（笔记+几个小demo） 的全部内容， 来源链接： utcz.com/z/377912.html

回到顶部