VUE的简单使用-CSDN博客

本文链接：https://blog.csdn.net/dolly_baby/article/details/131355246

VUE的简单使用

本文基于Vue.js v2.5.17

引入Vue.js库，搭建基本骨架

<!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>Vue基础</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        
    </div>
    <!-- 开发环境版本 -->
    <script src="vue.js"></script>
	<script>
        var app = new Vue({
            el: "#app", 
            data: {
                //添加属性
            },
            methods: {
				//添加方法                
            }
        })
    </script>
</body>    
</html>

插值表达式的使用

<div id="app">
    <h2 v-text="message + '!'"></h2>
    <h2>A {{ message + "!" }} program.</h2>
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})

Hello World!!

A Hello World!! program.

v-html和v-text的区别，v-text指令和插值表达式渲染数据而不进行标签解析，v-html不仅可以渲染数据而且可以解析标签。

<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        content: "<a href='http://www.itheima.com'>黑马程序员</a>"
    }
})

黑马程序员

<a href='http://www.itheima.com'>黑马程序员</a>

单击双击事件的实现方式

<div id="app">
    <input type="button" value="单击事件" v-on:click="dolt"/>
    <input type="button" value="单击事件" @click="dolt"/>
    <input type="button" value="双击事件" @dbclick="dolt"/>    
</div>

var app = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
        dolt: function() {
            alert("Hello");
        }
    }
})

点击更改食材替换菜品

<div id="app">
    <input type="button" value="更改食材" @click="changeFood"/>{{ food }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        food: "糖醋里脊"
    },
    methods: {
        changeFood: function() {
            this.food = "宫保鸡丁";
        }
    }
})

简单计数器的实现

<div id="app">
    <div class="input-num">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        num: 1
    },
    methods: {
        add: function() {
            if (this.num < 10) {
                this.num++;
            }
        },
        sub: function() {
            if (this.num > 0) {
                this.num--;
            }
        }
    }
})

.input-num {
    width: 150px;
    height: 100%;
    background-color: white;
    margin: 0 auto;
}

.input-num button {
    width: 50px;
    font-size: 40px;
    color: #ad2a27;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: grey;
}

.input-num span {
    width: 50px;
    color: aqua;
}

v-if和v-show控制元素的显示和隐藏，v-if条件成立元素才会出现，而v-show元素一直在文档中。

<div id="app">
    <button @click="toggleIsShow">
        切换显示
    </button>
    <p v-if="isShow">程序员</p>
    <p v-show="isShow">设计师</p>               
</div>

var app = new Vue({
    el: '#app',
	data: {
        isShow: false
    },
    methods: {
        toggleIsShow: function() {
            this.isShow = !this.isShow;
        }
    }
})

for循环遍历列表

<div id="app">
    <ul>
        <li v-for="(item, index) in arr">
        	城市{{ index + 1 }}：{{ item }}
        </li>
    </ul>
</div>

var app = new Vue({
    el: '#app',
    data: {
        arr: ["南京", "上海"， "淮安"]
    }
})

城市1: 南京
城市2: 上海
城市3: 苏州

单击事件函数添加参数以及键盘按下事件

<div id="app">
    <input type="button" value="单击" @click="duck(666, '没毛病')"/>
    <input type="text" @keyup.enter="sayHi"/>
</div>

var app = new Vue({
    el: '#app',
    data: {
        
    },
	methods: {
        duck: function(p1, p2) {
            alert(p1 + p2)
        },
        sayHi: function() {
            alert('晚安好')
        }
    }
})

切换图片的样式

<div id="app">
    <img v-bind:src="imgSrc" alt="" :title="imgTitle + '!!!'" :class="{active:isActive}" @click="toggleActive"/>
</div>

var app = new Vue({
	el: "#app",
	data: {
        imgSrc: "https://www.baidu.com/img/flexible/logo/pc/result.png",
        isActive: false,
        imgTitle: "小小程序员"
    },
    methods: {
        toggleActive: function() {
            this.isActive = !this.isActive
        }
    }
})