教程简介

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，输入以下内容

h3>Vue 的指令h3>
hr style="height:2px;border:none;border-top:2px dashed #0066CC;"  />
ol>
   li>a href="./instructions/hello.html">Hello Worlda>li>
ol>

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

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

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


html lang="en">
head>
  meta charset="UTF-8">
  meta name="viewport" content="width=device-width, initial-scale=1.0">
  meta http-equiv="X-UA-Compatible" content="ie=edge">
  title>Vue--hello worldtitle>
  script src="../js/vue.js">script>
head>
body>
  div id="container">{{msg}}div>

  script>
    var vm = new Vue({
      el:'#container',
      data:{
        msg:'hello world'
      }
    })
  script>
body>
html>

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

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

vue-study/vue-lesson/01、基本指令 // 在当前目录
 browser-sync start --server --files "**/*.css, **/*.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 引信省略」

body>
  div id="container">
    <!--这里添加 v-on:click 然后定义一个方法-->
    input type="button" value="点我" v-on:click="clickme()"/>
    p>{{num}}p>
  div>

  script>
    var vm = new Vue({
      el:"#container",
      data:{
        // 定义一个数据默认是1
        num:1
      },
      // 方法写在 methods 关建字中，从字名看里面可以多个方法
      methods:{
      	 // 这里就是 v-:后面跟的方法
        clickme:function(){
          // this 指的是当前对象 -- vm
          this.num++
        }
      }
    })
  script>
body>

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

PS: v-on 的缩写

<!-- 完整语法 -->
https://github.com/githubchen001/vue-lesson 中的基本指令章节

3、v-show 和 v-model

v-show

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

如果达到条件要显示的内容标签>

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

核心代码:

div id="container">
  button @click="clickMe()">{{defaultButton}}button>
  <!-- 如果 v-show = true 的话就会显示 此 div  -->
  div v-show="flag" id="showDiv">
    span>我是 v-showspan>
  div>
div>

script>
  var vm = new Vue({
    el:'#container',
    data:{
      // 是否显示 div 的标志，默认是不显示
      flag:false,
      // 默认按钮显示字样
      defaultButton:'显示'
    },
    methods:{
      // 按钮点击的方法
      clickMe(){
        if(this.defaultButton == "显示"){
          this.defaultButton ="隐藏"
        }else{
          this.defaultButton ="显示"
        }
        this.flag = !this.flag
      }
    }
  })
script>

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

v-model

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

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

input type="text" v-model="itext" class="myinput"> br/>
你输入的值是：font class="myfont">{{itext}}font>

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

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

运行查看结果：

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

三、来个 blog 实例

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

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

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

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

  div id="container">
    p>标题：input type="text" v-model="title" placeholder="标题" >p>
    p>内容：textarea name="content" id="" cols="30" rows="10" v-model="content">textarea>p>
    p>input type="submit" value="添加" v-on:click="add" >p>

    hr>

    table border="1">
      tr>
        th>序号th>
        th>标题th>
        th>内容th>
        th>操作th>
      tr>
      <!-- 遍历把内容显示出来 -->
      tr v-for="(data,index) in datas">
        td>{{index+1}}td>
        td>{{data.title}}td>
        td>{{data.content}}td>
        td>
          a href="#" v-on:click="deleteRow(index)">删除a>
          a href="#" v-on:click="modifyData(index)">修改a>
        td>
      tr>
    table>
    span v-show="datas.length!=0" >a href="#" v-on:click="deleteAllData()">全部删除a>span>
    <!-- 没有数据的显示这个标签 -->
    span v-show="datas.length==0">没有数据span>
  div>

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

3、添加 script 代码

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

script>
var vm = new Vue({
  el:'#container',
  data:{
    // 标题
    title:'',
    // 内容
    content:'',
    // 所有的内容
    datas:[]
  },
  methods:{
    // 添加数据
    add(){
      if(this.title =="" || this.content==""){
        alert("标题或内容不能为空")
        return
      }
      // 把标题和内容添加到数组中
      this.datas.push({"title":this.title,"content":this.content})
      // 添加完数据以后把标题和内容置空
      this.title=""
      this.content=""
    },
    // 删除数据
    deleteRow(index){
      //在一个方法中调用
      let that = this // 由于是在方法的方法内部，this 就指的是当前方法了， 所以要使用 var that = this 来声明一下
     //在一个方法中调用 另一个方法
     this.$options.methods.deleteMethod(function callback(){
         that.datas.splice(index,1)
     })
    },
    //修改数据
    modifyData(index){
      // 取得原来的数据
      let data = this.datas[index]

      swal({
        title: '修改',
        // type: 'info',
        html:
          "
标题:+data.title+" >
"+
          " 内容:+data.content+">
" ,

        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then((result)=>{
        if(result.value){
          let title = document.getElementById('title').value
          let content = document.getElementById('content').value
          // 修改数据
          this.datas.splice(index,1,{"title":title,"content":content})
        }
      })
    },
    //删除 全部数据
    deleteAllData(){
      //这里使用箭头函数就不用再使用 let that = this 来转化了,可以上面的比较一下，两种方式
     this.$options.methods.deleteMethod(()=>{
       this.datas = []
     })
    },
    // 封装一个删除方法
    deleteMethod(callback){
      swal({
        title: '确定删除吗?',
        text: "全部删除了以后就不恢复不了哦！",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        cancelButtonText:'取消',
        confirmButtonText: '确定删除!'
      }).then((result) => {
        if (result.value) {
           callback()
        }
      })
    }
  }
})
/script>

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

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

四、总结

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

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

ITPub博客

02、手把手教Vue--指令