Vue笔记

#Vue学习

1、双向绑定

1.1、绑定文本框

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

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ''
        }
    });
</script>

1.2、绑定单选按钮

<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="xingbie">男
    <input type="radio" name="sex" value="女" v-model="xingbie">女
    <p>你的性别是：{{xingbie}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            xingbie: ''
        }
    });
</script>

1.3、小结

​ 通过dl、v-model来进行双向绑定

2、定义Vue组件

2.1、component

<div id="app">
    <name></name>
</div>

Vue.component("name",{
    template: '<li>Hello</li>' +
    '<li>World</li>' +
    '<li>!</li>'
});

2.2、props

<div id="app">
    <name v-for="item in items" v-bind:item="item"></name>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component("name",{
        props: ["item"],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
       el: '#app',
        data: {
           items: ["java","Linux"]
        }
    });
</script>

​ 通过html来交互，凡事先考虑先绑定html。

3、Axios异步通信

{
  "name": "二次元程序员",
  "url": "https://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "平阳",
    "city": "浙江温州",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilbil",
      "url": "https://www.bilbil.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com"
    }
  ]
}

<div id="vue">
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">百度</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
       el: '#vue' ,
        data(){
           return{
               //请求的返回参数，必须和json字符串一样
               info: {
                   name: null,
                   address: {
                       street: null,
                       city:null,
                       country:null
                   },
                   url: null
               }
           }
        },
        mounted(){//钩子函数 链式编程 ES6新特性
           axios.get('../json/data.json').then(response=>(this.info=response.data))
        }
    });
</script>

4、计算属性

<div id="vue">
    <p>currentTime1:{{currentTime1()}}</p><td />
    <p>currentTime2:{{currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
       el: '#vue' ,
        data: {
           message: "hello"
        },
        methods: {
           currentTime1: function (){
               return Date.now();//返回一个时间戳
           }
        },
        computed: {//计算属性: methods、computed 方法名不能重名，重名之后，只会调用methods的方法
            currentTime2: function (){//和methods的不同结果会缓存在内存里
                return Date.now();//一些复用的数据可以使用computed方式
            }
        }
    });
</script>

5、slot”插槽“

​ 可以实现数据动态输入

<div id="vue">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    })

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    }),
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
       el: '#vue' ,
        data: {
           title: "秦疆课程",
           items: ['狂神说java','狂神说前端','狂神说Linux']
       }
    });
</script>

5.1、按钮绑定

<div id="vue">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :item="item,index"
                    @remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
            </div>'
    })

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    }),
    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}-----{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                //this.$emit 自定义事件分发
                this.$emit('remove', index);
            }
        }
    });

    var vm = new Vue({
       el: '#vue' ,
        data: {
           title: "秦疆课程",
           items: ['狂神说java','狂神说前端','狂神说Linux']
       },
        methods: {
           removeItems: function (index){
               this.items.splice(index,1);//一次删除一个元素
           }
        }
    });
</script>

5.2、小结

​ 在html绑定js事件中，绑定方法事件使用@、而绑定组件使用：

5.3、Object.defineProperty

let number = 18
let person = {
    name: '张三',
    sex: '男'
}

Object.defineProperty(person,'age',{
    //value: 18,
    //enumerable: true,//控制属性是否可以枚举，默认值是flase
    //writable: true,//控制属性是否可以被修改，默认值是flase
    //configurabl: true//控制属性是否可以杯删除，默认值是flase
    
    //当有人读去person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        console.log('有人读取age属性了')
        return number
    },
    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是', value)
        number = value
    }
})

5.4、事件修饰符

<style>
    *{
        magin-top: 5px;
    }
    .demo1{
        height: 50px;
        background-color: skyblue;
    }
    .box1{
        padding: 5px;
        background-color: skyblue;
    }
    .box2{
        padding: 5px;
        background-color: orange;
    }
</style>
<div id="root">
    <!-- 阻止默认事件（常用） -->
    //可以阻止href这个链接
    <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
	
	<!-- 阻止事件冒泡（常用） -->
	//让弹窗值出现一次
	<div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
	<div>
        
    <!-- 事件只触法一次（常用） -->    
    //弹窗只会出现一次
    <button @click.stop="showInfo">点我提示信息</button>
        
    <!-- 使用事件的捕获模式 -->       
    <div class="box1" @click.capture="showMsg(1)">
        div1
		<div class="box2" @click="showMsg(2)">
            div2
		</div>
	</div>
	<!-- 只有event.target是当前操作的元素时才触发事件： --> 
	//触发事件和本身相关才会执行
	<div class="demo1" @click.self="showInfo">
		<button @click="showInfo">点我提示信息</button>
    <div> 
<div>             

<script type="text/javascript">
    Vue.config.productionTip = flase//阻止vue在启动时生成生产提示

	nwe Vue({
        el:'#root',
        data:{
            name: 'java'
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
                console.log(e.target)
            },
            showMsg(msg){
                console.log(msg)
            }
        }
    })