【日常学习】Vue入门-CFANZ编程社区

在这里插入图片描述

文章目录

一、Vue简介

1.1 简介

1.2 MVVM 模式的实现者——双向数据绑定模式

在这里插入图片描述

1.3 其它 MVVM 实现者

1.4 为什么要使用 Vue.js

1.5 Vue.js 的两大核心要素

1.5.1 数据驱动

在这里插入图片描述

1.5.2 组件化

二、Vue入门

2.1 vue 初体验

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ name }}
        <hr>
        <!-- v-model表示双向绑定 -->
        <input type="text" v-model="name">
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        //组件化编程支持的data写法
        data(){
            return{
                name: 'jack'
            }
        }
    });
</script>
</html>

2.2 基本指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
<div id="app">
    <p v-text="name"></p>

    <p v-text="htmlText"></p>

    <p v-html="htmlText"></p>

    <!--<a v-bind:href="url">v-bind百度</a>-->
    <a :href="url">v-bind百度</a>

    <p v-if="score > 90">优秀</p>
    <p v-else-if="score > 60">及格</p>
    <p v-else>不及格</p>

    <ul>
        <li v-for="user in users">
            {{user.id}} -- {{user.username}}
        </li>
    </ul>
    <hr color="red">
    <!-- dom树中有该标签 -->
    <div v-show="score > 100">
        v-show成绩大于100
    </div>
    <!-- dom树中无该标签 -->
    <div v-if="score > 100">
        v-if成绩大于100
    </div>

    <button @click="show">点击</button>
</div>
</body>

<script>

    new Vue({
        el: '#app',

        data(){
            return{
                name:'张三',
                score:100,
                htmlText:'<a href="http://www.baidu.com">百度</a>',
                url:"http://www.baidu.com",
                users:[
                    {id:1001,username:'jack'},
                    {id:1002,username:'tom'},
                    {id:1003,username:'lucy'}
                ]
            }
        },
        methods:{
            show(){
                // 如果method中要使用 vue data中的数据，都需要带上this
                alert(this.name);
            }
        }
    })
</script>
</html>

2.3 跑马灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入官方js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>

<div id="app">

    <input type="button" value="move" @click="move">
    <input type="button" value="stop" @click="stop">

    <h1><font color="blue">{{ msg }}</font></h1>
</div>


</body>
<script>

    //var arr = [11,22,33,44,55];

    // arr.forEach(function (item) {
    //         if(item>20){
    //             alert(item+"--")
    //         }
    // })

    // arr.forEach(item => {
    //     if(item>20){
    //         alert(item+"++")
    //     }
    // })

    // var item = arr.filter(item => item>20)
    // alert(item)

    new Vue({

        el:"#app",

        data(){
            return{
                msg:"中国移动通信",
                id:null
            }
        },

        methods:{

            move(){

               if(this.id!=null){
                   return;
               }

               this.id = setInterval( () => {
                    var start = this.msg.substring(0,1);//中
                    var end = this.msg.substring(1);//国移动通信

                    this.msg = end + start;
                },300)
            },

            stop(){
                clearInterval(this.id);
                this.id=null;
            }
        }
    })


</script>
</html>

2.4 设置全名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入官方js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>

<div id="app">

    FirstName:<input type="text" v-model="firstName"><br>
    LastName:<input type="text" v-model="lastName"><br>
    FullName1(单向数据绑定):<input type="text" v-model="fullName1"><br>
    FullName2(单向数据绑定):<input type="text" v-model="fullName2"><br>
    FullName3(双向数据绑定):<input type="text" v-model="fullName3"><br>

</div>

</body>

<script>

    new Vue({

        el: "#app",

        data() {
            return {
                firstName: '',
                lastName: '',
                fullName2: '',
            }
        },
        //计算属性
        computed: {
            //定义了回调方法，没有显示调用，会触发
            //1.计算属性的值，不用再data中定义，直接用
            //2.计算属性对应一个回调方法
            //3.触发时机：只要牵扯到属性发生变化，该方法就会触发
            //4.在使用时，首先需要用到属性局部赋值

            // fullName1:function () {
            //
            //     let firstName = this.firstName;
            //     let lastName = this.lastName;
            //
            //     return firstName + "  " + lastName;
            // },

            fullName1: {
                get() {
                    let firstName = this.firstName;
                    let lastName = this.lastName;

                    return firstName + "  " + lastName;
                }
            },

            fullName3: {
                get() {
                    let firstName = this.firstName;
                    let lastName = this.lastName;

                    return firstName + "  " + lastName;
                },

                set(val) {
                    //alert(val);//拿到fullName3的值
                    let arr = val.split(/\s+/);//通过空格分离
                    var first = arr[0];
                    var last = arr[1];

                    this.firstName = first;
                    this.lastName = last;
                }

            }
        },

        watch: {
            firstName: function (newVal, oldVal) {
                this.fullName2 = newVal + " " + this.lastName;
            },
            lastName: function (newVal, oldVal) {
                this.fullName2 = this.firstName + " " + newVal;
            }
        }

    })

