Vue——入门案例

zsl2010zsl

已于 2022-05-07 01:10:30 修改

阅读量195

点赞数

文章标签： vue.js 前端

于 2022-05-06 21:45:12 首次发布

本文链接：https://blog.csdn.net/zsl2010zsl/article/details/124619447

版权

案例1——{{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    {{message}}<br>
    <span :title="message">
        你看到了什么？
    </span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                message: "hello, vue!"
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

案例2——v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>C</h1>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                type: 'A'
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

案例3——v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <li v-for="(item, index) in items">{{item.message}}--{{index}}</li>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                items: [
                    {message: 'Java'},
                    {message: '前端'},
                    {message: '运维'}
                ]
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

案例4——@click, methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <button @click="sayHi">click Me</button>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                message: "今天你学Java了吗？"
            }
        },
        methods: { // 方法必须定义在Vue的Methods对象中
            sayHi() {
                alert(this.message)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

案例5——input, textarea, v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}<br>
    输入的文本：<textarea v-model="message">{{message}}</textarea><br>
    性别：
    <input type="radio" name="sex" value="男" v-model="who">男
    <input type="radio" name="sex" value="女" v-model="who">女
    <p>
        选中了谁：{{who}}
    </p>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
                message:"123",
                who: ""
            }
        },
    })
</script>
</body>
</html>

在这里插入图片描述

案例6——select, v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data() {
            return {
               selected: ""
            }
        },
    })
</script>
</body>
</html>