vue基础1

es6 的let和const

//<script>
    // console.log(a);            /* undefined */
    // {
    //     var a = 1;
    //     var a = 2;
    //
    // }
    // console.log(a)              /* 2 */



    // console.log(a);            /* undefined */
    // {
    //     let a = 1;
        // let a = 2;               // Identifier 'a' has already been declared

    // }
    // console.log(a)              /* 2 */
    // let: 1.局部作用域，2.不会存在变量提升 3.变量不能重复声明


    // var a = [];
    // for (var i = 0; i < 10; i++) {
    //     a[i] = function () {
    //         console.log(i);
    //     };
    // }
    // a[2]();                            // 10


    // var a = [];
    // for (let i = 0; i < 10; i++) {
    //     a[i] = function () {
    //         console.log(i);
    //     };
    // }
    // a[2]();                            // 2

    // console.log(a);
   //      {
   //      const a = 'a';
   //      console.log(a);
   //      a = 10;
   //     const a = 10;
   //  }
   // console.log(a);
    // const  1.局部作用域 2.不会存在变量提升 3.不能重复声明，只声明常量 不可变的量

//</script>

　

es6的箭头函数
<script>

    // function add(x){
    //     return x
    // }
    // add(5);                       //5

   // let add = function (x) {
   //     return x;
   // };
   // console.log(add(10));           //10

   let add2 = (x)=>{
       return x
   };
   console.log(add2(20));             //20


   let add3 = x => x;
   console.log(add3(30));             //30

</script>

　　

es6 的 this 指向问题
    // let person = {
    //     name: "日天",
    //     age: 30,
    //     fav: function () {
    //         console.log(this);             //this指向 当前的对象 person
    //         console.log(this.name);
    //     }
    // };
    // person.fav()


    //  let person2 = {
    //     name: "日天2",
    //     age: 30,
    //     fav:  () => {
    //         console.log(this);           //this指向 发生了改变。this指向 定义person2的父级对象(上下文/window)
    //         console.log(this.name);
    //     }
    // };
    //
    // person2.fav()


//    对象的单体模式
//         let person3 = {
//             name:'日天',
//             fav(){
//                 console.log(this);            // person 对象
//             }
//             /* 相当于
//            fav:function () {
//                 console.log(this)
//            }*/
//         };
//         person3.fav();

关于this指向的问题，与vm实例没有任何关系。而是与箭头函数和普通函数的区别。
给大家总结两点：
1、es5的普通函数，this指向是指向了调用者，比如vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的，所以this指向vm。 
2、箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window. 

　

es6 的类
    // class Person{
    //     constructor(name='alex',age=18){
    //         this.name = name;
    //         this.age = age;
    //     }
    //     showname(){
    //         console.log(this.name);
    //     }
    //     showage(){
    //         console.log(this.age)
    //     }
    // }
    //
    // let V = new Person();
    // V.showname();
    // V.showage()

vue 的基本语法：
<div id="app">
    <!--模板语法-->
    <h2>{{ msg }}</h2>                                    
    <h3>{{ 'hhahda' }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2? '真的': '假的' }}</h2>
    <p>{{ msg2.split('').reverse().join('') }}</p>
    <div>{{ text }}</div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //2.实例化对象
    new Vue({
        el:'#app',   //绑定目标id
        data:{
            //数据属性
            msg:'黄瓜',
            person:{
                name:'wusir'
            },
            msg2:'hello Vue',
            text:'<h2>日天</h2>'
        }
    });
</script>

v-text 和 v-html
<div id="content">
    {{ msg }}                         <!-- <h2>alex</h2> -->
    <div v-text="msg"></div>         <!-- <h2>alex</h2> -->
    <div v-html="msg"></div>          <!-- alex -->
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    new Vue({
        el:'#content',
        data () {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                msg:"<h2>alex</h2>"
            }
        }
    })

v-text相当于innerText
v-html相当于innerHTML

　　

