一、安装相应版本

• 下载Vue的俩个版本

  开发版本www.jianshu.com/p/ceaab8df4…

  生产版本www.jianshu.com/p/ceaab8df4…

• live-server的使用 用npm进行全局安装 npm install live-server -g

  在项目目录中打开 live-server

二、 v-if v-else ，v-show指令

v-if:用来判断是否加载html的DOM。

v-show:调整css中display属性，DOM已经加载，只是css控制没有显示出来。

v-if判断是否加载，可以减轻服务器的压力，在需要时加载；

v-show已经加载，只是css中display了，可以使客户端操作更加流畅。

三、 v-for指令

1.基本用法

模板写法<li v-for="item in items">{{item}}</li>

实现最基础的循环，先在js中定义items数组，然后再用v-for循环出来。

注：需要在哪个html标签循环，v-for就写在哪个上边。

2.计算所有科目的总成绩 在computed属性（计算属性）中声明对象 totalMarks

 totalMarks:function(){
        let total = 0;
        for(let i = 0;i<this.results.length;i++){
          total += parseInt(this.results[i].marks);
        }
        return total;
      }

3.排序

需要使用到Vue的computed属性（计算属性）

computed:{
    sortItems:function(){
        return this.items.sort();
    }
}

在computed里新声明对象sortItem，如果不声明就会污染原来的数据源，这个是Vue不允许的。 Bug：js的sort()函数并不是按照我们的想象排序的，它是按照字符排序的，所以我们得编写一个方法sortNumber，然后传给我们的sort函数解决这个bug

function sortNumber(a,b){
    return a-b;
}

4.对象循环输出

定义数组

 results:[
        {
          name:'English',
          marks:80
        },{
          name:'OS',
          marks:90,
        },{
          name:'OB',
          marks:85
        }

写一个方法（数组对象方法进行排序)

function sortBykey(array,key){
  return array.sort(function(a,b){
    var x = a[key];
    var y = b[key];
   return ((x<y)?-1:((x>y)?1:0));
  })
 }

在computed中调用数组对象的排序

 sortObject:function(){
      return sortBykey(this.results,'marks')
    }

注：在使用v-for时必须加上 :key 的值，且key的值不能重复，否出控制台会报错

 <li v-for="item in sortItems" :key="item.id">{{item}}</li><hr>

全部代码

<template>
  <div class="hello">
    <ul>
      <li v-for="item in sortItems" :key="item.id">{{item}}</li><hr>
     <li v-for="value in results" :key="value.id">{{value.name}}--{{value.marks}}</li><hr>
     <li>课程总分{{totalMarks}}</li><hr>
     <li v-for="s in sortObject" :key="s.id">{{s.name}}--{{s.marks}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 查看所有的主题总数
      results:[
        {
          name:'English',
          marks:80
        },{
          name:'OS',
          marks:90,
        },{
          name:'OB',
          marks:85
        }
      ],
      items:[1,13,2,45,23],
    }
  },

  computed:{
      sortItems:function(){
        return this.items.sort(sortNumber);
      },
      //总分
      totalMarks:function(){
        let total = 0;
        for(let i = 0;i<this.results.length;i++){
          total += parseInt(this.results[i].marks);
        }
        return total;
      },
      sortObject:function(){
        return sortBykey(this.results,'marks')
      }
  }, 
}
 function sortNumber(a,b){
   return a-b;
 }
 function sortBykey(array,key){
   return array.sort(function(a,b){
     var x = a[key];
     var y = b[key];
     return ((x<y)?-1:((x>y)?1:0));
   })
 }
</script>
<style>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
</style>

四、v-text&v-html

我们已经在使用的{{xyy}}这种情况时有弊端的，在网速很慢或者js出错时，网页直接暴露出{{xyy}}。Vue提供的v-text就是解决这个问题的。

用法： <li>{{msg}}</li> = <li v-text="msg"></li>

上述代码等号左边和右边在网页的显示结果是一样的，但是在网速很慢或者js出错时左边显示的是{{msg}}

如果在js中写有html标签，用v-text是输出不来的（不是没有显示），双大括号会将数据解释为纯文本，而非html，这时就需要用v-html标签了 注：在生产环境中动态渲染html是非常危险的，容易导致xss攻击，所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。 用法：

<li v-html="msghtml"></li>

本节代码

<li>{{msg}}</li> = <li v-text="msg"></li><br>
     <li>{{msghtml}}</li><br>
     <li v-text="msghtml"></li><br>
     <li v-html="msghtml">我是v-html输出的</li>
     //data里面
      msg:"有时会加载不出来",
      msghtml:"<span>我带有html标签，用v-text输不出来,会把标签输出</span>"

效果

五、v-on:绑定事件监听

v-on就是监听事件，可以使用v-on指令监听DOM事件来触发一些javascript代码

• 绑定事件监听器，编写一个加分减分的程序

<div id="app">
        得分{{count}} <br>
        <button v-on:click="jiafen">加分</button>
        <button v-on:click="jianfen">减分</button>
</div>
//js写法
<script>
        var app = new Vue({
            el:"#app",
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++
                },
                jianfen:function(){
                    this.count--;
                }
            }
        })
    </script>

v-on的简写就是用@代替上述代码可替换 <button @click="jiafen">加分</button>