</script>
</html>

2.5 名字过滤以及年龄排序案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        #app {
            width: 400px;
            margin: 100px auto 0;
        }
    </style>
</head>

<body>

<div id="app">
    <input v-model="searchText">

    <table border="1" style="text-align: center;" cellspacing="0"
           cellpadding="0" width="100%">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr v-for="user in filterUsers">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>

    <button @click="orderByAge(1)">升序</button>
    <button @click="orderByAge(2)">降序</button>
    <button @click="orderByAge(3)">不排序</button>

</div>

</body>

<script>
    new Vue({
        el: '#app',

        data() {

            return {

                users: [
                    {id: 1, name: 'zhangsan', age: 22},
                    {id: 2, name: 'lisi', age: 12},
                    {id: 3, name: 'wangwu', age: 42},
                    {id: 4, name: 'zhaoliu', age: 32},
                    {id: 5, name: 'tianqi', age: 28},
                ],

                searchText: '',
                order: 3

            }
        },
        computed: {

            filterUsers: function() {

                let searchText = this.searchText;
                let order = this.order;
                // 根据名字过滤
                let newUsers = this.users.filter(user => user.name.indexOf(searchText) > -1);

                // 排序
                if(order != 3) {

                    newUsers.sort((u1, u2) => {
                        if(order == 1) {
                            return u1.age - u2.age;
                        }else {
                            return u2.age - u1.age;
                        }
                    });
                }

                return newUsers;

                // String s = "helloworld";
                // s.indexOf('worlx'); // -1
            }
        },

        methods: {
            orderByAge(value) {

                this.order = value;

            }
        }
    })

</script>

</html>

2.6 事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .box1 {
            background-color: red;
            height: 200px;
            width: 200px;
        }

        .box2 {
            background-color: #e3e3e3;
            height: 100px;
            width: 100px;
        }
    </style>

</head>
<body>
<div id="app">

    <!--@click.prevent 阻止事件传播 -->
    <a href="http://www.baidu.com" @click.prevent="show">百度</a>

    <hr>

    <div class="box1" @click="alertOutterBox">
        <!-- click.stop阻止冒泡事件 -->
        <div class="box2" @click.stop="alertInnerBox"></div>
    </div>

</div>
</body>
<script>
    new Vue({

        el: '#app',

        methods: {

            show() {
                alert("show")
            },
            alertOutterBox(){
                alert("alertOutterBox")
            },
            alertInnerBox(){
                alert("alertInnerBox")

            }
        }
    })
</script>

</html>

2.7 按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <!-- keyup.enter 表示enter键弹起的时候，事件被触发 -->
    keyup：<input type="text" v-model="name" @keyup.enter="keyupTest()">
    <!-- keydown 表示按下某个键时触发 -->
    keydown：<input type="text" v-model="code" @keydown="keydownTest($event)">

</div>

</body>

<script>
    new Vue({
        el: '#app',

        data() {
            return {
                name: '',
                code: ''
            }
        },
        methods: {

            keyupTest() {
                alert(this.name)
            },

            keydownTest: function (event) {
                var keyCode = event.keyCode;
                alert(keyCode)
                // if (keyCode != 49) {
                //     event.preventDefault();//阻止按键输入
                // }
            }
        }

    })

</script>
</html>

2.8 生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    {{message}}
</div>

</body>

<script>
    var vm= new Vue({
        el: "#app",
        data(){
            return{
                message:"hello vue"
            }
        },
        methods:{
        },
        beforeCreate:function () {
            console.log("beforeCreate创建vue之前：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        created:function () {
            console.log("created创建vue：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        beforeMount:function () {
            console.log("beforeMount挂载之前：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        mounted:function () {
            console.log("mounted挂载：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        beforeUpdate:function () {
            console.log("beforeUpdate修改之前：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        updated:function () {
            console.log("updated修改：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        beforeDestroy:function () {
            console.log("beforeDestroy销毁之前：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        },
        destroyed:function () {
            console.log("destroyed销毁：",this.message);
            console.log("$el:"+this.$el);
            console.log("$data:"+this.$data);
            console.log("-------------")
        }

    });
    vm.message="bye vue";
    vm.$destroy();
</script>
</html>

在这里插入图片描述