【复习】VueJS之内部指令

Vuejs

源码：https://github.com/zhuangZhou/vuejs

下载Vue.js

官网：http://vuejs.org

live-server使用

live-server是一个简单的服务器，具有热更新

使用npm进行全局安装

npm install -g live-server

在项目目录中启动

liver-server

内部指令

v-if & v-else & v-show

1、v-if

v-if 用来判断是否在加载HTML的DOM，比如模拟用户登录

<div v-if="isLogin">你好，XXX</div>
<div v-else>请登录</div>

在Vue里的data定义isLogin的值，当为true时，显示“你好，XXX”，当为false时，显示“请登录”。

2、v-show

v-show是通过调整css的display属性的属性值，来显示和隐藏节点，其实在HTML渲染时，已经加载了DOM；

<div v-show="isLogin">哈哈哈</div>

当isLogin为true时，显示“哈哈哈”，当为false时，隐藏。

3、两者的区别

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

v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for

1、 v-for

v-for是用来循环data中的数组，来解析重复模板；

2、 基本用法

模板：

<ul>
    <li v-for="(item,index) in list">
       {{index}} - {{item}}
    </li>
</ul>

js:

var vm = new Vue({
    ...
    data(){
        return{
            list: [20, 23, 18, 65, 32, 19, 5, 56, 41]
        }
    }
});

模板中的使用形式是v-for="(item,index) in list" ，其中list是源数据数组，即js中data的list数组，item是数组元素迭代的别名（可以随便起），index是数组元素的索引，可以省略写成v-for="item in list";

3、排序

使用排序，我们需要使用computed属性，在computed里面，重新声明一个sortList对象，为什么要重新声明，是为了不污染源数据。

var vm = new Vue({
    ...
    computed:{
        sortList(){
            var list = [];
            for(var i =0;i<this.list.length;i++){
                list.push(this.list[i]);
            }

            return list.sort(sortNumber);
        }
    }
})

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

4、对象循环输出

在实际项目中，我们使用的最多的就是对象的循环输出，那如何输出呢？

首先，在js中定义一个对象数组：

var vm =  new Vue({
    ...
    data(){
        return{
            person:[
                {
                    name: 'xhz',
                    age: 22
                },
                {
                    name: 'qws',
                    age: 34
                },
                {
                    name: 'asd',
                    age: 12
                },
                {
                    name: 'xdc',
                    age: 23
                }
            ]
        }
    }
})

然后，在模板中输出

 <ul>
    <li v-for="(p,index) in person">
        {{index+1}} - {{p.name}} - {{p.age}}
    </li>
</ul>

对象的排序函数：

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

v-text & v-html

前面我们使用插值表达式（即{{XXX}}）在HTML中输出data，当网速比较慢或者加载javascript出错时，会出现一个很大的弊端，即暴露我们的{{XXX}}；因此，Vue给我们提供v-text指令来解决这一问题：

<div v-text="text"></div>

当数据里需要解析HTML标签的时候，v-text是无法输出的，因此，Vue还给我们提供了一个指令：v-html

 <div v-html="html"></div>

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

v-on

v-on是用来绑定监听事件的，可以监听DOM触发的一些javascript代码；

<button v-on:click="add">add</button>
<button @click="add">add</button>

上面的两行代码是一个意思，@click是v-on:click的简写；

当然，除了绑定click事件，其他的事件也可以绑定，比如change事件，focu事件，键盘事件，下面来说说键盘事件：

<input type="text" @key.enter="onKey">

代码的意思是，当按下"enter"键时，触发onkey事件；也可以使用键值：

<input type="text" @key.13="onKey">

v-model

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

1、双向数据绑定

模板：

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

js:

var vm = new Vue({
    ...
    data(){
        return{
            inputValue:'Hello World!'
        }
    }
})

2、 修饰符

• lazy：取代 imput 监听 change 事件。

• number：输入字符串转为数字。

• trim：输入去掉首尾空格。

  <p>v-model.lazy:<input type="text" v-model.lazy="inputValue"></p>
  <p>v-model.number:<input type="text" v-model.number="inputValue"></p>
  <p>v-model.trim:<input type="text" v-model.trim="inputValue"></p>
  
  

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

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

4、多选按钮绑定一个值

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

5、多选绑定一个数组

<p>
    <input type="checkbox" name="zz" id="zz" value="zz" v-model="names">
    <label for="zz">zz</label>
    <input type="checkbox" name="yym" id="yym" value="yym" v-model="names">
    <label for="yym">yym</label>
    <input type="checkbox" name="zxr" id="zxr" value="zxr" v-model="names">
    <label for="zxr">zxr</label>
</p>

6、单选按钮绑定数据

<p>
    <input type="radio" name="1" id="man" value="男" v-model="sex">
    <label for="man">男</label>
    <input type="radio" name="0" id="woman" value="女" v-model="sex">
    <label for="woman">女</label>
</p>

v-bind

v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。

模板：

<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt=""></p>
<p><img :src="imgSrc" alt=""></p>

上面两行代码是一个意思，v-bind:src是完整语法，:src是简写；

js:

var vm = new Vue({
    ...
    data(){
        return{
            imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",

        }
    }
});

当然，除了绑定图片地址，还可以绑定<a></a>标签的href属性：

<a :href="url"></a>

在工作中我们经常使用v-bind来绑定css样式：

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

1、直接绑定class样式

 <p><span :class="className">1、绑定class</span></p>

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

<p>
    <span :class="{classA:isOK}">2、绑定class判断</span>
    <input type="checkbox"  id="isOK" v-model="isOK">
    <label for="isOK">isOK:{{isOK}}</label>
</p>

3、绑定class中的数组

<p><span :class="[classA,classB]">3、绑定class数组</span></p>

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

<p><span :class="isOK?classA:classB">4、绑定class三元运算符</span></p>

5、绑定style

<p><span :style="{color:red,fontSize:font}">1、绑定style</span></p>

6、用对象绑定style样式

 <p><span :style="styleObj">2、对象绑定style</span></p>

var vm = new Vue({
    el: '#app',
    data() {
        return {
            imgSrc: "https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
            url: 'http://www.baidu.com',
            className:'classA',
            classA:'classA',
            classB:'classB',
            isOK:false,
            red:'green',
            font:'26px',
            styleObj:{
                color:'red',
                fontSize:'30px'
            }
        }
    }
})

v-pre & v-cloak & v-once

1、v-pre

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

<div v-pre>{{msg}}</div>

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

2、v-cloak

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

[v-cloak] {
    display: none;
}

<div v-cloak>
    {{ message }}
</div>

3、v-once

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

<div>
    <input type="text" v-model="msg">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
</div>