Vue-Command

Vue Command

Posted by 梁三叶 on 2019-01-09

vue指令

v-if&v-else

v-if指令
使用：v-if的使用通常与v-else指令一起，两者表示选择。

v-if:是vue 的一个内部指令，指令用在我们的html中。
用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

请看一个实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <h1>v-if&v-else</h1>
    <hr>
    <div id="app1">
    <div v-if="isLogin">你好，梁三叶</div>
    <div v-else>请登录！</div>
    </div>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            isLogin:true
        }
    })
    </script>
</body>

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好，梁三叶，如果为false时，就显示请登录！。

v-show

使用：当v-show所对应的变量的值为true时，直接加载显示标签里面的内容。

v-show:调整css中display属性，DOM已经加载

v-if与v-show的区别

  • v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
  • v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for

v-for指令：解决列表值循环问题，是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

一、基本用法
模板写法

1
2
3
<li v-for="item in items">
        {{item}}
</li>

js写法

1
2
3
4
5
6
var app=new Vue({
     el:'#app',
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                {{item}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[20,23,18,65,32,19,54,56,41]
            }
        })
    </script>

这是一个基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要那个li标签循环，v-for就写在那个边上。

二、数组排序

我们现在可以循环输出数组中的数据，当若要求输出数据按排好序输出则要求用到Vue的computed：属性。

1
2
3
4
5
computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

当前我们在computed属性里面新声明了一个对象sortItems,如果不重新声明会污染原来的数据源，这是Vue不允许的，所以我们要重新声明一个对象。

但是，这个排序方法有个bug,当我们将数组中元素64，改为6时，发现她的排序结果并没有改变。
这时，我们可以自己编写一个方法sortNumber，然后传给我们的sort函数解决这个Bug。

1
2
3
4
5
6
7
8
9
function sortNumber(a,b){
            return a-b
  }

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

三、循环对象输出
我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组，数组里边是对象数据

1
2
3
4
5
6
students:[
  {name:'jackson',age:32},
  {name:'roywang',age:30},
  {name:'karry',age:21},
  {name:'tfboys',age:45}
]

模板中输出

1
2
3
4
5
<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

加入序列号

1
2
3
4
5
6
7
8
//数组对象方法排序:
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中进行调用排序

1
2
3
sortStudent:function(){
     return sortByKey(this.students,'age');
}

注意：vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。

v-text&v-html

  • v-text:在html中输出data中的值，我们用的是，v-text可以解决当我们网速很慢或者javascript出错时，暴露我们的的问题

  • v-html:当data中的文本中包含html标签时，使用v-text,是无法使html标签起作用的，可以使用v-html将标签给解析。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <body>
    <h1>v-text&v-html 实例</h1>
        <hr>
        <div id="app1">
            <span>{{message}}</span><br/>
             <span v-text="message"></span>
            <span v-html="ddodo"></span><br/>
       

        </div>
        <script type="text/javascript">
        var app=new Vue({
            el:'#app1',
            data:{
                message:'welcome to the vue world!',
                ddodo:'<h2>welcome to the vue world</h2>'
            }
        })
        </script>
    </body>

    双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

最后输出结果为
welcome to the vue world!
welcome to the vue world!
welcome to the vue world!

v-on

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
一、使用绑定事件监听器，编写一个加分减分的程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>v-on 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
 <h1>v-on example</h1>
    <hr>
    <div id="app1">本场比赛得分：{{score}}
    <p>
      <button v-on:click="addscore">加分</button>
      <button @click="descore">减分</button><br/>//@为v-on的缩写
      <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
    </p>
</div>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            score:0,
            score2:1
        },
        methods: {
            addscore:function(){
                this.score++;
            },
            descore:function(){
                this.score--;
            },
            onEnter:function()
            {
                this.score=this.score+parseInt(this.score2)
            }
    //因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数换。
        },
    })
    </script>
</body>
</html>

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上也可以根据键值表来定义键盘事件： v-on:keyup.13=”onEnter”。

v-model

v-model：用于绑定数据源,就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
一、一个简单的表单绑定

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>
var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

二、修饰符

  • lazy：取代 imput 监听 change 事件。
  • .number：输入字符串转为数字。
  • .trim：输入去掉首尾空格。

三、文本区域加入数据绑定

1
<textarea  < cols="30" rows="10" v-model="message"></textarea>

四、多选按钮绑定一个值

1
2
3
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

