Vue 入门学习

最新推荐文章于 2022-09-05 00:12:39 发布
最新推荐文章于 2022-09-05 00:12:39 发布
阅读量700 收藏 2
点赞数 1
分类专栏： 前端 文章标签： vue java js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAYU_37/article/details/106600457
版权

文章目录

1. Vue基础

1.1 Vue简介

  • JavaScript框架
  • 简化Dom操作
  • 响应式的数据操作

1.2 第一个Vue程序

1.2.1 导入开发环境
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

或者(新手推荐使用)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1.2.2 编写页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:"i love java !"
        }
    })
</script>
</body>
</html>
1.2.3 运行结果

在这里插入图片描述

1.3 el挂载点

提出问题：

  1. vue实例的作用范围是什么呢？
{{ message }}
<div class="text">{{ message }},{{ info }}}</div>
<script>
    var el2 = new Vue({
        el:".text",
        data:{
            message:"测试class选择器~",
            info: "内部信息"

        }
    });
</script>

测试结果：
在这里插入图片描述
2. 是否可以使用其它选择器

答：el挂载点命中的有id选择器(#)，class选择器(.)和标签选择器(标签名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div>{{ message }}</div>
<div class="text">{{ message }}</div>
<div id="app">{{ message }}</div>
<script>
    var el1 = new Vue({
        el:"div",
        data:{
            message:"测试标签选择器~"
        }
    });
    var el2 = new Vue({
        el:".text",
        data:{
            message:"测试class选择器~"
        }
    });
    var el3 = new Vue({
        el: "#app",
        data:{
            message:"测试id选择器~"
        }
    });
</script>

</body>
</html>
  1. 是否可以设置其它的dom元素呢？

可以使用常用的标签库，如p标签，h1标签，但推荐使用div标签。

注意：

1.4 data数据对象

data域可以存储基本数据类型，还可以存储其它数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{name}}</h2>
    <ul>
        <li>{{info.age}}}</li>
        <li>{{info.tel}}</li>
    </ul>
    <h2>{{lan[0]}}</h2>
    <h2>{{lan[1]}}</h2>
    <h2>{{lan[2]}}</h2>
</div>

<script>
    var data = new Vue({
        el:"#app",
        data:{
            name: "liuzeyu",
            info:{
                age: 14,
                tel:10086
            },
            lan:["C++","C","Java"]
        }
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

2. 本地应用

2.1 v-text指令

v-text是一个标签体的属性，可以用于直接替换标签体内容，如果只需要进行部分替换，可以直接使用{{}}

<div id="app">
    <h2 v-text="message+'@'"></h2>
    <h2>{{message}},北京@</h2>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            message:"测试v-text!!!"
        }
    });
</script>

运行结果：
在这里插入图片描述

2.2 v-htmlt 指令

v-html指令会将带有html标签的字符串转成html

<div id="app">
    <h2 v-html="href">百度</h2>
    <h2 v-text="href">百度</h2>
</div>

<script>
    var html = new Vue({
        el:"#app",
        data:{
            href:"<a href='http://www.baidu.com'>百度</a>"
        }
    });
</script>

运行结果：
在这里插入图片描述

2.3 v-on 指令

v-on指令绑定事件函数，常见的投点击事件，双击事件，鼠标事件

<body>

<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt" >
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="v-on双击" @dblclick="doIt">
    <h3 @click="doFood" v-text="food"></h3>
</div>

<script>
var on  = new Vue({
    el:"#app",
    data:{
        food:"西红柿炒蛋..."
    },
    methods:{
        doIt:function () {
            alert("haha");
        },
        doFood:function () {
            this.food +="好吃好吃"
        }
    }
});
</script>
</body>

其中使用this关键字，点击h3会给内容追加字符串，可以不用操作dom元素。

在这里插入图片描述
补充：传递自定义参数修饰符

    <input type="button" value="传参" @click="doStudy(666)">
    doStudy:function (msg) {
   	 alert(msg);
	}

2.4 计数器

<body>

<div id="app">
    <button @click="sub">-</button>
    <span v-text="num">{{num}}</span>
    <button @click="add">+</button>
</div>

<script>
    var counter = new Vue({
        el:"#app",
        data:{
            num: 0
        },
        methods:{
            sub:function () {
                this.num --;
                if( this.num < 0 ){
                    alert("求求你不要再减了...");
                }
            },
            add:function () {
                this.num ++;
                if(this.num > 10){
                    alert("求求你不要再加了...");
                }

            }
         }
    });
