02、手把手教Vue--指令

教程简介

• 1、阅读对象
  本篇教程适合新手阅读，老手直接略过
• 2、教程难度
  初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢
• 3、Demo 演示地址：https://githubchen001.github.io/vue-lesson/01、基本指令/index.html

正文

一、Vue 的实例

通过上节课，我们知道如何引入 Vue 来工作，初学者不建议使用 vue-cli 来创建项目，在这里我们使用引入 script 来编写 Vue demo

Vue 完全可以看做是面向对象的语言，我们创建一个 Vue 的实例一般是这样做的

var vm = new Vue({
  // 数据
  data:{
  }，
  methods:{
  	// 方法
  }，
  等等其它 
})

我们可以看到 – data 作为属性、methods 作为方法，new Vue 就是一个实例对象，这样理解 Vue 就会很轻松「如果有面向对象的基础」

二、什么是指令

传统意义上的指令就是指挥机器工作的指示和命令，vue 中的指令一般是以 v- 开头

vue 中的指令的职责是，当表达式的值改变时，会响应式的对 DOM 产生影响

在开始指令之前，我们先来一个 helloWorld 来直观的感受下下 Vue 吧

1、先来一个 HelloWorld

在这里我使用 atom 来开发

1、新建一个目录，并且导入 vue.js 如下

2、打开 index.html，输入以下内容

Vue 的指令


   
Hello World

以上是核心代码，body 中的代码「没有写 html 标准模版代码，完整的可以看 index.html界面」

3、在 js 目录下引入 vue.js 文件「在官方上下载」

4、在 instructions 目录下新建 hello.html

  
  
  
  
  


  
{{msg}}

  

5、查看一下结果吧，这里我们使用 browser-sync 来启动一个服务「帮你解决手动刷新的困扰，看过我 react 系列的应该非常熟悉」,这里不过多介绍 browser-sync , 了解更多请查看官网：http://www.browsersync.cn

打开命令行，在根目录下输入

vue-study/vue-lesson/01、基本指令 // 在当前目录
 browser-sync start --server --files "***.html"

就会自动打开默认浏览器，然后界面就出来了，往后你修改的内容，不用 F5 不用刷新，内容自动就同步了「真 TM 帅」

看到了吧，输入命令以后就会自动打开浏览器容器，并且显示 index.html 的内容，我们也正确的看到了 hello world 的内容「使用 vue 创建的」

二、v-on,v-if,v-for 指令

1、v-on 是用来监管 DOM 事件的，并执行一些 js 代码，比如点击事件，提交事件等

用法

v-on:click="表达式"

废话不多说直接上例子吧

• 1、在 instructions 下新建 v-on.html，然后在 index.html 中引入

先看 index.html 中修改「见下面红色框」

• 2、v-on.html 给出 body 中的核心代码「html 基本模版和 vue.js 引信省略」

  

    
    
    
{{num}}
  

  

• 3、这样一个简单的 v-on:click 指令就可以使用了，我们来看一下结果

PS: v-on 的缩写

...


...

2、v-if 和 v-for 指令

v-if 是条件判断，v-for 是用来循环数据的，从名字就可以看出来

v-if 的模版

  A


  B


  C


  Not A/B/C

其中 v-else-if 和 v-else 不是必须的「根据实际情况看是否需要」

v-for 的模版

<标签 v-for="item in mites">
	{{item}}


比如：遍历 li  假设有一个数组 items=[{"message":"hello"},"message":"vue"]

  

    {{ item.message }}
  

如果想要使用 v-for 来遍历带索引使用

v-for="(item,index) in items"

其中 index 就是索引，如果想使用索引的话就可以使用此种方式

这里的标签指的需要循环的标签，好了不多说了，直接看例子吧，下面我们实现一个下面的例子

我们使用 v-if 来判断需要显示方形按钮/div 还是圆形按钮/div ，并且使用 v-for 遍历了两个数组「分别使用 ul 和 table 样式显示」

