模板中使用插值表达式语法

将JS变量或者表达式放到{{}}之间

// 变量
const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')

// 表达式
const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    template: `<div>{{Math.max(1,2)}}</div>`
    })
const vm = app.mount('#root')

模板中使用v-html指令

不希望data中带有html标签的变量放到模板中进行转义时使用

 const app = Vue.createApp({
    data() {
        return {
            message: '<strong>hello world</strong>'
        }
    },
    // template: `<div>{{message}}</div>`
    template: `<div v-html="message"></div>`
 })
 const vm = app.mount('#root')

<div v-html="message"></div>它的意思是通过html的方式展示变量message,就不会对标签进行转义

模板中使用v-bind绑定属性

eg: 想在模板中绑定title属性值为data中的变量，下面这种写法，绑定的是字符串messgae而不是message变量

 const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    // template: `<div>{{message}}</div>`
    template: `<div title="message">hello world</div>`
})
const vm = app.mount('#root')

进行修改后：

  const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    // template: `<div>{{message}}</div>`
    template: `<div v-bind:title="message">hello world</div>`
})
const vm = app.mount('#root')

它的意思是让div标签上展示的title属性同message变量做绑定

eg: 输入框的disabled属性绑定data中的变量

如果按照下面的写法input输入框中的disabled绑定的就不是变量而是字符串

const app = Vue.createApp({
    data() {
        return {
            disabled: true
        }
    },
    // template: `<div>{{message}}</div>`
    template: `<input disabled="disabled"/>`
})
const vm = app.mount('#root')

应该改成：v-bind:disabled

 const app = Vue.createApp({
    data() {
        return {
            disabled: true
        }
    },
    // template: `<div>{{message}}</div>`
    template: `<input v-bind:disabled="disabled"/>`
})
const vm = app.mount('#root')

模板中使用v-once指令

data中的变量的值只在初次渲染的时候使用一次，之后变量的值就算发生修改后(vm.$data.message)，它的值就不再发生变化了。它的应用是降低无用的渲染，提高渲染的效率

  const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    template: `<div v-once>{{message}}</div>`
})
  const vm = app.mount('#root')

模板中使用v-if指令

标签展示与否由v-if中关联的变量决定

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            show: true
        }
    },
    template: `<div v-if="show">{{message}}</div>`
})
const vm = app.mount('#root')

模板中使用v-on指令

v-on指令用于绑定事件，事件的方法要写在mehtods对象中

 const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            show: true
        }
    },
    methods:{
        handleClick() {
            alert('hello world')
        }
    },
    template: `<div v-on:click="handleClick">{{message}}</div>`
})
const vm = app.mount('#root')

指令的简写

事件绑定语法的缩写 eg: v-on:click 简写成@click

绑定属性语法的简写 eg: v-bind:title 简写成 :title

动态参数

之前绑定的属性它的属性名都是固定如v-bind:title绑定的属性title就是写死的固定不变的，如果想让绑定的属性名也关联data中的变量怎么办？

我们需要给绑定的属性/事件名加上"[ ]"

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            show: true,
            name: 'title',
            event: 'click'
        }
    },
    methods:{
        handleClick() {
            alert('hello world')
        }
    },
    template: `
      <div 
        @[[event]="handleClick"
        :[name]="message"
      >
        {{message}}
      </div>`
})
const vm = app.mount('#root')

这样把绑定的属性同data中的变量name关联起来了(动态属性)，当然我们可以按照同样的方法让绑定的事件名也同data中的变量关联起来(动态方法)

阻止事件的默认行为

方法一：在事件方法中获取事件对象event, e.preventDefault()
方法二：在事件后面加上.prevent修饰符

 const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            show: true,
            name: 'title',
            event: 'click'
        }
    },
    methods:{
        handleClick(e) {
            // e.preventDefault()
            alert('hello world')
        }
    },
    template: `
      <form action="https://www.baidu.com" @click.prevent = 'handleClick'>
        <button>提交</button>
      </form>
      `
})
const vm = app.mount('#root')

vue常用模板语法