Vue入门（二）——基本语法和组件

之前我写到过关于Vue的简单介绍，这次我给大家一次说一下他们中的具体使用是如何的

首先我们来说一下Vue的基本语法：
v-for：循环遍历，比如我们要一次取出数组中的值，比如我们定义了一个goods的数组，这个时候我们进行访问，

item就是代表数组中的每个值，但我们需要用到序号的时候，我们可以这样写，v-for=’(item,index) in goods’
v-bind:动态绑定，具体使用方法如下：

这样写的话相当于我们给这个标签了一个自定义属性，里面的值是一个数组。
v-on：这个是动态绑定一个事件，如下：
这个就是一个点击事件，一旦我们发生了点击，就会调用itemClick（index）这个函数的。
v-model：双向绑定：具体如下

我们进行这样的绑定，一旦我们输入框里面改变了值，我们的页面使用该数据的也会被动态改变，这也就是所谓的响应式。

接下来，我们来讲解一下关于组件的使用：

上一篇的博客已经简单介绍了，这里我就不在说了，这里我们只说最终的写法。因为我们学这些就是为了做项目的。

我给大家一个一个介绍，首先那个template就是模板，里面写的就是我们前端页面要显示给大家看的东西。需要注意的一个点就是template里面的div一定不要少写，不然就会报错，我们要在div里面写前端页面。
srcipt里面就是讲我们这个组件导出来工别的组件使用的，里面可以写data，但是这个是一个函数，里面返回的是变量，除此之外，我们还可以写components，这个是就是我们引用的别的组件名称，还可以写methods等，这里我给你们展示一部分。如下：

下面就是组件里面的东西。
全局组件就是Vue.component，没有这个的就是局部组件，我们项目中一般就是我上面说的那种方式。即局部组件。

所谓的父子组件如下图：

下面我就以一个父子组件来介绍：


注意：我们在父组件的数据要想传递给子组件，我们要写：：子组件属性名字=父组件属性名字，子组件中用props属性进行接收。

当子组件想父组件传递数据时，我们用另一组父子组件演示：

接下来就是父子组件的访问了


下面这个是子组件访问父组件

希望上面对大家有所帮助