Vue的模版代码与数据绑定方式

最新推荐文章于 2022-12-28 18:40:12 发布

执久呀

最新推荐文章于 2022-12-28 18:40:12 发布

阅读量685

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60719453/article/details/128008087

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

模版代码

插值语法

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

<div id="root">
    {{name}}
</div>

指令语法

<div id="root">

    <a :href="school.url">url地址名</a>
</div>

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

或者直接简写为:href

<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层下还有层如


<script>
    new Vue({
        el:"#root",
       data:{
           name:"kc",
           school:{
               name:"百度",
               url:"http://www.baidu.com"
           }
       }
    });
</script>

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

<!--创建一个容器-->
<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双向绑定

<!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值。

执久呀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的模版代码与数据绑定方式

{{}}访问到的是data层的数据，若要访问school层的name，只需{{school.name}}即可访问。在普通的url指定中，如果直接写{{url}}，则会把""里面的值当成字符串，所以应该加上v-bind:href。单向绑定只有data到value的值，就是说，当data中的值发生改变时，value就会发生改变。双向绑定data和value是双向的，data可以到value，value也可以到data。2、双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
复制链接

扫一扫