Vue-01

时间：2020-08-20 18:22:23 阅读：65 评论：0 收藏：0 [点我收藏+]

标签：jquery super 问题 dsd hello 作用域 meta sub 子函数

一丶简介:

ES6
vue基本使用
v-text 和 v-html
v-if 和 v-show
v-for
轮播图
vue使用ajax
音乐播放器
watch侦听器
计算属性
计算属性版-music

二丶示例

ES6基本用法

1.1 变量的定义 let 和 const
1.1.1 let定义变量
- 没有变量提升
- 不能重复定义
- 块级作用域

1.1.2 const定义变量
- 没有变量提升
- 带来了块级作用域
- 不能重复定义
- 定义之后不能修改
- 定义的时候必须赋值

1.2 模板字符串
1.2.1 ``反引号进行字符串的拼接(tab键上面的)
1.2.2 用${}来存储变量

1.3 数据的解构和赋值
1.3.1 数组的解构和赋值
1.3.2 对象的解构和赋值
1.3.3 简单的用途：数据的交换

1.4 函数的扩展
1.4.1 默认值参数
1.4.2 箭头函数
- 箭头函数的this指向定义时的作用域
- 普通函数的this指向调用者的作用域

1.5 类
1.5.1 class关键字定义一个类
- 必须要有constructor方式（构造方法），如果没有，constructor(){}
- 必须使用new来实例化，否则报错

1.5.2 类的继承
- 必须在子类的constructor方法里面写super方法

1.6 模块化编程

1.7 对象的单体模式
- 解决了箭头函数的this指向问题　　　

　　2. Vue

　　　　2.1 vue基本使用

<body>
<div id="app">
    <!--    模板语法-->
    <h2>{{ msg }}</h2>
    <h3>{{ ‘sadsda‘}}</h3>
    <h3>{{1+1*3}}</h3>
    <h4>{{ {‘name‘:‘alex‘} }}</h4>
    <!--    插对象需要注意格式空起格子,不然代码不清除3个{}是什么意思-->
    <h5>{{ person.name }}</h5>
    <h2>{{1>2? ‘真的‘:‘假的‘}}</h2>
    <p>{{ msg2.split(‘‘).reverse().join(‘‘) }}</p>
</div>
<!--1.引包-->
<script src="./vue.js"></script>
<script>
    // 2 实例化对象
    // el 和data固定写法需要记住
    new Vue({
        el: ‘#app‘, // 绑定那块地
        data: {
            // 数据属性  种子
            msg: ‘黄瓜‘,
            person:{
                name:‘wusir‘
    } ,     msg2:‘hello Vue‘
        }

    });

</script>

2.2 v-text和v-html

<body>
<div id="content">
    {{ msg }}
    <div v-text="msg"></div>
    <div v-html="msg"></div>

</div>
<script src="./vue.js"></script>
<script>                
    new Vue({
        el: ‘#content‘,
        data() {
            //data中是一个函数 函数中return一个对象,可以是个空对象,但不能不return
            return {
                msg: ‘<h2>alex</h2>‘
            }
        }
    })
</script>
</body>

2.3 v-if和v-show

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
            background-color: red;
        }
        .box2 {
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>


<div id="content">
    {{ add(2,3) }}
    <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">
        是true,显示我
    </div>
    <div v-else>
        是flase,显示我
    </div>

</div>

<script src="./vue.js"></script>
<!--数据驱动-->
<script>
    // new Vue({
    //     el: "#app"
    // });
    new Vue({
        el: ‘#content‘,
        data() {
            //data中是一个函数 函数中return一个对象,可以是个空对象,但不能不return
            return {
                msg: ‘<h2>alex</h2>‘,
                isShow: true
            }
        },
        methods: {
            add(x, y) {
                return x + y
            },
            handlerClick() {
                //数据驱动
                console.log(this);
                //取反,哈哈哈
                this.isShow = !this.isShow
            }
        }
    });
    // v-if 和v-show
    //     v-if 是删除和重建
    //     v-show 基于CSS进行显示,隐藏切换
    //     一般来说,v-if又更高的切换开销,v-show有更高的初始渲染开销,
    //     如果频繁的切换,则使用v-show比较好, 如果在运行时条件很少去改变,则使用v-if较好
</script>
</body>

2.4 v-bind 和 v-on

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
            background-color: red;
        }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>
<!--总结:v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class-->
<!--     v-on 可以监听 js中的所有事件-->

<div id="app">
    <!--    <button v-on:click = ‘handlerChange‘>切换颜色</button>-->
    <!--&lt;!&ndash;    v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class&ndash;&gt;-->
    <!--    <img v-bind:src="imgSrc" v-bind:alt="msg">-->
    <!--    <div class="box" v-bind:class="{active:isActive}"></div>-->

    <!--    //v-bind和v-on的简便写法-->
    <button @mouseenter=‘handlerChange‘ @mouseleave="handlerLeave">切换颜色</button>
    <!--    v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class-->
    <img :src="imgSrc" :alt="msg">
    <div class="box" :class="{active:isActive}"></div>
</div>

