vue的语法模板与数据绑定的说明

vue的两大模板语法:

1.插值语法

2.指定语法

插值语法:{{}}         

功能:用于解析标签体的内容

写法:{{xxx}},xxxjs表达式,且可以直接读取到data中的所有属性

指定语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...) 读取为js表达式

举例:v-bind:href:"xxx"或 简写成:href="xxx",xxx同样要写js表达式且可以直接读取到data中的所有属性

备注:Vue中有很多的指令 且形式都是v-????,此处我们只是拿V-bind举个例子

代码演示:

插值法

你好,{{name}}


指令语法

点我去学习1{{school.name}}
new Vue({ el:'#root', data:{ name:'jack', school:{ name:'尚硅谷', url:'http://www.atguigu.com' } } })

运行结果:

vue的语法模板与数据绑定的说明_第1张图片

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

            1.单向数据绑定(v-bind):数据只能从data流向页面

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

单向数据绑定(v-bind):

数据只能从data流向页面

一般使用指定语法:v-bind:value简写成为::value

双向数据绑定(v-model):

数据不仅能从data流向页面,还可以从页面流向data

1.双向数据绑定一般都应用在表单类元素上(如:input、select等)

2.v-model:value 可以简写成v-model,因为v-model默认收集的就是value值

代码演示:


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

你可能感兴趣的:(vue.js,前端,javascript)