</script>
</body>

在这里插入图片描述

2.5 v-show指令

  • v-show指令的作用：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom标签的属性display来切换显示状态
  • 表达式的值为true，显示标签的display属性为none
<body>
<div id="app">
    <img src="public/favicon.ico" v-show="isShow">
    <input type="button" value="切换" @click="change">
</div>

<script>
    var show = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow;
            }
        }
    });
</script>
</body>

2.6 v-if指令

  • v-if指令的作用：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，存在存在于dom树中，表达式值为false，从dom树中移除
<body>
<div id="app">
    <p v-if="isShow">刘泽煜</p>
    <input type="button" value="切换" @click="change">
</div>

<script>
    var v_if = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow;
            }
        }
    });
</script>
</body>

运行结果：
在这里插入图片描述

对比 v-if 和 v-show：

两者都是显示和隐藏标签内容，但是v-if操作的是dom树的标签，需要删除和添加标签节点，如果是经常需要改变的标签不适合适应，会影响到效率。
v-show则是为标签添加属性和删除属性，适用于经常操作的标签。

2.7 v-bind指令

v-bind为标签的属性值添加值，可以增加和修改

<body>

<div id="app">
    <img v-bind:src="imgSrc" width="10%" height="10%">
    <br>
    <img :src="imgSrc" alt=""  width="10%" height="10%">
    <hr>
    <img :src="imgSrc" alt=""  width="10%" height="10%" :class="isActive?'active':''">
    <img :src="imgSrc" alt=""  width="10%" height="10%" :class="{active:isActive}">
    <input type="button" @click="addStyle" value="为照片添加样式">
    <br>
</div>

<script>
    var img = new Vue({
        el:"#app",
        data:{
            imgSrc:"http://pngimg.com/uploads/sky_lantern/sky_lantern_PNG65.png",
            isActive:false
        },
        methods:{
            addStyle:function () {
                this.isActive = !this.isActive;
            }
        }
    });
</script>
</body>

运行结果：

在这里插入图片描述

2.8 v-for指令

  • v-for指令的作用是根据数据生成的列表结构
  • 数组常与v-for结合使用
  • 语法是（item,index） in 数据
  • 数组长度的更新会同步到页面上，是响应式的
<body>
<div id="app">
<ul>
    <li v-for="addr in address">{{addr}}</li>
</ul>
<hr>
<ul>
    <li v-for="(item,index) in address">{{index+1}}，{{item}}</li>
</ul>

</div>
<script>
    var v_for = new Vue({
        el:"#app",
        data:{
            address:["北京","上海","广州","深圳"]
            person:{
                name:"liuzeyu",
                age:18
            }
        }
    });
</script>
</body>

运行结果：
在这里插入图片描述

2.9 v-model

v-model的作用是可以将表单得到的值和data中的值进行绑定，并且数据同步是双向的，所谓的双向：指的是我们在input中输入的信息，会被赋值给Vue中的data message变量，之后，message变量又会重新赋值给span标签内容。

<body>


<div id="app">
    <input type="text" v-model="message">
    <span>{{ message }}</span>
</div>

<script>
    var model = new Vue({
        el:"#app",
        data:{
            message:"卧槽！"
        }
    });
</script>
</body>

运行结果：
在这里插入图片描述

2.10 小黑记事本

需求：

在这里插入图片描述
实现对记事本的增加，删除，统计条数，清空功能。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
          v-model="inputValue"
          @keyup.enter="addTodo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item,index) in hobbies">
            <div class="view" >
              <span class="index" >{{index}}.</span>
              <label>{{item}}</label>
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-if="hobbies.length != 0">
        <span class="todo-count"> <strong>{{hobbies.length}}</strong> items left </span>
        <button class="clear-completed" @click="clear">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.itheima.com/"
        ><img src="./img/black.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var v = new Vue({
      el:"#todoapp",
      data:{
        hobbies:["唱歌","吃饭","跳舞"],
        inputValue:""
      },
      methods:{
        addTodo:function () {
          this.hobbies.push(this.inputValue);
        },
        remove:function (index) {
          this.hobbies.splice(index,1);   //点击一次删除一个
        },
        clear:function () {
          this.hobbies =[];            //将数组置为空
        }
      }
    },);
  </script>
  </body>
</html>

使用到的指令：

