Vue回顾文档--day2

最新推荐文章于 2024-09-22 11:17:00 发布

飞奔的马铃猫

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量534

点赞数 1

文章标签：学习前端 vue.js

本文链接：https://blog.csdn.net/qq_53145332/article/details/123314808

版权

<!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>模板语法</title>
</head>

<body>

    <div id="app">
        <!-- 插值 -->
        <p>{{message}}</p>
        <p v-once>v-once使内容不再改变 ：{{message}}</p>
        <button @click="changeMsg">改变message内容</button>
        <hr>
        <span>v-html</span>
        <p>双大括号: {{ rawHtml }}</p>
        <p>用 v-html directive: <span v-html="rawHtml"></span></p>
        <hr>
        <span>对于属性值 attribute</span>
        需要使用v-bind，{{}}对属性没有作用
        <div v-bind:id="idVal">该盒子的id值{{idVal}}</div>
        <hr>
        <span>{{}}是完全支持Javascript表达式的 注意是表达式</span>
        <hr>


        <!-- 计算属性和侦听器 -->
        计算属性的基础例子
        <div class="example" style="border: 1px solid red; margin: 20px;">
            <p>原始数据 message: {{message}} </p>
            <p>经过计算后的数据 reverseMessage : {{reverseMessage}} </p>
        </div>
        <div class="setter" style="border: 1px solid red; margin: 20px;">
            计算属性的setter
            <p>firstname: {{firstname}} </p>
            <p>lastname: {{lastname}} </p>
            <p>fullname: {{fullname}} </p>
            <input type="text" placeholder="设置fullname" v-model="inputName">
            <span>通过设置fullname改变lastname和firstname</span>
            <button @click="chanheFullname">提交</button>
        </div>
        <div class="watch" style="border: 1px solid red; margin: 20px;">
            侦听属性 watch
            <input type="text" v-model="watchVal" placeholder="输入值触发watch监听">
        </div>



        <!-- class绑定 -->
        <hr>
        class绑定
        <div style="border: 1px solid red; margin: 20px;">
            引言<br>
            操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，
            所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将
            v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
        </div>
        <div style="border: 1px solid red;margin: 20px;">
            对象语法
            <div class="static" v-bind:class={active:hasActive}>这个div的class中active的存在与否 取决于hasActive的真值</div>
            可在控制台中通过app.hasActive改变
            <div v-bind:class="classObj">
                也可以直接将数据写为对象模式
            </div>
        </div>



    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>


        //创建一个vue实例
        var app = new Vue({

            //以下的内容全称为选项

            el: '#app',
            data: {
                message: "最常使用的文本方式 双大括号{{}}",
                rawHtml: '<span style="color: red;">使用v-html之后的样子</span>',
                idVal: 'aaa',
                firstname: 'yan',
                lastname: 'pengfei',
                inputName: '',
                watchVal: '',
                // class的绑定
                hasActive: 'true',
                classObj: {
                    active: true,
                    aaa: false,
                    asd: true,
                }
            },
            watch: {
                watchVal: function (newVal, oldVal) {
                    console.log(`新的值是:${newVal}`)
                }
            },
            computed: {
                reverseMessage: function () {
                    return this.message.split('').reverse().join('')
                },
                //计算属性存在缓存，如果原数据不变，那么使用计算属性的值永远是上一次计算的到的结果
                //计算属性的setter
                fullname: {
                    get: function () {
                        return this.firstname + ' ' + this.lastname
                    },
                    set(newValue) {
                        var names = newValue.split(' ')
                        this.firstname = names[0]
                        this.lastname = name[1]
                    }
                }
            },
            methods: {
                changeMsg() {
                    this.message = "我被改变了"
                },
                chanheFullname() {
                    this.fullname = this.inputName
                }
            }
        })
    </script>
</body>

</html>