<script src="./vue.js"></script>
<!--数据驱动视图  设计模式    MVVM Model View ViewModel-->
<script>
    // v-bind和v-on的简便写法 :  @
    new Vue({
        el: ‘#app‘,
        data() {
            return {
                imgSrc: ‘./3.jpg‘,
                msg: ‘校花‘,
                isActive: true
            }
        },
        methods: {
            handlerChange() {
                // this.isActive = !this.isActive
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
    })

2.5 v -for

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
            background-color: red;
        }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>

<div id="app">
    <!--        注意:这里ok需要加引号-->
    <ul v-if="data.status == ‘ok‘">
        <!--注意:这里需要绑定key 如果有id就绑定id,没有id就绑定index-->
        <!--  v-for的优先级是最高的  diff算法   这里即用了v-for 又用了v-bind,-->
        <li v-for=‘(item,index) in data.users‘ :key="item.id">
            <h3>{{ item.id }}-- {{ item.name }} -- {{ item.age }}</h3>
        </li>
    </ul>
    <!--    主要，如果想要Key,(value,key)括起来，前面是value,后面是Key-->
    <div v-for="(value,key) in person">
        {{ key }}- {{ value }}
    </div>
</div>

<script src="./vue.js"></script>

<script>

    new Vue({
        el: ‘#app‘,
        data() {
            return {
                data: {
                    status: ‘ok‘,
                    users: [
                        {id: 1, name: ‘alex‘, age: 18},
                        {id: 2, name: ‘wusir‘, age: 128},
                        {id: 3, name: ‘yuan‘, age: 38},
                    ]
                },
                person: {
                    name: ‘wind‘
                }

            }
        },
        methods: {}
    })
</script>
</body>

2.6 轮播图

</head>
<body>
<div id="app">
    <img :src="images[currentIndex].imgSrc"  @click="imgHandler">
    <br>
    <button @click=‘prevHandler‘>上一张</button>
    <button @click=‘nextHandler‘>下一张</button>

</div>

<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: ‘#app‘,
        data() {
            return {
                images: [
                    {id: 1, imgSrc: ‘./imges/a.jpg‘},
                    {id: 2, imgSrc: ‘./imges/b.jpg‘},
                    {id: 3, imgSrc: ‘./imges/c.jpg‘},
                    {id: 4, imgSrc: ‘./imges/d.jpg‘},
                ],
                currentIndex: 0
            }
        },
        methods: {
            nextHandler() {
                this.currentIndex++;
                // 更改图片地址
                if (this.currentIndex > 3) {
                    this.currentIndex = 0;
                }
            },
            prevHandler() {
                this.currentIndex--;
                if (this.currentIndex < 0) {
                    this.currentIndex = 3;
                }
            },
            imgHandler(e) {
                // e.target 当前目标对象
                console.log(e.target);
                console.log(this)
            }
        },
        //这是一个方法，跟data和methods是同级, Vue的钩子函数
        // 组件创建完成，可以立即发送ajax请求
        created() {
            // 方法一
            // this指向问题，能用箭头函数,其指向当前的Vue,不要用匿名函数function()，其指向的Windows
            setInterval(() => {
                // console.log(this);
                this.currentIndex++;
                // 更改图片地址
                if (this.currentIndex > 3) {
                    this.currentIndex = 0;
                }
            }, 1000);
            // 方法二，使用匿名函数function(),声明this，保存起来
            // let _this =this;
            // setInterval(function(){
            //      console.log(_this);
            //  },1000);
        }
    })
</script>
</body>

2.7 vue使用ajax

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

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

                    }

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

2.8 音乐播放器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active{
            background-color: darkcyan;
        }
    </style>
</head>
<body>


<div id="music">
<!--    @ended方法在mp3当前歌曲播放结束后自动调取该方法-->
    <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>
    </ul>

</div>
<script src="./vue.js"></script>
<script>
      var musicData1 = [{
        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 ++;
            }
        },
        created(){
            this.musicData =musicData1
        }
    })
</script>
</body>
</html>

2.9 watch侦听器

</head>
<body>
<div id="app">
    <button  @click="ClickHandler">修改</button>
    <p>{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data() {
            return {
                msg: ‘alex‘,
                age:18
            }
        },
        methods: {
            ClickHandler() {
                this.msg = ‘wusir‘
            }
        },
        watch: {
            //watch 监听单个属性,如果想监听多个属性,声明多个属性
            ‘msg‘: function (value) {
                console.log(value);
                if (value===‘wusir‘){
                    alert(666);
                    this.msg = ‘常建‘
                }
            },
            //可以监听data里面多个属性
            ‘age‘:function (v) {
                console.log(v)
            }
        }
    })
</script>
</body>

2.10 计算属性 computed

<body>
<div id="app">
    <button  @click="ClickHandler">修改</button>
    <p>{{ myMsg }}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: ‘#app‘,
        data() {
            return {
                msg: ‘alex‘,
                age:18,
            }
        },
        methods: {
            ClickHandler(){
                console.log(this);
                this.msg = ‘wusir‘;
                this.age = 22
            }
        },
        computed:{
            // 计算属性可以监听单个和多个比watch方便的多
            // myMsg名字可以自定义,随便起
            myMsg:function () {
                // 计算属性默认只有getter方法
                // 这里使用了tab上面的反引号
                console.log(this);
                return `我的名字${this.msg},年龄是${this.age}`
            }
        },

        created(){
             // 在js里面一个方法在套一个方法,称为小闭包,this会发生改变,这时建议用箭头函数
            setInterval( ()=> {
                console.log(this)
            })
        }
    })
</script>
</body>

2.11 计算属性版-music

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li.active {
            background-color: darkcyan;
        }
    </style>
</head>
<body>


<div id="music">
    <!--    @ended方法在mp3当前歌曲播放结束后自动调取该方法-->
    <audio :src="currentSong" 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>
    </ul>

</div>
<script src="./vue.js"></script>
<script>
    var musicData1 = [{
        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
            }
        },
        computed: {
            currentSong() {
                return this.musicData[this.currentIndex].songSrc
            }
        },

        methods: {
            songHandler(i) {
                this.currentIndex = i;
            },
            nextHandler() {
                this.currentIndex++;
            },

        },
        created() {
            this.musicData = musicData1
        },

    })
</script>
</body>

Vue-01

标签：jquery super 问题 dsd hello 作用域 meta sub 子函数

原文地址：https://www.cnblogs.com/TodayWind/p/13520570.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行