遇见 vue.js --------阿文的vue.js学习笔记（2—2）----- 基本使用 [2]

**
新学习新征程，我们一起踏上学习 vue.js的新长征

遇见 vue.js --------阿文的vue.js学习笔记（1）-----初识vue.js

… … …

遇见 vue.js --------阿文的vue.js学习笔记(目录)

       关注我，我们一起学习进步。

**

1、v-text

       类似于双大括号 的作用，用作声明式渲染。

举个例子：

执行结果：你可以看出和我们的双大括号写 { {message}}的效果是一样的

2、v-if

你可以简单的理解为 v-if 就是将我们 绑定之后的数据来进行判断。

举个例子：

执行结果：因为我们这里的判断条件 condition 是true 所以 该条件可以显示

但是你可以看见当我们将condition 条件改为false 的话，那么这句话将不可见

3、v-for

可以简单的理解为，将一个数据循环渲染到一个项目列表上去。
比如我们有很多个li 上面要传入我们的信息，如果一条一条写我们就需要写很多，所以这个时候我们就可以用到我们的 v-for

举个例子：

执行结果：可以看出我们虽然只写了一个li 但还是将我们下面的三条 text数据都渲染进了我们的li 列表上去

4、认识 组件

      组件系统是 Vue 的另一个重要概念，也是 Vue.js 最强大的功能之一，使用组件化的方式来进行开发，可以封装可以重用的代码，减少程序猿重复劳动。

       你可以简单的理解为将一个大的东西分成很多小的东西，类似于将我们的网页 分成一块一块的.

我们先简单的做个例子：你可以看到这其实就是两个p标签，但是我们用组件的思维可以将其拆分为两个。

代码如下：

      我们运用组件的作用就是当我们以后要写大段大段的代码的时候，我们检测或者观看起来就会很麻烦，而我们组件的作用就是将这一大段大段的代码分成一小份一小份的，方便我们查看与使用和更改.

当然我们也可以 props 来传递属性
简单示例：

执行结果：你可以看出我们的第一个组件后面 就绑定了我们的name 属性

组件语法：
        Vue.component("组件名"{
             props:["属性"]，
             template:" 代码 "
                          })

new Vue({
      el:“元素名”

})

当然这里的new Vue 里面el 只是最基本的 ，根据需要还需添加其他的东西

下面我们再做个例子：

这里的 v-bind:mes = “item” 的意思是将我们下面获得的 mes 属性 将它与我们的item 数据进行绑定。

执行结果：你可以看出这就是我们用组件的方式，来将下面的数据同时渲染进我们的li 里面。

**
现在基本了解即可，后面详细学习的时候，再进行详细的记录。

**
关注 校园君有话说 公众号 ，回复 web前端 免费领取50G 前端学习资料 一份 ，我们一起学习进步吧。