五、多选绑定一个数组

1
2
3
4
5
6
7
8
9
<h3>多选框绑定数组</h3>
     <p>
        <input type="checkbox" id="roy_wang" value="roy_wang" v-model="web_names">
        <label for="isTrue">roy_wang</label>
        <input type="checkbox" id="karry_wang"  value="karry_wang" v-model="web_names">
        <label for="isTrue">karry_wang</label>
        <input type="checkbox" id="jackson_yee"  value="jackson_yee" v-model="web_names">
        <label for="isTrue">jackson_yee</label>
    </p>

六、单选按钮绑定数据

1
2
3
4
5
6
 <h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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>v-model 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model example</h1>
    <hr>
    <div id="app1">
       <p>原始文本数据：{{message}}梁三叶</p> <br/>
       <h3>文本框</h3>
        <p>v-model: <input type="text" v-model="message"></p>
        <p>v-model.lazy: <input type="text" v-model.lazy="message"></p>
        <p>v-model.number: <input type="text" v-model.number="message"></p>
        <p>v-model.trim: <input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <hr>
        <h3>多选框绑定数组</h3>
        <p>
        <input type="checkbox" id="roy_wang" value="roy_wang" v-model="web_names">
        <label for="isTrue">roy_wang</label>
        <input type="checkbox" id="karry_wang"  value="karry_wang" v-model="web_names">
        <label for="isTrue">karry_wang</label>
        <input type="checkbox" id="jackson_yee"  value="jackson_yee" v-model="web_names">
        <label for="isTrue">jackson_yee</label>
        </p>
        <p>{{web_names}}</p>
        <hr>
        <h3>单选框绑定</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
            <p>你选择的性别是：{{sex}}</p>
        </p>
    </div>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            message:'hello world!',
            isTrue:true,
            web_names:[],
            sex:'男'
        }
    })
    </script>
</body>
</html>

v-bind

v-bind:绑定处理HTML中的标签属性的指令

1
2
3
4
5
6
7
8
9
<div id="app">
    <img v-bind:src="imgSrc"  width="200px">//v-bind缩写：
</div>
var app=new Vue({
    el:'#app',
    data:{
          imgSrc:'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=278760005,1136614701&fm=58&bpow=505&bpoh=501'
     }
})

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。我们在data对象在中增加了imgSrc属性来供html调用。

绑定CSS样式
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式

<div :class="className">1、绑定classA</div>

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">2、绑定class中的判断</div>

3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>

4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5、绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式

1
2
3
4
5
6
7
8
9
10
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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>v-bind 绑定标签上 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind example</h1>
    <hr>
    <div id="app1">
       <p><img v-bind:src="imgSrc" width="200px"></p> 
        <p><a :href="webUrl" target="_blank">王小源</a></p>
        <hr>
        <div :class="clasName">1、绑定class</div>
        <div :class="{classA:isOK}">2、绑定class中的判断</div>
        <div :class="[classA,classB]">3、绑定class中的数组</div>
        <div :class="isOK?classA:classB">4、绑定class中的三元运算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isOK" v-model="isOK">
            <label for="isOK">isOK={{isOK}}</label>
        </div>
        <hr>
        <div :style="{ color:red, fontSize:font}"> 5、绑定style</div>
        <div :style="styleObject"> 5、绑定style对象</div>
    </div>
    <style>
    .classA{
        color: aqua;
    }
    .classB{
        font-size: 150%;
    }
    </style>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            imgSrc:'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=278760005,1136614701&fm=58&bpow=505&bpoh=501',
            webUrl:"https://www.baidu.com",
            clasName:'classA',
            isOK:false,
            classA:'classA',
            classB:'classB',
            red:'red',
            font:'20px',
            styleObject:{
                color:'green',
                fontSize:'24px'
            }
        }
    })
    </script>
</body>
</html>

其他内部指令

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

  • v-cloak
    在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

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

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>v-pre&v-cloak&v-once 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-pre&v-cloak&v-once 实例</h1>
    <hr>
    <div id="app1">
      <div v-pre>{{message}}</div>
      <div v-cloak>渲染完成后，才显示！</div>
      <div v-once> {{message}}</div>
      <div><input type="text" v-model="message"></div>
      <div> {{message}}</div>
    </div>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            message:'welcome to the vue world!'
        }
    })
    </script>
</body>
</html>

CATALOG
    FEATURED TAGS
    Vue-Command
    FRIENDS