**
新学习新征程，我们一起踏上学习 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 前端学习资料 一份 ，我们一起学习进步吧。