除了绑定click之外，还可以绑定其他事件，比如v-on:keyup.enter(键盘回车事件) 现在我们增加一个输入框，然后绑定回车事件，在回车后把文本框的值加到我们的count上。写法：

<input type="text"v-on:keyupn.enter="onEnter" v-model="secondCount"

这里的v-model是vue的双向绑定指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

关于v-model：www.jianshu.com/p/ceaab8df4…

js代码
onEnter:function(){
                    this.count = parseInt(this.secondCount);
                }

因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

六、v-model指令（实现双向数据绑定）

v-model指令，就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定 例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../assets/js/vue.min.js"></script>
    <script src="../assets/js/vue.js"></script>
    <title>双向绑定指令</title>
</head>

<body>
    <div id="app">
        <h2>v-model双向绑定指令</h2>
        <p>原始文本信息：{{msg}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="msg"></p>
    </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "我是原始信息"
            },
            methods: {

            }
        })
    </script>
</body>

</html>

在这个例子中，p标签会显示“我是原始信息”，在input框中也会显示“我是原始信息”，更改文本框中的信息，p标签的信息也会随之改变。

• 修饰符

  .lazy:取代input监听change事件（通俗来说就是延缓了双向绑定事件，只有鼠标离开（点击其他）文本框才能实现双向绑定）<p>v-model:<input type="text" v-model.lazy="msg"></p>

  .number:输入字符串转为数字。（input必须是数字，如果输入字符串，在浏览器中不会显示；如果最先输入的是字符串再输入数字，浏览器会显示字符串加数字）

  .trim:输入去掉首尾空格。<p><input type="text" v-model.trim="msg"</p>

• 文本域加入数据绑定 <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>

• 多选按钮绑定一个值（checkbox）

 <input type="checkbox" id="ckeck" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>

将isTrue的值先定义为true，页面会显示勾选状态，取消勾选后label就会显示false

• 多选按钮绑定一个数组

实现多个多选框，点击一个就将选择的科目显示在数组中

<input type="checkbox" name="" id="one" value="math" v-model="Names">
        <label for="Names">math</label><br>
        <input type="checkbox" name="" id="two" value="OS" v-model="Names">
        <label for="Names">OS</label><br>
        <input type="checkbox" name="" id="three" value="English" v-model="Names">
        <label for="Names">English</label><br>
        <p>{{Names}}</p>
        //Names定义为一个空数组

• 单选按钮绑定数据

 <input type="radio" id="one" value="男" v-model="sex">
        <label for="sex">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="sex">女</label>
        <p>当前选择的性别是：{{sex}}</p>

注：sex的初始值可以为空，为空时性别默认不选择，也可以初始赋值“男”或者“女”，默认显示初始值

七、v-bind指令

v-bind是处理HTML中的标签属性的，给标签属性动态赋值

例如：动态绑定src的值

<img v-bind:src="imgSrc" alt=""> v-bind的缩写：用一个冒号":"。

• 绑定CSS样式

在工作中我们经常用v-bind来绑定css样式：绑定css样式时，绑定的值必须在vue中的data属性中进行声明。

1、直接绑定class样式：

<div :class="className">1、直接绑定css样式 classA</div>
//在data中声明
className:"classA"
//classA的style中字体颜色为红色

2、绑定class中的判断：

 <div :class="{classA:isOK}">2、绑定class中的判断</div>
        <div>
            <input type="checkbox" name="" id="isOK" v-model="isOK">
            <label for="isOK">isOK={{isOK}}</label>
        </div>
    //在data中给isOK赋值为false

用v-model实现双向数据绑定,效果如下： 3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>
//在data中声明
classA：'classA',
classB:'classB'

同时有classA和classB俩个样式，重复样式会被后者覆盖 4、绑定class中使用三元表达式判断 <div :class="isOK?classA:classB">4、绑定class中使用三元表达式判断</div> 如果isOK为真，则显示classA的样式，反之显示classB的样式

5、绑定style样式

 <div :style="{color:green,fontSize:font}">5、绑定style样式</div>
 //在data中声明
  green:'green',
  font:45+'px'

6、用对象绑定style样式

  <div :style="styleObj">6、用对象绑定style样式</div>
  //在data中对象声明
   styleObj:{
         color:'#0ff',
        fontSize:50+'px'
    }

本节要点：绑定的动态样式一定要声明！！

八、其他内部指令(v-pre & v- cloak & v-once)

• v-pre指令

在模板中跳过vue的编译，直接输出原始值。但是在标签中加入v-pre就不会输出vue中的data值了。 <div v-pre>{{message}}</div> 这时并不会输出我们的message值，而是直接在网页中显示{{message}}

• v-clock指令

在vue渲染完指定的整个DOM后才进行显示，它必须和css样式一起使用

 [v-cloak]{
        display: none;
    }
    
<div v-cloak>{{message}}</div>

• v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程

<div v-once>第一次绑定的值：{{message}}</div>
<div>
    <input type="text" v-model="message">
</div>

在上述例子中进行数据的双向绑定时，带有v-once的标签没有动态渲染数据

总结

以上时对Vue指令的复习，通过这篇文章，对Vue的指令有了全面和深刻的了解。

整篇文章是我在看完技术胖老师的视频教学后时隔半年多后进行复习时所写，如有错误的地方请指出

本文代码已上传到git，地址：github.com/cybymm/reVu…

原文链接jspang.com/detailed?id…