Vue.js入门教程(三)双向绑定和数据渲染

第三章:双向绑定和数据渲染

有话说在前面


既然清楚了原理,那么,接下来进入正题——我知道了vue怎么安装,那么我怎么使用呢?

在告诉你基础用法之前,我还是要先告诉你一个情况。
可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。
他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

基础用法:1.双向绑定


所谓的双向绑定,你可以理解就是把view。(你还不清楚mvc的话,请看第一章)
和model绑定到一起。说白了,就是你js中的绑定值变了。你dom中的内容就跟着一块变了。
vue是通过解析{{文字..}}来生成内容的。后面绑定方法,输出内容的时候都会讲到。

<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<div id="app">
    {{message}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            message:"我是和vue绑定的数据.."
        }
    })
</script>

2.for渲染数据


列表输出使用 v-for,这些v开头加横杠的叫做命令
这些命令是可以自定义的。但是那都属于高级操作,我们不用它也完全足够支撑做一个大型项目了。

其实你回发现,这里无论是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。
你记住这个用法,它就长这样。

<div id="app">
    <ul>
       <li v-for="item in arry">{{item.name}}</li>
        <!-- 这里如果你想获得index 可以写成 (index,item) in arry -->
    </ul>
</div>
<script type="text/javascript">
    new Vue({
       el:"#app",
       data:{
          arry:[
             {name:"yunlong"},
             {name:"gaoxiang"},
             {name:"laohu"},
          ]
       }
   })
</script>

为什么要先讲这两个


前后端分离开发的关键在于:后台只提供接口。
我们获得的数据多数情况下,仅仅是一个json,而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解,数据的解析在mvc中,
是由后端完成的,而html只负责显示。

所以,当你了解了数据绑定和渲染以后,你可以第一时间先把数据输出到页面了。

我们前端最厉害的地方不就是处理能看得见的东西吗?

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,708评论 0 3
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 8,734评论 0 25
  • 本章内容:认识 Vue.js、数据绑定、计算属性、内置指令 一、初始 Vue.js 1.1 Vue.js 是什么 ...
    了凡和纤风阅读 10,936评论 0 13
  • Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其...
    鱼鱼吃猫猫阅读 8,564评论 1 12
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,738评论 0 6

友情链接更多精彩内容