[Vue.js启航]——数据的双向绑定

最新推荐文章于 2022-04-28 10:37:56 发布

若即

最新推荐文章于 2022-04-28 10:37:56 发布

阅读量938

点赞数

分类专栏： Vue-js 文章标签： angular vue-js 前端框架前端

本文链接：https://blog.csdn.net/qq_17004327/article/details/70991855

版权

Vue-js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue.js启航——英雄编辑器（一）

简介

英雄编辑器是Angular2的官方入门指南，我觉得它很适合像我这种新手来进行练手，这系列的博客主要是记记录将英雄编辑器的主要功能使用Vue.js实现的过程。整个系列实现的最终效果如下所示

英雄编辑器最终效果

这篇文章主要是实现简单的编辑。

简单的英雄编辑器

所谓简单的英雄编辑器只是使用了双向绑定来实现数据的显示与更改同步，效果如下

简单的英雄编辑器

首先我们构建一个用于显示英雄详情的组件

//最简单的英雄显示组件
Vue.component("hero-details",{
    props:['hero'],
    template:'<h1>Tour of Heroes</h1><h2>{{hero.name}} details!</h2>'
})

这个组件可以说是最简单的Vue组件，只有一个属性，模板只有一行，我们最终使用的肯定不会这么简单。我们先进一步，使用多属性和多行模板。我们使用多属性和多行模板实现标题自定义和实现文本框输入和输出双向绑定，具体如下：

//包含编辑器的组件
Vue.component("hero-details-edit",{
    props:['title','hero'],
    template:'\
        <div>\
            <h1>{{title}}</h1>\
            <h2>{{hero.name}} details</h2>\
            <div><label>id:</label>{{hero.id}}</div>\
            <div>\
                <label>name:</label>\
                <input v-model="hero.name" placeholder="name">\
            </div>\
        </div>\
    '
})

这里我们使用了普通的JS’\’分行。双向绑定主要是通过v-model指令实现的，可以看出input标签使用了v-model指令，因此input和h2标签的hero.name是绑定的是Vue实例中data属性中hero属性的name属性，具体的实例代码如下

//英雄详情实例相关
var hdInstance=new Vue({
    el:"#hero-details",
    data:{
        title:"Tour of Heroes",
        hero:{
            id:1,
            name:'Mr.hero'
        }
    }
})

这实例是Vue最简单的实例，包括el属性和data属性，el属性指定该实例与那个代码块相关，而data属性就指明该实例中使用到的数据块。有了实例和组件，然后就是编写html代码将两者结合起来

<div id="hero-details">
    <hero-details-edit v-bind:title="title" v-bind:hero="hero"></hero-details-edit>
</div>

在html中我们使用v-bind指令将模板中的props属性与实例中的属性绑定起来。v-bind:title="title"就是只组件中的title属性使用实例中的title属性，v-bind:hero="hero"也是一个道理。要是我们要是组件中的title属性与实例中的hero属性绑定，写法就是v-bind:title="hero"。通过html将两者结合起来我们就能够实现简单的英雄编辑器效果。

总结

通过简单的英雄编辑器我们可以大体了解Vue组件式编写网页应用的过程，在这个示例中我们主要学习了

Vue组件的编写
Vue实例的编写
v-bind,v-model指令的使用
在html中将组件和实例结合起来实现一个网页App

可运行代码

hero.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="hero.css">
</head>
<body>
    <div id="hero-details">
        <hero-details-edit v-bind:title="title" v-bind:hero="hero"></hero-details-edit>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="hero.js"></script>
</html>

hero.js

//包含编辑器的组件
Vue.component("hero-details-edit",{
    props:['title','hero'],
    template:'\
        <div>\
            <h1>{{title}}</h1>\
            <h2>{{hero.name}} details</h2>\
            <div><label>id:</label>{{hero.id}}</div>\
            <div>\
                <label>name:</label>\
                <input v-model="hero.name" placeholder="name">\
            </div>\
        </div>\
    '
})

//英雄详情实例相关
var hdInstance=new Vue({
    el:"#hero-details",
    data:{
        title:"Tour of Heroes",
        hero:{
            id:1,
            name:'windstorm'
        }
    }
})

hero.css

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
}
h2 {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
}
body {
    margin: 2em;
}
body, input[text] {
    color: #888;
    font-family: Cambria, Georgia;
}

若即

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[Vue.js启航]——数据的双向绑定

Vue.js启航-示例-英雄编辑器（一）简介英雄编辑器是Angular2的官方入门指南，我觉得它很适合像我这种新手来进行练手，这系列的博客主要是记记录将英雄编辑器的主要功能使用Vue.js实现的过程。整个系列实现的最终效果如下所示这篇文章主要是实现简单的编辑。简单的英雄编辑器所谓简单的英雄编辑器只是使用了双向绑定来实现数据的显示与更改同步，效果如下首先我们构建一个用于显示英雄详情的组件//最简单
复制链接

扫一扫