1. v-for：遍历集合
2. v-model：数据的双向绑定
3. @click = “”：点击函数

使用到的函数：

1. [].length：求数组的长度
2. [].splice(index,count)：删除索引对应的数据
3. [].push：为数组添加元素

3. 网络应用

3.1 axios的基本使用

axios的两种请求方式：

  • get：格式：axios.get(“调用的接口地址?参数1=值1&参数2=值2”).then(回调函数1，回调函数2);
  • post：axios.post(“接口调用地址”,{参数1：“值1”，参数2：“值2”}).then(回调函数1，回调函数2);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios基本使用</title>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function (response) {
                console.log(response.data.jokes);
            },function (err) {
                console.log(err);
            })
        };

        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick=function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"liuzeyu"}).then(
                function (response) {
                    console.log(response.data);
                },function (err) {
                    console.log(err);
                }
            );
        }


    </script>
</body>

</html>

3.2 使用axios+vue获取随机笑话

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios+vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var v = new Vue({
            el:"#app",
            data:{
                joke:"点击按钮看笑话"
            },
            methods:{
                getJoke:function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function (response) {
                            that.joke = response.data;
                        },
                        function (err) {
                            this.joke = err;
                        }
                    );
                }
            }
        });
    </script>
</body>

</html>

3.3 天知道

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <div class="wrap" id="app">
      <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            placeholder="请输入查询的天气"
            v-model="city"
            @keyup.enter="search"
          />
          <button class="input_sub"  @click="search">
            搜 索
          </button>
        </div>
        <div class="hotkey">
          <a href="javascript:;" @click="hotadd('北京')">北京</a>
          <a href="javascript:;" @click="hotadd('上海')">上海</a>
          <a href="javascript:;" @click="hotadd('广州')">广州</a>
          <a href="javascript:;" @click="hotadd('深圳')">深圳</a>
        </div>
      </div>
      <ul class="weather_list" >
        <li v-for="(item,index) in weatherList">
          <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
     <script src="main.js"></script>
  </body>
</html>

js文件

var v = new Vue({
    el:"#app",
    data:{
        city:"",
        weatherList:""
    },
    methods:{
        search:function () {
            // console.log(this.city);
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (response) {
                // console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast;
            },function (err) {

            });
        },
        hotadd:function (city) {
            this.city = city;
            this.search();
        }
    }
});

运行结果：
在这里插入图片描述

4. 综合应用

实现一个在线的音乐播放器：
在这里插入图片描述
模块开发：

  1. 歌曲搜索
  2. 歌曲播放
  3. 歌曲封面
  4. 歌曲评论
  5. 播放动画
  6. mv播放

涉及到的接口开发文档：

  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址

静态页面：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <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 musicList">
             <a href="javascript:;" @click="playMusic(item.id)"></a>
             <b>{{item.name}}</b>
             <span><i v-show="item.mvid != 0" @click="playMv(item.mvid)"></i></span>
           </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing :isPlaying}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in musicComments">
              <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="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con"  style="display: none;" v-show="isShow">
        <video  controls="controls" :src="mvUrl"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script src="main.js"></script>
</body>

</html>

js文件：

var v = new Vue({
    el:"#player",
    data:{
        query:"",
        musicList:[],
        musicUrl:"",
        musicCover:"",
        musicComments:[],
        isPlaying:false,
        isShow:false,
        mvUrl:""
    },
    methods:{
        //搜索音乐
        searchMusic:function () {
            var that  = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function (response) {
                that.musicList = response.data.result.songs;
                console.log(response);
            },function (err) {
                //console.log(err);
            });
        },
        //点击播放音乐
        playMusic:function (musicId) {
            var that = this;
            axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function (response) {
                that.musicUrl = response.data.data[0].url;
            },function (err) {
                console.log(err);
            });
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(
                function (response) {
                    that.musicCover = response.data.songs[0].al.picUrl;
                },function (err) {

                }
            );
            axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function (response) {
                that.musicComments = response.data.hotComments;
            },function (err) {


            });

        },
        pause:function () {
            this.isPlaying = false;
        },
        play:function () {
            this.isPlaying = true;
        },
        //播放MV
        playMv:function (mvid) {
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function (response) {
                that.isShow = true;
                that.mvUrl = response.data.data.url;
            },function (err) {

            });
        },
        //关闭MV
        closeMv:function () {
            this.isShow = false;
        }

    }
});

参考：黑马视频学习

