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

JavaScript017

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

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

在告诉你基础用法之前,我还是要先告诉你一个情况。

可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。

他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

所谓的双向绑定,你可以理解就是把view。(你还不清楚mvc的话,请看第一章)

和model绑定到一起。说白了,就是你js中的绑定值变了。你dom中的内容就跟着一块变了。

vue是通过解析{{文字..}}来生成内容的。后面绑定方法,输出内容的时候都会讲到。

列表输出使用 v-for,这些v开头加横杠的叫做命令

这些命令是可以自定义的。但是那都属于高级操作,我们不用它也完全足够支撑做一个大型项目了。

其实你回发现,这里无论是v-for或者是v-什么其他玩意

它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。

你记住这个用法,它就长这样。

前后端分离开发的关键在于:后台只提供接口。

我们获得的数据多数情况下,仅仅是一个json,而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解,数据的解析在mvc中,

是由后端完成的,而html只负责显示。

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

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

当我们看到vue指令后面跟着一个值得时候,这里的值就不再是一个字符串了,它指的是一定是一个JS的表达式

1、v-for:可以理解为for in,遍历数组返回给item,数组有多少内容就有多少个item,并自动生成html标签

2、v-on:绑定事件,语法=>v-on:事件类型 = "函数(调用)",调用的函数定义在methods中,vue会自动到里面寻找对应的函数去执行

3、v-model:数据的双向绑定,指定的数据需要在data里进行定义。当data里的该数据改变时,绑该数据的地方显示在页面的内容也会变化;当绑定的地方数据改变,data里的数据也会改变。其中一个改变另一个也会跟着改变。【在methods里定义的函数中,使用 this.数据 就可以访问到页面中该数据的内容】

4、v-bind:把数据传到子组件:v-bind:变量名=“接收值”  然后在子组件里的props中接收变量值

5、v-text=“name”;表示让这个标签的innerText变成data数据里name的内容,不会复制HTML结构,单纯转成文字,效果和插值表达式一样

6、v-html=“name”;让这个标签的innerHTML变成data数据里name的内容,会把HTML结构也复制上

创建全局组件的方法 Vue.component(“todo-item”, {}) =》 "todo-item"为标签名

var 组件名(=标签名) = {}  并且需要在实例中的components中注册组件才能使用

v-bind:index="index" 可以简写 :index="index"

v-on:click="hdd" 可以简写 @click="hdd"

给子组件绑定多个数据时:

<todo-item :content="item" :index="index" v-for="(item, index) in list" @delete="hdd">

</todo-item>

子组件里的props使用数组的形式接收数据 ,子组件事件处理this.$emit("delete",this.index),之后在向外触发父组件的事件并传入index参数,再使用splice方法实现点击列表的某一项时该项被删除。

生命周期函数就是vue实例在某一个时间点会自动执行的函数。

生命周期函数不放在methods里面,而是直接放在Vue实例里面