Vue的基本使用

Posted s593941

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的基本使用相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h2>{{ msg }}</h2>
    <h2>{{ 1+1 }}</h2>
    <h2>{{ {"name":"日天"} }}</h2>
    <h3>{{ person.name }}</h3>
    <h2>{{ 1>2? "真的":"假的" }}</h2>
    <p>{{ msg2.split("").reverse().join("") }}</p>
    <div>{{ text }}</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"呵呵",
            person:{
                name:"dasabi"
            },
            msg2:"hello vue",
            text:"<h2>ritian</h2>"
        }
    })
</script>
</body>
</html>

技术分享图片

 

1. v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text和v-html</title>
</head>
<body>
<div id="app">
    {{ msg }}
    <div v-text="msg"></div>
    <hr>
    <div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            //data中是一个函数,函数中return一个对象,可以是空对象,但不能不return
            return {msg:"<h2>ritian</h2>"}
        }
    })
</script>
</body>
</html>

 

2. v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if和v-show</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    {{ add(1,2) }}
    <button v-on:click = "handlerClick">隐藏</button>
    <div class="box" v-show = "isShow"></div>
    <div class="box2" v-if = "isShow"></div>
    <div v-if = "Math.random() > 0.5">有了</div>
    <div v-else>没了</div>
</div>

<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                msg:"<h2>ritian</h2>",
                num:1,
                isShow:true
            }
        },
        methods:{
            add(x,y){
                console.log(this.num);
                return x + y;
            },
            handlerClick(){
                console.log(this);
                this.isShow = !this.isShow;
            }
        }
    })

</script>
</body>
</html>

 

3. v-bind和v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind和v-on</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- v-bind 标签中的所有属性 img标签sr alt, a标签的href title id class  -->
    <button v-on:click = "handlerChange">切换颜色</button>
    <img v-bind:src="imgSrc" v-bind:alt="msg">
    <div class="box" v-bind:class = "{active:isActive}"></div>
</div>
<script src="./vue/dist/vue.js"></script>
<script>
    // v-bind和v-on的简便写法:   v-bind为:,v-on为@
    new Vue({
        el:"#app",
        data(){
            return {
                imgSrc:"./img/1.jpg",
                msg:"美女",
                isActive:true
            }
        },
        methods:{
            handlerChange(){
                this.Active = !this.isActive;
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
    })
</script>
</body>
</html>

 

4. v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .avtive{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
<ul v-if = "data.status === ‘ok‘">
    <li v-for = "(item,index) in data.users" :key = "item.id" >
        <h3>{{ item.id }} -----------{{ item.name }} ----------{{ item.age }}</h3>
    </li>
</ul>
    <div v-for = "(value,key) in peron">{{ key }} --------{{ value }}</div>
</div>
<script src="./vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                data:{
                    status:"ok",
                    users:[
                        {id:1,name:"aaa",age:10},
                        {id:2,name:"bbb",age:20},
                        {id:3,name:"ccc",age:30},
                    ]
                },
                person:{
                    name:"ddd"
                }
            }
        },
        methods:{}
    })
</script>
</body>
</html>

 

5. vue中使用ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-ajax</title>
    <style>
        span.active {
            color: red;
        }
    </style>
</head>

<body>
<div id="app">
    <div>
        <span @click="handlerClick(index,category.id)" v-for="(category,index) in categoryList" :key="category.id"
              :class="{active:currentIndex == index}">{{ category.name }}</span>



    </div>
</div>

<script src="vue/dist/vue.js"></script>
<script src="vue/dist/jquery.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                categoryList: [],
                currentIndex: 0
            }
        },
        methods: {
            handlerClick(i, id) {
                this.currentIndex = i;
                $.ajax({
                    url: `https://www.luffycity.com/api/v1/courses/?sub_category=${id}`,
                    type: "get",
                    success: (data) => {
                        var data = data.data;
                        console.log(data);
                    }
                })
            }
        },
        created() {
            $.ajax({
                url: "https://www.luffycity.com/api/v1/course_sub/category/list/",
                type: "get",
                success: (data) => {
                    if (data.error_no === 0) {
                        var data = data.data;
                        let obj = {
                            id: 0,
                            name: "全部",
                            category: 0
                        };
                        this.categoryList = data;
                        this.categoryList.unshift(obj)
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }
    })
</script>
</body>
</html>

 

6. 音乐播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <style>
        ul li.active {
            background-color: #f0ad4e;
        }
    </style>
</head>
<body>
<div id="music">
    <!-- @ended 播放完成会自动调用该方法 -->
    <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = "nextHandler"></audio>
    <ul>
        <li @click = "songHandler(index)" v-for = "(item,index) in musicData" :key = "item.id"  :class = "{active:index === currentIndex}">
            <h2>歌手: {{ item.author }}</h2>
        <p>歌名: {{ item.name }}</p>
        </li>
        <button @click = "prevHandler">上一首</button>
        <button @click = "nextHandler">下一首</button>
        <button @click = "suiji">随机播放</button>
        <button @click = "xunhuan">单曲循环</button>

    </ul>
</div>

<script src="vue/dist/vue.js"></script>
<script>
    var musicData = [
        {
            id: 1,
            name: "于荣光-少林英雄",
            author: "于荣光",
            songSrc: "./static/于荣光 - 少林英雄.mp3"
        },
        {
            id: 2,
            name: "Joel Adams - Please Dont Go",
            author: "Joel Adams",
            songSrc: "./static/Joel Adams - Please Dont Go.mp3"
        },
        {
            id: 3,
            name: "MKJ - Time",
            author: "MKJ",
            songSrc: "./static/MKJ - Time.mp3"
        },
        {
            id: 4,
            name: "Russ - Psycho (Pt. 2)",
            author: "Russ",
            songSrc: "./static/Russ - Psycho (Pt. 2).mp3"
        },
    ];
    new Vue({
        el: "#music",
        data() {
            return {
                musicData: [],
                currentIndex: 0
            }
        },
        methods: {
            songHandler(i) {
                this.currentIndex = i;
            },
            nextHandler() {
                this.currentIndex++;
            },
            prevHandler() {
                this.currentIndex--;
            },
            suiji(){
                this.currentIndex = Math.ceil(Math.random()*5);
            },
            xunhuan(){
                this.currentIndex = this.currentIndex
            }
        },
        created() {
            this.musicData = musicData
        }
    })
</script>
</body>
</html>

 

7. 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    <p>{{ msg }}</p>
    <p>{{ myMsg }}</p>
    <button @click = "clickHandler">修改</button>
</div>

<script src="./vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex",
                age:18
            }
        },
        created(){
            setInterval(() => {

            })
        },
        methods:{
            clickHandler(){
                this.msg = "wusir";
                this.age = 20;
            },
        },
        computed:{
            myMsg:function () {
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })
</script>
</body>
</html>

 

以上是关于Vue的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段13——Vue的状态大管家