网站首页 > 编程文章正文

vue.js快速入门（vue.js入门教程）

zazugpt 2024-09-11 11:31:15 编程文章 16 ℃ 0 评论

el:挂载点

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

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

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

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

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

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

<!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>el:挂载点</title>
</head>

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

</html>

data:数据对象

Vue中用到的数据定义在data中

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

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

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

var app = new Vue({
            el:"#app",             
           data:{
              message:"黑马程序员",
             array:[],
             obj:{},             
           }
        })

Vue指令指的是,以v-开头的一组特殊语法

v-text

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

<div id="app">
          <h2 v-text="message+’!’"></h2>
          <h2>深圳{{ message + "!"}}</h2>
        </div>

var app = new Vue({
       el:"#app",             
      data:{
                message:"黑马程序员"
            }
        })

v-html

v-html指令的作用是:设置元素的innerHTML

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

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

解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
          <p v-html=“content"></p>
        </div>


 var app = new Vue({
            el:"#app",             
         data:{
                // content:"黑马程序员"
                content:"<a href='#'>黑马程序员</a>"
            }
        })

v-on基础

v-on指令的作用是:为元素绑定事件

事件名不需要写on

指令可以简写为@

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

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

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上 .修饰符可以对事件进行限制

v-on补充

.enter 可以限制触发的按键为回车

事件修饰符有多种

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

 var app = new Vue({
            el:"#app",             
           methods:{
           doIt:function(){
                // 逻辑
              }
            }
        })

<div class="input-num">
            <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>
    /*
      1. data中定义num属性,类型是数字,渲染到2个按钮中间
      2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减
      3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加
    */
    // 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            // 修改的数字
            num:1
        },
        methods: {
            // 减
            sub:function(){
                // console.log("sub");
                // 递减
                if(this.num>0){
                    this.num--;
                }else{
                    alert("别点啦,太小啦!");
                }
            },
            // 加
            add:function(){
                // console.log("add");
                // 累加
                if(this.num<10){
                    this.num++;
                }else{
                    alert("别点啦,太大啦!");
                }
            }
        }
    });
</script>


<body>
<div id="app">
    <input type="button" value="点击" @click="doIt(666,'老铁')">
    <input type="text" @keyup.enter="sayHi">
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods: {
            doIt:function(p1,p2){
                console.log("做it");
                console.log(p1);
                console.log(p2);
            },
            sayHi:function(){
                alert("吃了没");
            }
        },
    })
</script>
</body>

v-show

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为true元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <input type="button" value="累加年龄" @click="addAge">
    <img v-show="isShow" src="./img/monkey.gif" alt="">
    <img v-show="age>=18" src="./img/monkey.gif" alt="">
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:9
        },
        methods: {
            changeIsShow:function(){
                this.isShow = !this.isShow;
            },
            addAge:function(){
                this.age++;
            }
        },
    })
</script>
</body>

v-if

根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

频繁的切换v-show,反之使用v-if,前者的切换消耗小

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

<body>
<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">黑马程序员</p>
    <p v-show="isShow">黑马程序员 - v-show修饰</p>
    <h2 v-if="temperature>=35">热死啦</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperature:36
        },
        methods: {
            toggleIsShow:function(){
                this.isShow = !this.isShow;
            }
        },
    })
</script>
</body>

v-bind

设置元素的属性(比如:src,title,class)

v-bind指令的作用是:为元素绑定属性

完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删class建议使用对象的方式

<body>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
    <br>
    <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"http://www.itheima.com/images/logo.png",
            imgTitle:"黑马程序员",
            isActive:false
        },
        methods: {
            toggleActive:function(){
                this.isActive = !this.isActive;
            }
        },
    })
</script>
</body>

图片切换实例

<body>
<div id="mask">
    <div class="center">
        <h2 class="title"><img src="./images/logo.png" alt=""> 深圳创维校区环境</h2>
        <img :src="imgList[index]" alt="" />
        <a
                href="javascript:void(0)"
                @click="prev"
                class="left"
                v-show="index>0"
        >
            <img src="./images/prev.png" alt="" />
        </a>
        <a
                href="javascript:void(0)"
                @click="next"
                class="right"
                v-show="index<imgList.length-1"
        >
            <img src="./images/next.png" alt="" />
        </a>
    </div>
</div>

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

<script>
    const app = new Vue({
        el: "#mask",
        data: {
            imgList: [
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
                "./images/05.jpg",
                "./images/06.jpg",
                "./images/07.jpg",
                "./images/08.jpg",
                "./images/09.jpg",
                "./images/10.jpg",
            ],
            index: 0
        },
        methods: {
            // 上一张
            prev() {
                this.index--;
            },
            // 下一张
            next() {
                this.index++;
            }
        }
    });
</script>
</body>

v-for

根据数据生成列表结构

v-for指令的作用是:根据数据生成列表结构

数组经常和v-for结合使用，语法是( item,index ) in 数据

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

数组长度的更新会同步到页面上,是响应式的

<body>
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">

    <ul>
        <li v-for="(it,index) in arr">
            {{ index+1 }}黑马程序员校区:{{ it }}
        </li>
    </ul>
    <h2 v-for="item in vegetables" v-bind:title="item.name">
        {{ item.name }}
    </h2>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州","深圳"],
            vegetables:[
                {name:"西兰花炒蛋"},
                {name:"蛋炒西蓝花"}
            ]
        },
        methods: {
            add:function(){
                this.vegetables.push({ name:"花菜炒蛋" });
            },
            remove:function(){
                this.vegetables.shift();
            }
        },
    })
</script>
</body>

v-model

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

v-model指令的作用是便捷的设置和获取表单元素的值

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

绑定的数据←→表单元素的值


