vue模板基础应用及指令

目录

        1、前言

        2、模板使用语法

        3、vue各个常用模板指令的使用

---

1、前言

        在较为熟练掌握html、css、JavaScript（以下简称js）后，我们不难体会到js在进行页面数据操作时需要频繁在内部赋值并经过一系列自定义函数再读取占用反馈到页面上，如果在进行功能复杂度较高的项目时容易出现代码冗余的现象，于是我们便选择了vue模板语法采用一一对应的方式在页面与后台进行数据的同步更新，极大的减少了代码量并加快了运行速度。

        首先我们可以先看到以下简单的一段代码

<div>
    <button value="0"></button>
</div>

        在这段代码中，如果想要对button里的value值进行数据操作的话，我们首先需要在js文件中获取该dom，然后对其进行添加监听事件使其的value值发生改变，再反馈到button中的value中，这种方式不仅响应速度更慢，而且代码量也是比较多，在项目代码量逐渐增大的情况下不好进行日常的维护和更新。所以我们可以在学习模板语法之后实际上只需要很短的代码量便可以实现这个功能

<template>
    <button @click="count++">{{count}}</button>
</template>

        其中双花括号的写法被称为变量插值语法，@是监听事件的简写，template盒子是一个模板结构。

---

2、模板使用语法

        模板使用中语法可以分为变量插值、属性插值以及html代码插值

（1）变量插值

        变量插值通常指的是用双括号括起来创建的变量，这个变量可以被当场指定或者是在js中进行数据的处理变换

<template>
    <div>这是一个反映点击了几次的数字：{{num}}</div>
    <button @click="num++">点击我增加num变量大小</button>
</template>
<script>
    export default{
        data(){
            return{
                num:10
            }    
        }

    }
</script>

        在以上代码中，num的初始值为10，你可以从这里看出，双括号内的变量值可以在template中直接操作，也可以在script中对数据的更改。

（2）属性插值

        属性插值通常使用v-bind对你想设置的对象属性进行更改

<template>
    <div v-bind:id="redbox"></div>
    <div v-bind:style="blue"></div>
    <div v-bind:class="yellowArr"></div>
</template>
<script>
    export default{
        data(){
            return{
                redbox:redbox,
                blue:"height:100px,width:100px",//可以直接控制内联样式
                yellowArr:"{blue:false,yellow:true}"//可以通过数组的方式搭载数据
            }    
        }
    }

（3）html代码插值

        这里不能用以上的写法直接用html代码代替变量，因为变量不会自动转化为html结构代码，以下是错误例子：

<template>
    <p>{{prag}}</p>
</template>
<script>
    export default{
        data(){
            return{
                parg:"<p>i am a good boy</p>"
            }
        }
    }
</script>

正确的应该是使用v-html进行html代码插值：

<template>
    <p><p v-html:"parg"></p></p>
</template>
<script>
    export default{
        data(){
            return{
                parg:"<p>i am a good boy</p>"
            }
        }
    }
</script>

---

3、vue各个常用模板指令的使用

（1）v-bind

        v-bind是一种单向属性数据绑定的方法，常见于绑定属性数据：

<template>
    <p v-bind:name="first"></p>
    <p :name="first"></p>//下面这个是上面的缩写，v-bind可以使用：进行替代缩写
</template>

（2）v-on

        v-on是一种事件监听方式，通常可以运用内联式，并且可以请求外部函数：

<template>
    <button v-on:click="num++">{{num}}</button>
    <button @click="num1++">{{num1}}</button>//这是上述代码的缩写，采用@+事件触发方式=事件处理方式构成
    <button @click="num2Add">{{num2}}</button>
</template>
<script>
    export default{
        data(){
            return{
                num:0,
                num1:0,
                num2:0
            }
        },
        methods:{
            num2Add(){
                num2++//该函数是第三个button的处理方式
            }
        }
    }
    

（3）v-if和v-show

        v-if和v-show都是一种条件渲染指令，都是通过控制值的真假来判定是否渲染在页面中，但是也有区别

                ~1、v-if可以运用在template模板中，但是v-show不可以

                ~2、v-if可以采用多个条件并存的方式，v-show仅为两个条件，真或假

<template>
    <div v-if="item1">item1被渲染</div>
    <div v-else-if="item2">item2被渲染</div>
    <div v-else-if="item3">item3被渲染</div>
    <div else>没有东西被渲染</div>
    <button @click="item1=true">item1</button>
    <button @click="item2=true">item2</button>
    <button @click="item3=true">item3</button>
    <button @click="item1=false">重置</button>
</template>

                ~3、实际上，v-if才是真正的条件渲染，真和假都会同时影响v-if的渲染，无论是在视觉上还是实现在页面上，都是真就渲染，假就销毁；相比起来v-show就属于一种惰性渲染，v-show无论值是否为真都会渲染到页面上，他仅仅只是通过控制元素的display值来控制隐藏和显示，实际上并不是一种条件渲染（因为无论如何它都会被渲染）

<h1 v-show="true">我被渲染了</h1>
<h1 v-show="false">我其实也被渲染了，你看不到而已</h1>

                ~4、通常v-if具有更高的切换性能消耗（因为他在切换的同时需要重新销毁重新建立），v-show具有更高的初始渲染性能消耗（因为实际上是否为真值都会渲染到页面上，只是视觉效果隐藏了），在实际开发中，要考虑好组件是否需要切换渲染条件多还是很少变化条件来决定使用哪种渲染方式

（4）v-model

        v-model用于数据的双向绑定，无论是页面对绑定值进行改变还是后台进行更改，绑定值在任何一处都会发生变化：

<template>
    <input type="text" v-model="msg">
</template>
<script>
    export default{
        data(){
            return{
                msg:"please input your name"
            }
        }
            
    }

（5）v-once

        v-once可以控制该元素被渲染一次之后就不再更改，则可以使用v-once：

<template>
    <p>{{num}}</p>
    <button @click="num++">touch me to change num</button>
    //以下sum在被渲染一次之后就无法更改了，无论怎么点击都没有变化
    <p v-once>{{sum}}</p>
    <button @click="sum++">touch me to change sum</button>
</template>

（6）v-for

        v-for可以将同样的需要渲染的对象通过循环的方式同时渲染到页面上：

<template>
    <div v-for="item in items">
        <div>{{name}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                items:[
                    {name:"xiaoming",age:"20",sex:"nan"},
                    {name:"xiaohong",age:"21",sex:"nv"}
                ]
            }
        }
        
    }
</script>

        注意该循环的第一个对象的索引也是从0开始，我们同样也可以一起输出索引：

<template>
    <div v-for="(item,index) in items">
        <div>{{"No."+index+1}}</div>
        <div>{{name}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                items:[
                    {name:"xiaoming",age:"20",sex:"nan"},
                    {name:"xiaohong",age:"21",sex:"nv"}
                ]
            }
        }
        
    }
</script>

---

笔者学术能力有限，如有不当之处欢迎指出交流