vue的插值语法及el和data、methods语法释义

原创

a772304419 2021-12-23 10:17:29 ©著作权

文章标签 vue.js javascript 前端数据管理数据 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者a772304419的原创作品，请联系作者获取转载授权，否则将追究法律责任

插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式

moustache（胡子）是双大括号学名，也叫（胡子语法）

vue的插值语法及el和data、methods语法释义_数据管理

内部也可以存放表达式

{{a >= 100 ? 20 : 10}}

注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断

{{if(a>200){a=100}else{a=300}}}

上面的写法是错误的，因为不支持使用复杂判断

我们需要注意的是，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥

<body>
    <div id="app">
        {{b}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
            el: '#app',
            // 数据管理中心，所有的Vue的数据都在data对象中
            data:{
                a: 100
            },
            // 方法，对应的Vue事件方法清单
            methods:{
            },
            content:{
                b: 200
            }
        })
    </script>
</body>