vue3 模板

 一、插值

1.Mustache 语法

html

<span>Message: {{ msg }}</span>

 js

    <div id="vm">{{ msg }}</div>
    <script>
        Vue.createApp({
            data(){
                return {
                    msg:'hello'
                }
            }
        }).mount('#vm')
    </script>

2.v-once

能执行一次性地插值，当数据改变时，插值处的内容不会更新，注意会影响该节点上的其它数据绑定

    <div id="vm">
        <button @click='add' v-once >{{ i }}</button>
  
    </div>
    <script>
        Vue.createApp({
            data() {
                return { i: 0 }
            },
            methods: {
                add() {
                        this.i++
                }
            }
        }).mount('#vm')
    </script>

3.解析html

v-html 会把html渲染的浏览器

    <div id="vm">
        <span v-html="msg">
    </div>
    <script>
        Vue.createApp({
            data() {
                return { msg: '<h1>加粗</h1>' }
            },
        }).mount('#vm')
    </script>

动态渲染很危险，注意使用。

4.属性绑定

  Mustache语法不能使用在html属性上。可以使用v-bind的模式,

    <div id="vm">
        <a v-bind:href="url">baidu</a>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { url: 'http://www.baidu.com' }
            },
        }).mount('#vm')
    </script>

 5.JavaScript 表达式

    <div id="vm">
        {{ number + 1 }}

        {{ ok ? 'YES' : 'NO' }}

        {{ message.split('').reverse().join('') }}

        <div v-bind:id="'list-' + id"></div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { number:1, ok:true,message:'hello',id:10}
            },
        }).mount('#vm')
    </script>

 

二、指令

1.定义

在vue里带有v-前缀的特殊属性表示指令。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

例如 上面的v-on

2.参数

v-bind是指令 href是指令的参数

<a v-bind:id="i"> ... </a>

3.动态参数

可以通过 data property动态把变量复制给指令的参数

<a v-bind:[attributeName]="url"> ... </a>

例如

    <div id="vm">
        <a v-bind:[a]='url'> baidu </a>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { a:'href',url:'http://www.baidu.com'}
            },
        }).mount('#vm')
    </script>

注意：

避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。

4.修饰符

修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

修饰符有v-model修饰符、事件修饰符、按键修饰符、系统修饰符键等。

按回车时执行ok方法

    <div id="vm">
        <input v-on:keyup.enter="ok">
    </div>
    <script>
        Vue.createApp({
            methods: {
                ok() {
                    alert('执行');
                }
            }
        }).mount('#vm')
    </script>

 

三、指令缩写

1.v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

2.v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>