Vue-----Vue本地应用篇(1)

---

前言

上一篇介绍了Vue的基础和简介，这一篇将学习Vue的指令应用
通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以v-开头的一组特殊语法

---

一、内容绑定，事件绑定

1.v-text

❤v-text
v-text指令的作用是：设置标签的内容(textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部还支持写表达式

<div id="app">
    <h2 v-text="message"></h2>
    <h2 v-text="info"></h2>
    <h2>{{message}}超级帅</h2>
    <h2 v-text="message+'!'"></h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"李奕赫!",
            info:"超级帅"
        }
    })
</script>

 
执行结果
 

2.v-html

❤v-html
设置标签的innerHTML
v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
    <p v-html="name"></p>
    <p v-text="name"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"<a href='http://www.4399.com'>李奕赫</a>"
        }
    })
</script>

 
执行结果

 

3.v-on基础

❤v-on基础
为元素绑定元素（例鼠标点击，鼠标移动）
v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

<div id="app">
    <input type="button" value="v-on指令" v-on:click="it">
    <input type="button" value="v-on简写" @click="it">
    <input type="button" value="双击事件" @dblclick="it">
    <h2 @click="changebeer">{{beer}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            beer:"雪花"
        },
        methods:{
            it:function (){
                alert("李奕赫帅");
            },
            changebeer:function (){
                this.beer+="不倒，我不倒！";
            }
        }
    })
</script>

 
执行结果
点击按钮就会触发事件（弹出警告）

二、综合指令（计数器模板）

<div id="app">
    <div class="input-num">
        <button @click="sub">
            -
        </button>
        <span>{{num}}</span>
        <button @click="add">
            +
        </button>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods: {
            add:function (){
                if(this.num<10){
                    this.num++;
                }else{
                    alert("最大了，点不了");
                }
            },
            sub:function (){
                if(this.num>0){
                    this.num--;
                }else{
                    alert("最小了，点不了");
                }
            }
        }
    })
</script>

 
css模板比较多就写在下面了

body{
    background-color: #f5f5f5;
}

#app {
    width: 480px;
    height: 80px;
    margin: 200px auto;
}

.input-num{
    height: 100%;
    display: flex;
    border-radius: 10px;         /* 圆角边框*/
    overflow: hidden;           /*内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏,父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应*/
    box-shadow: 4px 4px 4px #adadad;     /*box-shadow属性可以设置一个或多个下拉阴影的框*/
    border: 1px solid #c7c7c7;
    background-color: #c7c7c7;
}

button{
    width: 150px;
    height: 100%;
    font-size: 40px;
    color: #ad2a27;
    cursor: pointer;      /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 pointer光标呈现为指示链接的指针（一只手）*/
    border: none;
    outline: none;
    background-color:rgba(0, 0, 0, 0);
}

span{
    height: 100%;
    font-size: 40px;
    flex: 1;        /*利用 flex: 1; 确实实现了三个不同内容的 div 平分空间,*/
    text-align: center;
    line-height: 80px;
    font-family:auto;
    background-color: white;
}

执行效果

之后大家就可以自己动手操作了!

---

总结

本文仅仅介绍了本地应用的一部分，详细学习请到下方专栏进行学习。