核心代码

      
1、使用 v-if 来切换按钮上的文字和 div 的显示样式
      {{theWord}}
      
      

 

     我显示出来了
 
      
      
      

 
 style="color:white">哈哈
      
   

   
2、使用 v-for 来循环数组

    >列举出你喜欢吃的水果

    我喜欢吃的水果有
    

      

 >{{item}}
      
    

  
 3、使用 v-for 循环输出 以下 json 串
  

    mydatas:[
      {"name":"TigerChain","age":"保密","address":"地球中国","lover":"不告诉你"},
      {"name":"张三","age":"23","address":"地球中国","lover":"打游戏"},
      {"name":"李四","age":"25","address":"地球中国","lover":"读书"},
      {"name":"王五","age":"30","address":"是中唯一不下雪的地方","lover":"写代码"},
      {"name":"赵六","age":"18","address":"中国北京","lover":"写博客"},
      {"name":"钱七","age":"27","address":"中国陕西","lover":"做菜"}
    ]
  
    

      

 
序号
 
姓名
 
年龄
 
地址
 
爱好
      
      

 
 
>{{index}}
 
>{{item.name}}
 
>{{item.age}}
 
>{{item.address}}
 
>{{item.lover}}
      
    
  

  

具体代码可以查看 https://github.com/githubchen001/vue-lesson 中的基本指令章节

3、v-show 和 v-model

v-show

在前面我们使用了 v-if 指令，v-show 的指令和 v-if 类似，基本模版是：

<标签 v-show="条件">如果达到条件要显示的内容

比如：我们有一个按钮点击显示或隐藏 div 如下效果

核心代码:

  {{defaultButton}}
  
  

    >我是 v-show
  

从上面的例子中，我们可以感受到 v-show 的用法了

v-model

v-modle 体现了 mvvm 设计思想，它是一个双向数据绑定「在 input 和 textarea 上」

我们直接在上面 id 为 container 的 div 中添加如下代码

 

你输入的值是：{{itext}}

并且我们在 data 中定义一个 itext 属性

data:{
  // 是否显示 div 的标志，默认是不显示
  flag:false,
  // 默认按钮显示字样
  defaultButton:'显示',
  // 新添加的属性
  itext: ''
},

运行查看结果：

从上面的结果中我们可以看到，当我们给 input 中输入文本的时候就下面就会自动的显示出所对应的文本，并且点击按钮的时候改变文本的值，输入框中的值会自动改变，这就是双向绑定

三、来个 blog 实例

1、经过上面我们学习了几个指令，我们来写一个综合的小案例，效果如下：

2、开始撸码「在这里我们给出核心代码」，后面会放出 demo 地址

我们在 instructions 目录下新建一个 blog-demo.html 文件

• 1、首先我们在这里要引入一个 sweetalert2.js 来做弹出框
• 2、我们来看看 div 中的内容

  

    
标题：
    
内容：
    


    


    

      

 
序号
 
标题
 
内容
 
操作
      
      
      

 
{{index+1}}
 
{{data.title}}
 
{{data.content}}
 

   删除
   修改
 
      
    
    v-show="datas.length!=0" >全部删除
    
    v-show="datas.length==0">没有数据
  

以上我们定义了一个 blog 的模版，下面我们给它添加一些操作功能

• 3、添加 script 代码

从上面的代码中，我们看到了 v-modle,v-show ,v-for 等指令，下面我们来看看 vue 中的代码

以上就是 blog-demo 的核心代码，注释的非常清楚，这里不过多解释了，请自行实践

到此为止，我们就把 vue 的几个常用的指令说完了

四、总结

通过这节，我们学习了 vue 的几个常见的指令，并且写了一个小 demo ，通过动手就能直观的感受到 vue 指令的作用

更多文章等着你，欢迎关注我的公号，点赞是一种美德，转发富五代