Vue学习分享

最新推荐文章于 2024-03-06 23:02:33 发布

spirit_ferry

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量133

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/spirit_ferry/article/details/124606865

版权

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>Document</title>
    <script src="https://unpkg.com/vue@next "></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
<body>
    <div id="main"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "hello world!"
                show：“true”
            }
        },
        template: `<div>{{message}}</div>`
    });
    const vm = app.mount("#main");
</script>
</html>

可以用插值表达式使用变量{{data}}
vue指令v-html（以html的形式展示message变量)：<div v-html="message"></div>
vue指令v-bind（:）(将title属性与变量message的值绑定)：<div :title="message"></div>
可以使用插值表达式使用JS表达式(只能是表达式不能是JS语句)：<div>{{JS表达式（‘a’+‘b’）}}</div> //ab
vue指令v-once ：数据只能操作一次（改变一次），后续改变data中的变量值不再改变页面渲染效果：<div v-once>{{message}}</div>
vue指令v-if DOM元素是否存在取决于v-if=“show”中show的值：<div v-if="show">{{message}}</div>
vue指令v-on（@)：事件绑定:<div @click="handleClick"></div>
动态参数（动态属性/动态事件）：通过变量定义属性[name]或者事件[event]

data() {
            return {
                message: "hello world!",
                name: 'title',
                event: 'mouseenter'
            }
        },

template: `<div :[name]="message" @[event]='handleClick'>{{message}}</div>`