Vue入门-1.Vue基本语法

于 2023-02-28 21:36:52 发布
阅读量123 收藏
点赞数
分类专栏： Web 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44086832/article/details/129270648
版权
该博客主要介绍了Vue的相关知识，包含基本语法，以及内容渲染、属性绑定、事件绑定、条件渲染、列表渲染等指令，还提及了使用JavaScript表达式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. Vue基本语法

1. Vue基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.Vue基本语法</title>
    <!-- 1.导入vue的脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 2.声明要被Vue控制的DOM区域 -->
    <div id="app">{{message}}</div>
</body>
<!-- 3.创建Vue实例对象 -->
<script>
    const hello = {
        // 指定数据源, 即MVVM中的Model
        data:function(){
            return{
                message:'Hello Vue'
            }
        }
    }

    const app = Vue.createApp(hello)
    app.mount('#app')
</script>
</html>

2.内容渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>name: {{username}}</p>
        <p>sex: {{gender}}</p>

        <!-- 大括号不会渲染html标签 -->
        <p>{{desc}}</p>

        <!-- 以html的形式渲染 -->
        <p v-html="desc"></p>
    </div>
</body>
<script>
    const vm = {
        data:function(){
            return{
                username: "111",
                gender: "男",
                desc: '<a href="https://www.baidu.com">百度</a>'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>
</html>

3.属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{width:w}" alt="" >
    </div>
</body>
<script>
    const vm = {
        data: function(){
            return {
                link: "http://www.baidu.com",
                // 文本框的提示内容
                inputValue: '请输入内容',
                // 图片地址
                imgSrc: './image/11.jpg',
                w: '50px'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>
</html>

4.使用JavaScript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{ok? 'True':'False'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <p>{{user.name}}</p>
    </div>
</body>
<script>
    const vm={
        data:function(){
            return{
                number: 9,
                ok: false,
                message: 'ABC',
                id: 3,
                user:{
                    name:'yang',
                }
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>
</html>

5.事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>count: {{count}}</h3>
        <!-- 通过v-on 绑定事件 -->
        <button v-on:click="addCount">+1</button>
        <!-- 和 @事件名 效果相同 -->
        <button @click="count+=1">+1</button>
    </div>    

</body>

<script>
    const vm = {
        data: function(){
            return {
                // 初始值为0
                count:0,
            }
        },
        // 定义方法
        methods: {
            // 点击按钮,  count自增1
            addCount(){
                this.count += 1
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount("#app")
</script>
</html>

6.条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <!-- if else 条件指令 -->
    <div id="app">
        <button @click="flag = !flag">按钮</button>
        
        <!-- v-if和v-show的区别:
                v-if 中flag为false, 则p标签不会创建
                v-show 中flag为false, p标签仍然会创建, 不过会通过 display="none"从而使其不显示
        -->
        <p v-if="flag">v-if控制</p>
        <p v-show="flag">v-show控制</p>

        <p v-if="type=='A'">优秀</p>
        <p v-else-if="type=='B'">良好</p>
        <p v-else>需要加强</p>
    </div>
</body>
<script>
    const vm = {
        data: function(){
            return{
                flag: false,
                type: 'A'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount("#app")
</script>
</html>

7.列表渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 添加用户的区域 -->
        <!-- v-model 双向绑定, 即页面的name发生变化, 则后端的name会发生变化, 后端的name发生变化, 页面的name也会发生变化 -->
        <!-- :value 默认单项绑定, 即页面的name发生变化, 则后端的name不会发生变化, 后端的name发生变化, 页面的name会发生变化 -->
        <input type="text" v-model="name">
        <button @click="addUser">添加</button>

        <!-- 用户列表区域, 使用列表显示所有的用户 -->
        <ul>
            <!-- 为列表中的对象添加key关键字, 每一个对象的key应该是独一无二的 -->
            <!-- 不要使用index索引作为key, 因为添加的用户可能添加到列表最前面, 从而会导致index变化 -->
            <li v-for="(user, index) in userlist" :key="user.id">
                <input type="checkbox">
                <div>name: {{user.name}}</div>
            </li>
        </ul>
    </div>
</body>
<script>
    const vm = {
        data : function(){
            return{
                // 定义用户列表
                userlist:[
                    {id:1, name:'111'},
                    {id:2, name:'222'}
                ],
                // 添加的下一个用户的id
                nextId: 3,
                // 输入的用户名
                name: ''
            }
        },
        methods:{
            // 添加用户函数
            addUser(){
                this.userlist.unshift({id:this.nextId, name:this.name})
                this.name=''
                this.nextId += 1
            }
        }
    }

    const app = Vue.createApp(vm)
    app.mount("#app")
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值