Vue学习分享

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

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