首页手记 02、手把手教Vue--指令

02、手把手教Vue--指令

标签：

Html5 Vue.js

教程简介

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 World</a></li>
</ol>

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

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

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

<!DOCTYPE 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 world</title>
  <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 的缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

2、v-if 和 v-for 指令

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

v-if 的模版

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

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

v-for 的模版

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

比如：遍历 li  假设有一个数组 items=[{"message":"hello"},"message":"vue"]
<ul id="container">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

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

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

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

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

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

核心代码

<div id="container">
      <h3>1、使用 v-if 来切换按钮上的文字和 div 的显示样式</h3>
      <button v-on:click="cheangeDiv()" style="width:100px;">{{theWord}}</button>
      <!--  如果 flag 为 true 的话那么就显示 div -->
      <div v-if="flag" >
        <div id="showDiv">
            我显示出来了
        </div>
      </div>
      <!-- 否则显示圆形的 div -->
      <div v-else>
        <div id="showBuleDiv"><span style="color:white">哈哈</span></div>
      </div>
   <hr>
   <h3>2、使用 v-for 来循环数组</h3>

    <span>列举出你喜欢吃的水果</span><br/>
    我喜欢吃的水果有
    <ul>
      <li v-for="item in fruit">
        <span>{{item}}</span>
      </li>
    </ul>

  <h3> 3、使用 v-for 循环输出 以下 json 串</h3>
  <p>
    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":"做菜"}
    ]
  </p>
    <table border="1">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>爱好</th>
      </tr>
      <tr v-for="(item,index) in mydatas">
        <!-- 其中 index 是索引，也就是数组的角标 -->
        <td><span>{{index}}</span></td>
        <td><span>{{item.name}}</span></td>
        <td><span>{{item.age}}</span></td>
        <td><span>{{item.address}}</span></td>
        <td><span>{{item.lover}}</span></td>
      </tr>
    </table>
  </div>

  <script>
    var vm = new Vue({
      el:'#container',
      // 数据
      data:{
        theWord:"圆形",
        flag:false,
        msg:'show me',
        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":"做菜"}
        ],
        fruit:["苹果","香蕉","葡萄","美国香瓜"]

      },
      // 方法
      methods:{
        // 切换 div
        cheangeDiv(){
          this.flag = !this.flag;
          if(this.theWord =="圆形"){
            this.theWord = "方形"
          }else{
            this.theWord = "圆形"
          }
        }
      }
    })
  </script>

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

3、v-show 和 v-model

v-show

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

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

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

核心代码:

<div id="container">
  <button @click="clickMe()">{{defaultButton}}</button>
  <!-- 如果 v-show = true 的话就会显示 此 div  -->
  <div v-show="flag" id="showDiv">
    <span>我是 v-show</span>
  </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:
          "<div><p>标题:<input id=\"title\" value="+data.title+" ></input></p>"+
          " <p>内容:<input  id=\"content\" value="+data.content+"></input></p></div>" ,

        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>