Vue.js 模板语法和数据绑定

模板语法

Vue 模板语法有两大类

插值语法:

  • 功能:用于解析标签体内容
  • 写法:{{xxx}},xxx是js表达式,可以读取到 data 中属性

指令语法:

  • 功能:用于解析标签(标签属性、标签体内容、绑定事件...)
  • 写法:v-bind:href="xxx" 或简写为 :href="xxx",xxx是js表达式,可以读取到 data 中属性



    
    Vue初识
    


插值语法

Hello {{name}}

语法指令

百度

Vue.js 模板语法和数据绑定_第1张图片

数据绑定

Vue中有2种数据绑定的方式

  • 单向绑定(v-bind):数据只能从 data 流向页面
  • 双向绑定(v-model):数据不仅能从 data 流向页面,还可以从页面流向data

备注

  • 双向绑定一般都应用在表单类元素上(如: input、select等)
  • v-model:value 可以简写为v-model,因为 v-model 默认收集的就是 value 值

单向数据绑定:
双向数据绑定:
单向数据绑定:
双向数据绑定:

el的两种写法

第一种写法

new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })

第二种写法

const x = new Vue({
        data:{
            name:"world",
        }
    })
console.log(x)
x.$mount('#root')

其中 $mount可以在打印的 vue 实例中找到

Vue.js 模板语法和数据绑定_第2张图片

data的两种写法

第一种写法:对象式

new Vue({
        el: "#root",
        data: {
            name: "world",
        }
    })

第一种写法:函数式

new Vue({
        el: "#root",
        data: function () {
            //此处的this是vue实例对象
            return {
                name: 'world'
            }
        }
    })

或者:

new Vue({
        el: "#root",
        data(){
            return {
                name: 'world'
            }
        }
    })

目前学习两种写法都可以,但以后学到组件,必须函数式,否则会报错

另外:不能写成箭头函数,因为 this 就不是 vue 实例对象了,而是全局 window

new Vue({
        el: "#root",
        data: ()=> {
            //此处的this是全局的window
            return {
                name: 'world'
            }
        }
    })

到此这篇关于Vue.js 模板语法和数据绑定的文章就介绍到这了,更多相关Vue 模板语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的