Vue-04-实例及选项

阿国GG在学习

已于 2022-03-29 23:12:37 修改

阅读量164

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-03-14 09:15:59 首次发布

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123470257

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、介绍

一般的，模板内容简比较简单是，使用data选项配合表达式即可。当涉及复杂逻辑时，则需要使用methods、computed、watch等方法。

二、数据选项

data是Vue实例的数据对象。Vue使用递归法将dat的属性转换为getter/setter，从而让data属性能够响应数据变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>

<script>
    var values={message:'Hello Vue'}
    var vm=new Vue({
        el:'#app',
        data:values
    })
    console.log(vm);
    console.log(vm.$data===values)
    console.log(vm.message);
    console.log(vm.$data.message)
</script>
</body>
</html>

运行结果：

Vue实例创建之后，在控制台输入vm.$data即可访问原始数据对象

三、属性选项

Vue为组件开发提供了属性（Props），可以使用它为组件注册动态属性，来处理业务之间的差异，使代码可以在相似的应用场景复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <message content="Hello World"></message>
    <message content="Hello 123"></message>
</div>

<script>
    var Message=Vue.extend({
        props:['content'],
        template: '<h1>{{content}}</h1>'
    })
    Vue.component('message',Message)
    var vm=new Vue({
        el:'#app'
    })
</script>
</body>
</html>

运行结果

四、方法选项

可以通过选项的属性methods对象来定义方法，并且使用v-on指令来监听DOM事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--  可以通过选项属性methods对象来定义方法，并且使用v-on指令来监听DOM事件   -->
    <button v-on:click="test">点我</button>
</div>

<script>

    var vm=new Vue({
        el:'#app',
        methods:{
            // 定义一个test的函数
            test:function (){
                console.log(new Date().toLocaleTimeString())
            }
        }
    })
</script>
</body>
</html>

运行结果

五、计算属性

在项目开发种，我们展示数据往往需要进行处理。除了模板中绑定表达式或利用过滤器外，Vue还提供计算属性的方法，计算属性使当其以来的属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新，从而减轻模板中的业务负担。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <th>学科</th>
        <th>分数</th>
        </thead>
        <tbody>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="Math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="English"></td>
        </tr>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="Chinese"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            Math:66,
            English:77,
            Chinese:88
        },
        //  计算属性是能把新的数据缓存下来，其他的以来数据没有发生改变时，调用的时缓存数据，提高了程序的性能和数据提取的速度
        //  如果卸载methods种，数据不会缓存下来，每次都会重新计算
        computed:{
            //  一个计算属性的getter
            sum:function (){
            //    this只想vm实例
                return this.Math+ this.English+ this.Chinese;
            },
            average:function (){
                return this.sum/3;
            }
        }
    })
</script>
</body>
</html>

运行结果：

分数由于用input标签，因此可以首都输入，页面的数据会随之更改