自学Vue的第03天

最新推荐文章于 2023-01-03 12:06:29 发布

weixin_34275734

最新推荐文章于 2023-01-03 12:06:29 发布

阅读量363

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cfab5d2e51d45109725fe3d

版权

单向数据流 v-bind:属性

绑定属性值，简写::属性

单向数据绑定：内存改变影响页面

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

    <script>
        new Vue({
            el: '#app',
            template: `
            <div>
                <input type="text" v-bind:value='name'><hr/>
            </div>
            `,
            data: function () {
                return {
                    name: '哇哈哈'
                }
            }
        })
    </script>
</body>
复制代码

输入框的值随着name的变化而变化

双向数据流 v-model

只作用于有value属性的元素

双向数据绑定：内存改变影响页面，页面改变也会影响内存

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

    <script>
        new Vue({
            el: '#app',
            template: `
            <div>
                <input type="text" v-bind:value='name'><hr/>
                <input type="text" v-model='name'>
            </div>
    
            `,
            data: function () {
                return {
                    name: '哇哈哈'
                }
            }
        })
    </script>
</body>
复制代码

第二个输入框的值可以影响到第一个输入框

其原理是：

1、v-model输入框中的name发送改变

2、vue对象的name改变

3、v-bind:value输入框改变

事件绑定 v-on

v-on:事件名="表达式||函数名"简写：@事件名="表达式||函数名"

事件可以是原生的，也可以是自定义的

<script>
    new Vue({
        el: '#app',
        template: `
        <div>
            <input type="text" v-bind:value='name'><hr/>
            <input type="text" v-model='name'><hr/>
            <button v-on:click='name="name改变后"'>点击改变name变量</button>
        </div>
        `,
        data: function () {
            return {
                name: '哇哈哈'
            }
        }
    })
</script>
复制代码

点击触发自定义函数

<script>
    new Vue({
        el: '#app',
        template: `
        <div>
            <input type="text" v-bind:value='name'><hr/>
            <input type="text" v-model='name'><hr/>
            <button v-on:click='change'>点击改变name变量</button>
        </div>
    
        `,
        data: function () {
            return {
                name: '哇哈哈'
            }
        },
        methods:{
            change:function(){
                this.name = this.name+"哇哈哈=";
            }
        }
    })
</script>
复制代码

过滤器 filters

正常情况下，vue数据直接被模板获取，而filters，允许在vue数据改变后，再被filters加工一次，然后再被模板获取

<body>
    <div id="app">
        输入：<input type="text" name="" id="" v-model='instring'><br/>
        输出：{{instring}}<br/>
        翻转输出：{{instring | reversal}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    instring: ''
                }
            },
            filters:{
                reversal(val){
                    // 字符串翻转
                    return val.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
复制代码

侦听器 watch

<body>
    <div id="app">
        监听器<br />
        姓：<input type="text" name="" id="" v-model='firstName'><br/>
        名：<input type="text" name="" id="" v-model='lastName'><br/>
        {{fullName}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                }
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    </script>
</body>
复制代码

这里的function参数，第一个参数是变更后的值，其实还有第二个参数，就是变更前的值

开启深度监听

如果我们监听的不是一个基本类型，而是一个对象，那么就要开启深度监听才能检测到变化

<body>
    <div id="app">
        监听器<br />
        姓：<input type="text" name="" id="" v-model='firstName.aa'><br/>
        名：<input type="text" name="" id="" v-model='lastName'><br/>
        {{fullName}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: {aa:'Foo'},
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                }
            },
            watch: {
                firstName:{
                    handler(val){
                        this.fullName = val.aa + ' ' + this.lastName
                    },
                    //开启深度监听
                    deep:true
                },
                lastName: function (val) {
                    this.fullName = this.firstName.aa + ' ' + val
                }
                
            }
        })
    </script>
</body>
复制代码

计算属性 computed

<body>
    <div id="app">
        监听器<br />
        姓：<input type="text" name="" id="" v-model='firstName'><br />
        名：<input type="text" name="" id="" v-model='lastName'><br />
        {{fullName}}<br />
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: 'Foo' ,
                    lastName: 'Bar'
                }
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>
复制代码

weixin_34275734

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自学Vue的第03天

单向数据流 v-bind:属性绑定属性值，简写::属性单向数据绑定：内存改变影响页面<body> <div id="app"> </div> <script> new Vue({ el: '#app', template: ` ...
复制链接

扫一扫