1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title></title>
  7.   <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10.   <div id="root"></div>
  11. </body>

v-html

在div标签上，通过html的方式展示message这个变量

  1.   // {{}} 插值表达式
  2.   // v-html，v-bind(:)，v-on(@), 动态参数，修饰符
  3.   const app = Vue.createApp({
  4.     data() {
  5.       return {
  6.         message: '<strong>hello world</strong>',
  7.       }
  8.     },
  9.     template: `
  10.     <div v-html="message"></div>
  11.     `
  12.   });
  13.   const vm = app.mount('#root');

v-bind

在div标签上，展示的这个title内容和message这个数据变量做绑定
简写： ：

  1.   // {{}} 插值表达式
  2.   // v-html，v-bind(:)，v-on(@), 动态参数，修饰符
  3.   const app = Vue.createApp({
  4.     data() {
  5.       return {
  6.         message:'hello world'
  7.       }
  8.     },
  9.     template: `
  10.     <div v-bind:title="message">hello world</div>
  11.     `
  12.   });
  13.   const vm = app.mount('#root');

v-once

只渲染一次

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         message: "hello world",
  5.       }
  6.     },
  7.     template: `
  8.     <div v-once>{{message}}</div>
  9.     `
  10.   });
  11.   const vm = app.mount('#root');

v-if

判断

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         message: "hello world",
  5.         show:false,
  6.       }
  7.     },
  8.     template: `
  9.     <div v-if="show">{{message}}</div>
  10.     `
  11.   });
  12.   const vm = app.mount('#root');

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
简写：@

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         message: "hello world",
  5.         show:false,
  6.       }
  7.     },
  8.     methods:{
  9.       handleClick(){
  10.         alert('c')
  11.       }
  12.     },
  13.     template: `
  14.     <div v-on:dblclick="handleClick">{{message}}</div>
  15.     `
  16.   });
  17.   const vm = app.mount('#root');