vue2.0学习-内部指令

Posted guyanv

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0学习-内部指令相关的知识,希望对你有一定的参考价值。

vue2.0学习(一)-内部指令

GitHub源码 https://github.com/sunnyguyan/VueDemo

1.v-if v-else v-show

v-if:是vue的一个内部指令,指令用在我们的html

v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称

<div v-if=‘isLogin‘>你好,guyan</div>

完整的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if&v-else&v-show</title>
    <script type="text/javascript" src="../assert/js/vue.js"></script>
</head>
<body>
    <h1>v-if</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好,Yan!</div>
         <div v-else>请登录后操作</div>
    </div>
    <script>
    var app=new Vue({
        el:‘#app‘,
        data:{
           isLogin:false
        }
    })
    </script>
</body>
</html>

这里我们在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:Yan,如果为false时,就显示请登录后操作

v-show

调整css中display属性,DOM已经加载,只是CSS控制没有显示出来

<div v-show="isLogin">你好,Yan</div>

v-if和v-show的区别

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

2. v-for指令:解决模板循环问题

v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。

一 基本用法

模板用法

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

js写法

var app=new Vue({
     el:‘#app‘,
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-for 案例</title>
</head>
<body>
    <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循环出来,需要注意的是,你需要那个html标签循环,v-for就写在那个上边。

二 排序

我们已经顺利的输出了我们定义的数组,但是我需要在输出之前给数组排个序,那我们就用到了Vue的computed:属性。

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

我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。
如果一切顺利的话,你已经看到了结果,但是这个小程序还是有个小Bug的,现在我把数组修改成这样。

items:[20,23,18,65,32,19,5,56,41]

我们把其中的54修改成了5,我们再看一下结果,发现排序结果并不是我们想要的。
技术分享图片

我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。
  function sortNumber(a,b){
            return a-b
  }

用法

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

三 对象循环输出

我们上边循环的都是数组,那我们来看一个对象类型的循环是如何输出的。

我们先定义个数组,数组里边是对象数据

  students:[
        {name:‘king‘,age:11},
        {name:‘robot‘,age:33},
        {name:‘panda‘,age:65},
        {name:‘guyan‘,age:25}
    ]

在模板中输出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

加入索引序号:

<ul>
  <li v-for="(student,index) in students">
    {{index}}:{{student.name}} - {{student.age}}
  </li>
</ul>

排序,我们先加一个原生的对象形式的数组排序方法:

//数组对象方法排序:
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中进行调用排序

sortStudent:function(){
     return sortByKey(this.students,‘age‘);
}

3. v-text&v-html

我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:

<span>{{ message }}</span>=<span v-text="message"></span><br/>

如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。

<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。

需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。


完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-text & v-html 案例</title>
</head>
<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <span>{{ message }}</span>=<span v-text="message"></span><br/>
        <span v-html="msgHtml"></span>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                message:‘hello Vue!‘,
                msgHtml:‘<h2>hello Vue!</h2>‘
            }
        })
    </script>
</body>
</html>

4.v-on:绑定事件监听器

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

一、使用绑定事件监听器,编写一个加分减分的程序。


效果如图

技术分享图片

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-on事件监听器</title>
</head>
<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
       本场比赛得分: {{count}}<br/>
       <button v-on:click="jiafen">加分</button>
       <button v-on:click="jianfen">减分</button>
 
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                }
            }
        })
    </script>
</body>
</html>

我们的v-on 还有一种简单的写法,就是用@代替

<button @click="jianfen">减分</button>

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

绑定事件写法:

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

js代码

 onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

5.v-model指令

v-model指令,我理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。

一、我们来看一个最简单的双向数据绑定代码:

html文件:

<div id="app">
    <p>原始文本信息:{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

js代码

var app=new Vue({
  el:‘#app‘,
  data:{
       message:‘hello Vue!‘
  }
 })

二、修饰符

  1. .lazy:取代input监听change事件
  2. .number:输入字符串转为数字
  3. .trim:输入去掉首尾空格

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

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

四、多线按钮绑定一个值

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

五、多选绑定一个数组

  <h3>多选框绑定数组</h3>
                <p>
                    <input type="checkbox" id="isPang" value="ispang" v-model="web_names">
                    <label for="isTrue">ispang</label>
                    <input type="checkbox" id="ispan"  value="ispan" v-model="web_names">
                    <label for="isTrue">ispan</label>
                    <input type="checkbox" id="panpan"  value="panpan" v-model="web_names">
                    <label for="isTrue">panpan</label>
                </p>

6.v-bind指令

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

绑定CSS样式

在工作中我们经常使用v-bind来绑定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样式

    <div :style="styleObject">6、用对象绑定style样式</div>
    var app=new Vue({
       el:‘#app‘,
       data:{
       styleObject:{
           fontSize:‘24px‘,
           color:‘green‘
            }
        }
    })

7.其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

这时并不会输出我们的message值,而是直接在网页中显示{{message}}

v-cloak指令

在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>







以上是关于vue2.0学习-内部指令的主要内容,如果未能解决你的问题,请参考以下文章

vue内部指令学习经验

Vue2.0 的漫长学习ing-8

Vue2.0内部指令(中)|言Sir‘s blog

vue2.0 代码功能片段

Vue2.0学习—自定义指令(四十九)

Vue2.0学习—v-pre指令(四十八)