米兰的小铁匠z
关注
专栏目录
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue基础学习代码342234
03-19
在这个"vue基础学习代码342234"的压缩包中，我们可以预期找到一系列与Vue.js基础概念和实践相关的代码示例。 首先，Vue.js的核心概念之一是**虚拟DOM（Virtual DOM）**。它是一种优化机制，使得UI更新更加高效，...
【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）
【敦厚的曹操】的专栏
02-16 5901
一、通过event获取 console.log(event.target); // 当前元素点击的子节点 console.log(event.currentTarget); // 当前Vue元素 var pro = event.currentTarget; // 当前元素 pro.lastElementChild.style.color = "#DE3E3E"; /
vue动态绑定style样式之动态添加style样式的多种写法
我总是词不达意的博客
06-14 4万+
vue动态绑定style样式之动态添加style样式的多种写法
Vue自定义的组件上@click点击事件【失效】问题
柠檬不萌只是酸i
08-21 1万+
代码如下： /*写的right_fixed组件*/ Vue.component('right_fixed',{ props:['message','top'], template:` <div class="intetral_details_btn"> {{message}} </div> ` }) /* ri...
Vue点击事件给标签动态添加删除style样式
kunzedang_9528的博客
10-27 3804
一切都在代码里 ps：说明一下，因为我这里没有使用 v-for 标签 ，循环，所以没有index 值，这里使用标签的id 值，代替 index 准备工作 html <div class="up1"> <p id="dxal" v-on:click="addStyleOrGetDate($event)" :class="activeClass =='dxal' ? 'active':'' " > 典型案例 </p> &
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
vue点击更改样式
qq_40137978的博客
09-15 1015
由于比较简单，就直接上代码： 前端代码 <span v-for="(item,index) in bottomText" :class="{clicked: index === currentcheckIndex}" @click='bottomTextClick(index)'> {{item}} </span> vue代码 <script> export default{ data(){ return{ currentcheckIndex
vue组件内部绑定class还有style样式
胡世林的博客
07-17 8070
vue-cli vue 组件 vue class与style的绑定
学习Vue的style样式及class绑定（点击变色）
qq_38859502的博客
09-01 3324
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Vue 绑定style的各种形式
caoxinjian423的博客
10-01 541
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.
Vue之style的用法
热门推荐
chaofei_liang的博客
09-23 5万+
Vue中style的用法总结如下： v-bind:style  简写:style 1.基本用法 .red{ color: red; } .blue{ background: blue; }
Vue中通过属性绑定为元素绑定style行内样式
鸡血博客
10-14 983
Vue中通过属性绑定为元素绑定style行内样式
Vue 绑定 style
PJZero
05-12 9211
在Vue项目中，如果懒得写class属性，想直接将属性写在style上（我知道这不是一个好习惯）要怎么操作呢？官方实例<!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div>坑的确，上面那样的写法确实能绑定，可是当属性为min-height<!-- style 绑定 --> <div :style="{ min-height:
vue 中动态绑定class 和 style的方法
weixin_42333548的博客
06-01 3万+
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{open:appitem.open==true}]" :class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" :class="...
vue
weixin_39399362的博客
04-29 719
Vue vue基础 前端框架发展史 最早期的网页是静态网页 后来出现了新的创建动态HTML的方式(数据嵌入到html文件中)如：ASP、JSP和PHP 这时候的互联网，兴起了数据嵌入模板，模板直接写样式的开发模式，例如MVC模式,在此时，前端只是后端 MVC中的 V，所以那时候的所谓 “前端工程师” 还没有对应的概念，前端开发人员都喜欢自称 “切图仔”。 Model（模型层）：提供/保存数据。 Controller（控制层）：数据处理，实现业务逻辑。 View（视图层）：展示数据，提供用户界面。
vue中使用双重v-for循环列表，点击元素设置active样式
weixin_37833344的博客
12-24 1416
html结构 <div class="header"> <dl v-for="(item,parentIndex) in mediaData" :key="parentIndex"> <dt>{{item.itemname}}:</dt> <dd> <a href="javascript:;" @click="addStyle(c.
vue入门学习资料pdf
最新发布
07-31
总的来说，学习Vue.js需要一些基础的JavaScript和HTML/CSS知识，但这些资料将帮助你快速入门并掌握Vue.js的核心概念和技巧。无论你选择哪种学习方法，重要的是要坚持练习和实践，这样你才能真正掌握Vue.js并将其应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值