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

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

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

… … …

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

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

**

1、v-text

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

举个例子:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第1张图片
执行结果:你可以看出和我们的双大括号写 { {message}}的效果是一样的
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第2张图片

2、v-if

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

举个例子:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第3张图片
执行结果:因为我们这里的判断条件 condition 是true 所以 该条件可以显示
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第4张图片
但是你可以看见当我们将condition 条件改为false 的话,那么这句话将不可见
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第5张图片

3、v-for

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

举个例子:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第6张图片
执行结果:可以看出我们虽然只写了一个li 但还是将我们下面的三条 text数据都渲染进了我们的li 列表上去
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第7张图片

4、认识 组件

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

       你可以简单的理解为将一个大的东西分成很多小的东西,类似于将我们的网页 分成一块一块的.
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第8张图片
我们先简单的做个例子:你可以看到这其实就是两个p标签,但是我们用组件的思维可以将其拆分为两个。
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第9张图片
代码如下:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第10张图片

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

当然我们也可以 props 来传递属性
简单示例:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第11张图片
执行结果:你可以看出我们的第一个组件后面 就绑定了我们的name 属性
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第12张图片
组件语法:
        Vue.component("组件名"{
             props:["属性"],
             template:" 代码 "
                          })

new Vue({
      el:“元素名”

})

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

下面我们再做个例子:
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第13张图片

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

执行结果:你可以看出这就是我们用组件的方式,来将下面的数据同时渲染进我们的li 里面。
遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]_第14张图片
**
现在基本了解即可,后面详细学习的时候,再进行详细的记录。

**
关注 校园君有话说 公众号 ,回复 web前端 免费领取50G 前端学习资料 一份 ,我们一起学习进步吧。
在这里插入图片描述

你可能感兴趣的:(vue)