<body>
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{ message }}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"黑马程序员"
        },
        methods: {
            getM:function(){
                alert(this.message);
            },
            setM:function(){
                this.message ="酷丁鱼";
            }
        },
    })
</script>
</body>

记事本实例，添加、删除、清除、隐藏

<body>
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
               class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list">
                <div class="view">
                    <span class="index">{{ index+1 }}.</span>
                    <label>{{ item }}</label>
                    <button class="destroy" @click="remove(index)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{ list.length }}</strong> items left
      </span>
        <button v-show="list.length!=0" 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 app = new Vue({
        el: "#todoapp",
        data: {
            list: ["写代码", "吃饭饭", "睡觉觉"],
            inputValue: "好好学习,天天向上"
        },
        methods: {
            add: function () {
                this.list.push(this.inputValue);
            },
            remove: function (index) {
                console.log("删除");
                console.log(index);
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list = [];
            }
        },
    })
</script>
</body>

axios

axios必须先导入才可以使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息

axios回调函数中的this已经改变,无法访问到data中数据

把this保存起来,回调函数中直接使用保存的this即可

和本地应用的最大区别就是改变了数据来源

自定义参数可以让代码的复用性更高

methods中定义的方法内部，可以通过this关键字点出其他的方法

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    axios.get(地址?key=value&key2=values).then(
              function(response)
							{},
      				function(err)
							{}
			)     
      axios.post(地址,{key:value,key2:value2}).then(
            function(response)
            {},
            function(err)
            {}
      )

<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=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
            },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:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
            })
    }

</script>
</body>

<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 app = new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods: {
            getJoke:function(){
                // console.log(this.joke);
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                    // console.log(response)
                    console.log(response.data);
                    // console.log(this.joke);
                    that.joke = response.data;
                },function (err) {  })
            }
        },
    })

</script>
</body>

<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="queryWeather" />
            <button class="input_sub" @click="queryWeather">
                搜 索
            </button>
        </div>
        <div class="hotkey">
            <!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a>
              <a href="javascript:;" @click="clickSearch('上海')">上海</a>
              <a href="javascript:;" @click="clickSearch('广州')">广州</a>
              <a href="javascript:;" @click="clickSearch('深圳')">深圳</a> -->
            <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
        </div>
    </div>
    <ul class="weather_list">
        <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
            <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>
<script>
    new Vue({
        el: "#app",
        data: {
            city: "武汉",
            forecastList: [],
            hotCitys: ["北京", "上海", "广州", "深圳"]
        },
        methods: {
            queryWeather() {
                this.forecastList = [];
                axios
                    .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
                    .then(res => {
                        console.log(res);
                        this.forecastList = res.data.data.forecast;
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    .finally(() => { });
            },
            clickSearch(city) {
                this.city = city;
                this.queryWeather();
            }
        }
    });
</script>
</body>

<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' ref='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 @click="playMv(item.mvid)" v-if="item.mvid!=0"></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="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper" ref='comment_wrapper'>
                <h5 class='title'>热门留言</h5>
                <div class='comment_list'>

                    <dl v-for="item in hotComments">
                        <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" v-show="showVideo">
            <video ref='video' :src="mvUrl" controls="controls"></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 type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';



    // 实例化vue
    var app = new Vue({
        el: "#player",
        data: {
            // 搜索关键字
            query: '',
            // 歌曲列表
            musicList: [],
            // 歌曲url
            musicUrl: '',
            // 是否正在播放
            isPlay: false,
            // 歌曲热门评论
            hotComments: [],
            // 歌曲封面地址
            coverUrl: '',
            // 显示视频播放
            showVideo: false,
            // mv地址
            mvUrl: ''
        },
        // 方法
        methods: {
            // 搜索歌曲
            searchMusic() {
                if (this.query == 0) {
                    return
                }
                axios.get('/search?keywords=' + this.query).then(response => {
                    // 保存内容
                    this.musicList = response.data.result.songs;

                })

                // 清空搜索
                this.query = ''
            },
            // 播放歌曲
            playMusic(musicId) {
                // 获取歌曲url
                axios.get('/song/url?id=' + musicId).then(response => {
                    // 保存歌曲url地址
                    this.musicUrl = response.data.data[0].url
                })
                // 获取歌曲热门评论
                axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
                    // console.log(response)
                    // 保存热门评论
                    this.hotComments = response.data.hotComments

                })
                // 获取歌曲封面
                axios.get('/song/detail?ids=' + musicId).then(response => {
                    // console.log(response)
                    // 设置封面
                    this.coverUrl = response.data.songs[0].al.picUrl
                })

            },
            // audio的play事件
            play() {
                this.isPlay = true
                // 清空mv的信息
                this.mvUrl = ''
            },
            // audio的pause事件
            pause() {
                this.isPlay = false
            },
            // 播放mv
            playMv(vid) {
                if (vid) {
                    this.showVideo = true;
                    // 获取mv信息
                    axios.get('/mv/url?id=' + vid).then(response => {
                        // console.log(response)
                        // 暂停歌曲播放
                        this.$refs.audio.pause()
                        // 获取mv地址
                        this.mvUrl = response.data.data.url
                    })
                }
            },
            // 关闭mv界面
            closeMv() {
                this.showVideo = false
                this.$refs.video.pause()
            },
            // 搜索历史记录中的歌曲
            historySearch(history) {
                this.query = history
                this.searchMusic()
                this.showHistory = false;
            }
        },

    })

</script>
</body>

上一篇：每日优鲜供应链前端团队微前端改造
下一篇： Vue基础(2)（vue基础笔试题）

网站首页 > 编程文章正文

vue.js快速入门（vue.js入门教程）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 编程文章 正文

vue.js快速入门（vue.js入门教程）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 编程文章正文

取消回复欢迎你发表评论: