我是靠谱客的博主 俊秀天空,这篇文章主要介绍Vue的模版代码与数据绑定方式,现在分享给大家,希望可以做个参考。

目录

模版代码

插值语法

指令语法

数据多层访问

 vue模版语小结

数据绑定方式


模版代码

插值语法

插值语法就是使用{{xxx}}描述的

复制代码
1
2
3
<div id="root"> {{name}} </div>

指令语法

复制代码
1
2
3
4
<div id="root"> <a :href="school.url">url地址名</a> </div>

在普通的url指定中,如果直接写{{url}},则会把""里面的值当成字符串,所以应该加上v-bind:href

或者直接简写为:href

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body> <!--创建一个容器--> <div id="root"> {{name}} <a v-bind:href="url">url地址</a> <a :href="url">url地址</a> </div> <script> new Vue({ el:"#root", data:{ name:"kc", url:"http://www.baidu.com" } }); </script> </body>

  

 加上了v-bind之后,vue会将里面的字符串当成一个表达式,执行的结果绑定给这个标签。

数据多层访问

当存在多层时,data层下还有层如

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<script> new Vue({ el:"#root", data:{ name:"kc", school:{ name:"百度", url:"http://www.baidu.com" } } }); </script>

{{}}访问到的是data层的数据,若要访问school层的name,只需{{school.name}}即可访问。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--创建一个容器--> <div id="root"> {{name}} <a v-bind:href="school.url">url地址名为:{{school.name}}</a> <a :href="school.url">url地址名为:{{school.name}}</a> </div> <script> new Vue({ el:"#root", data:{ name:"kc", school:{ name:"百度", url:"http://www.baidu.com" } } }); </script>

 vue模版语小结

 vue模版语法有两大类:

1、插值语法:

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

2、指令语法:

  • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)
  • 举例:v-band:href="xxx"或简写为:href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。

注:vue中有许多指定,都是形如v-xxx

插值在<>外的,指令在<>内

数据绑定方式

  • v-bind单向绑定
  • v-model双向绑定
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html> <!--命名空间--> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>数据绑定</title> <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> </head> <body> <div id="root"> 单向数据绑定<input v-bind:value="name"><br/> 双向数据绑定<input v-model:value="name"> </div> <script> vm= new Vue({ el:'#root', data:{ name:'数据' } }); </script> </body> </html>

 单向绑定只有data到value的值,就是说,当data中的值发生改变时,value就会发生改变

双向绑定data和value是双向的,data可以到value,value也可以到data。

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

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

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

注:

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

最后

以上就是俊秀天空最近收集整理的关于Vue的模版代码与数据绑定方式的全部内容,更多相关Vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(85)

评论列表共有 0 条评论

立即
投稿
返回
顶部