v-if 和 v-show
<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">
        有了
    </div>
    <div v-else>
        没了
    </div>

</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //数据驱动视图
    new Vue({
        el:'#content',
        data(){
            return {
                isShow:true
            }
        },
        methods:{
            add(x,y){
                return x + y
            },
            handlerClick(){
                this.isShow = !this.isShow
            }
        }
    })

v-if和v-show的区别:
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，
则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

　　

v-bind 和 v-on
<div id="app">
     <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>
<!--1.引包-->
<script src='./vue.js'></script>
    new Vue({
        el: '#app',
        data() {
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
    })

v-bind可以绑定标签中任何属性,v-on 可以监听js中所有事件

简写：
v-bind:src  等价于   :src
v-on:click  等价于   @click

　

v-for
<div id="app">
    <ul v-if="data.status === 'ok'">
        <!--v-for的优先级是最高的     diff算法-->
        <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 person'>
        {{ key }}-----{{ value }}
    </div>
</div>

<!--1.引包-->
<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: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person:{
                    name:'alex'
                }
            }
        },
        methods: {}

    })

v-for可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

　　

轮播图：
<div id="app">
    <img :src="images[currentIndex].imgSrc" alt="">
    <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>
    new Vue({
        el: '#app',
        data() {
            return {
                images: [
                    {id: 1, imgSrc: './images/1.jpg'},
                    {id: 2, imgSrc: './images/2.jpg'},
                    {id: 3, imgSrc: './images/3.jpg'},
                    {id: 4, imgSrc: './images/4.png'}

                ],
                currentIndex: 0
            }
        },
        methods: {
            nextHandler(e) {
                this.currentIndex++;
                if (this.currentIndex === 4) {
                    this.currentIndex = 0;
                }
            },
            prevHandler(e) {
                if (this.currentIndex === 0) {
                    this.currentIndex = 4;
                }
                this.currentIndex--;
            },

        },
        // 组件创建完成， ajax   vue的钩子函数
        // 自动轮播
        created() {
            //this指向问题  能用箭头函数 不要用匿名函数
            setInterval(() => {
                this.currentIndex++;
                if (this.currentIndex == 4) {
                    this.currentIndex = 0;
                }
            }, 2000);
        }
    })
</script>

　　

ajax获取后台接口数据

<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>

        <ul>
            <li v-for='(data) in sub_category' :key='data.id'>{{data.name}}</li>
        </ul>
    </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,
                sub_category: []
            }
        },
        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;
                        this.sub_category = data
                    }

                })

            }

        },
        //组件创建完成， ajax   vue的钩子函数
        created() {
            //this指向问题  能用箭头函数 不要用匿名函数
            $.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)          // unshift 在列表的开头添加，shift 在列表的开头删除

                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    })
</script>

　　

音乐播放器：

<div id="app">
    <!--@ended 播放完成 会自动调用该方法-->
    <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></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 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:'#app',
        data(){
            return{
                musicData:[],
                currentIndex:0
            }
        },
        methods:{
            songHandler(index){
                this.currentIndex = index
            },
            nextHanlder(){
                this.currentIndex++
            }
        },
        created(){
            this.musicData = musicData
        }
    })

　　

watch监听器

<div id="app">
        <p>{{ msg }}</p>
        <p>{{age}}</p>
        <button @click = 'clickHandler'>修改</button>
    </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) {
                    if (value === 'wusir'){
                        console.log(value)
                        alert(1);
                       this.msg = '大武sir'
                    }
                },
                'age' :function (value) {
                    
                }
            }
        })
    </script>

　　

计算属性

<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: "alex",
                age: 18
            }
        },
        methods: {
            clickHandler() {
                //this的指向就是当前对象(Vue)
                this.msg = "wusir";
                this.age = 20;
            },
        },
        computed: {
            myMsg: function () {
//                    计算属性默认只有getter方法
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })
</script>