Oliver's Blog

Vue基础语法

  • Jun 28, 2021

引入Vue

创建Vue对象v，v挂载到页面的id为root的div元素上。挂载除了调用$mount，也可以通过指定el属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        const v = new Vue({
            data: function() {
                return {};
            },
            methods: {
            },
            computed: {
            },
            watch: {
            }
        });
        v.$mount('#root');
    </script>
</body>
</html>

数据绑定


<div id="root">
    <h1>Hello,{{name}}</h1>
    <hr/>
    <h1>{{school.name}}</h1>
    <a v-bind:href="school.url">MIT Website</a>
    <hr/>
    <input type="text" name="address" id="address" v-model:value="school.address">
    <div>
        <input type="text" name="first" id="first" v-model:value="related.first">
    </div>

    <div>
        <input type="text" name="second" id="first" v-model:value="related.second">
    </div>
</div>


const v = new Vue({
    data: function() {
        return {
            name: 'Clio',
            school: {
                name: 'MIT',
                url: 'https://www.bilibili.com/',
                address: 'America'
            },
            related: {
                first: '1',
                second: '2'
            }
        };
    }
});

简写语法

<!-- 单向绑定 -->
<a v-bind:href="school.url">MIT Website</a>
<a :href="school.url">MIT Website</a>

<!-- 双向绑定 -->
<input type="text" name="first" id="first" v-model:value="related.first">
<input type="text" name="first" id="first" v-model="related.first">

事件绑定

const v = new Vue({

});

<div id="root">
    
</div>

<div id="root">
    <button v-on:click="showAlert">点击向你问好</button>
</div>

const v = new Vue({
    methods: {
        showAlert: function() {
            alert("Hello!");
        }
    }
});

简写语法

<button v-on:click="showAlert">点击向你问好</button>
<button @click="showAlert">点击向你问好</button>

计算函数


<div id="root">
    <div>
        {{concat}}
    </div>
</div>


const v = new Vue({
    data: function() {
        return {
            related: {
                first: '1',
                second: '2'
            }
        };
    },
    computed: {
        concat: function() {
            return this.related.first + '-' + this.related.second;
        }
    }
});

监视函数

可以监视data的属性和computed方法计算的结果值

const v = new Vue({
    watch: {
        computedSchool: {
            handler: function(newValue, oldValue) {
                console.log(oldValue, '->', newValue)
            }
        },
        'innerNumber.a': {
            handler: function(newValue, oldValue) {
                console.log('a被改变', oldValue, '->', newValue);
            }
        },
        innerNumber: {
            deep: true,
            handler: function(newValue, oldValue) {
                console.log('innerNumber被改变', oldValue, '->', newValue);
            }
        }
    }
});

非单文件组件

使用Vue CLI开发时一般不使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, Vue!</title>
</head>
<body>
    <div id="root">
        <school></school>
        <student></student>
    </div>

    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        const school = Vue.extend({
            template: `<h3></h3>`,
            data() {
                return {
                    name: 'MIT'
                }
            },
        });

        const student = Vue.extend({
            template: `<h3></h3>`,
            data() {
                return {
                    name: 'Clio'
                }
            },
        });

        const vm = new Vue({
            el: '#root',
            components: {
                school,
                student
            }
        });
    </script>
</body>
</html>

获取DOM

<input type="text" ref="titleInput">

this.$refs.titleInput.focus()

下一次解析模板后执行

this.$nextTick(() => {
  this.$refs.titleInput.focus();
});

v-for使用


<div id="lastWrongArea">  
  <span v-for="(item, index) in lastWrongSentenceInputArray" :key="index" :class="{wrongInput: item.different}">{{item.character}}</span>  
</div>

增加响应式属性

this.$set(this.person, 'sex', '女')

响应式删除属性

this.$delete(this.person, 'sex')

响应式修改数组元素

this.$set(this.person.hobby, 0, 'fish')

// 调用数组本身的函数，Vue对这些函数作了特殊处理
this.person.hobby.splice(0, 1, 'fish')
Search