vue基础 - 《田云的博客笔记》

引用
数据单项绑定
双向绑定 v-model
事件绑定 v-on:click
阻止默认行为 event.preventDefault();
阻止事件冒泡 event.stopPropagation();
事件修饰符
按键修饰符
v-text与v-html
属性绑定：v-bind
遍历v-for
判断
生命周期测试
select特殊处理

引用

<!--vue-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<!--异步请求插件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

数据单项绑定

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world!'
        }
    })
</script>

双向绑定 v-model

<body>
    <div id="app">
        用户名：<input type="text" v-model="user.username"><br/>
        密码：<input type="text" v-model="user.password"><br/>
        <input type="button" v-on:click="fun" value="按钮">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                username:"test",
                password:"123"
            }
        },
        methods:{
            fun:function(){
                this.user.username="haha";
                this.user.password="1234";
            }
        }
    });
</script>

事件绑定 v-on:click

<button v-on:click="greet">Greet</button>
methods: {
        greet: function() {
            alert(this.message)
        }
    }

阻止默认行为 event.preventDefault();

<body>
    <div id="app">
        <input type="text" v-on:keydown="fun">
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        methods:{
            fun:function(){
                var keyCode = event.keyCode;
                if(!(keyCode >= 48 && keyCode <= 57)) {
                    //2.阻止默认行为执行
                    event.preventDefault();
                }
            }
        }
    })
</script>

阻止事件冒泡 event.stopPropagation();

<body>
    <div id="app">
        <div @mouseover="fun1" id="div">
            <textarea @mouseover="fun2">这是一个文件域</textarea>
        </div>
    </div>
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        methods:{
            fun1:function(){
                alert("div......");
            },
            fun2:function(){
                alert("textarea......");
                event.stopPropagation();
            }
        }
    });
</script>

事件修饰符

取消按键和鼠标事件 prevent

执行fun，但是不会输入任何东西

<input type="text" v-on:click.prevent="fun">

不会提交

<form  v-on:submit.prevent action="http://www.itcast.cn" >
    <input type="submit" value="Go"> 
</form>

取消冒泡效果

v-on:mouseover.stop

按键修饰符

自定义任何按键来触发指定事件,比如enter、space q w e ……

<body>
    <div id="app">
        <input type="text" @keydown.enter="fun"/>
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        methods:{
            fun:function(){
                alert("aaa");
            }
        }
    });
</script>

v-text与v-html

<body>
    <div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:"<h1>Hello Vue!</h1>"
        }
    });
</script>

属性绑定：v-bind

<body>
    <div id="app">
        <font v-bind:color="rs1">hello world</font>
        <font :color="rs2">hello itcast</font>
        <a href="http://www.itcast.cn/index/id">itcast1</a>    
        <a v-bind="{href:'http://www.itcast.cn/index/'+id}">itcast</a>                    
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            rs1:"red",
            rs2:"green",
            id:1
        }
    });
</script>

遍历v-for

数组

<body>
    <div id="app">
        <ul>
            <li v-for="(value,index) in arr">{{value}} and {{index}}</li>
        </ul>
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            arr:['a','b','c','d']
        }
    });
</script>

对象

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in product">{{key}} and {{value}}</li>
        </ul>
    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            product:{id:1,name:"手机",price:1000}
        }
    });
</script>

判断

v-if

v-if="expression"  
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> 为false时，元素被删除
<h1 v-else>Sex: {{ sex }}</h1>  v-else元素必须立即跟在v-if后面

v-show
v-show指令和if一样，只是把style=”display:none”

生命周期测试

<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created: function() {
            showData('创建vue实例后', this);
        },
        beforeMount: function() {
            showData('挂载到dom前', this);
        },
        mounted: function() {
            showData('挂载到dom后', this);
        },
        beforeUpdate: function() {
            showData('数据变化更新前', this);
        },
        updated: function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy: function() {
            vm.test = "3333";
            showData('vue实例销毁前', this);
        },
        destroyed: function() {
            showData('vue实例销毁后', this);
        }
    });
    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }
    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }
    //vm.message = "good...";
    vm.$destroy(); 
</script>

select特殊处理

一般情况，我们只需要select的value，不需要text，这个直接绑定即可。

下面是需要text的情况。

绑定一个对象，而不是id
添加watch赋值（watch会有极短的时间延迟）

<div id="app">
    <select v-model="user" @change="userChange">
        <option v-for="(value,key) in users"
                :key="key" :value="value"
        >{{value.name}}
        </option>
    </select>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {},
            users: [],
            model: {
                id: 0,
                name: '',
                age: 20
            }
        },
        watch: {
            user(newUser, oldUser) {
                this.model.id = newUser.id;
                this.model.name = newUser.name;
            }
        },
        methods: {
        },
        mounted() {
            axios.get("http://soft.tianyunperfect.cn:3000/mock/40/test").then(res => {
                this.users = res.data.data;
            }).catch(e => {
                console.log(e);
            });
        }
    });
</script>

这短短的一生我们最终都会失去，不放大胆一点，爱一个人、攀一座山、追一个梦！