Vue基础语法

<divid="app"><h2v-once>{{message}}</h2><button@click="btns">修改message</button><!-- 修改无效 --></div><script>constapp=Vue.createApp({
data() {
return {
message: 'hello world'        }
      },
methods: {
btns() {
this.message="你好世界"        }
      },
    })
// 挂载app.mount("#app")
</script>

<spanv-text="msg"></span><!-- 等同于 --><span>{{msg}}</span> data() {
        return {
          msg:"你好世界"
        }
      }

<divid="app"><h2v-text="message"></h2><!-- 不会解析html元素 --><h2v-html="message"></h2></div>data() {
  return {
    message: '<h1>xiaoluo</h1>'
  }
}

<divid="app"><h2v-pre>{{message}}</h2></div>   data() {
        return {
          message: '你好世界'
        }
      }

[v-cloak] {
  display: none;
}
<h2v-cloak>{{message}}</h2>

<divid="app"><divv-memo="[name]"><h2>姓名： {{name}}</h2><h2>身高： {{height}}</h2><h2>年龄： {{age}}</h2><button@click="btns">修改</button></div></div>data() {
  return {
    name: "xiaoluo",
    height: 1.88,
    age: 20
  }
},
methods: {
  btns() {
     this.name = "你好"
  }
}

<!-- 绑定 attribute --><imgv-bind:src="imageSrc"/><!-- 动态 attribute 名 --><buttonv-bind:[key]="value"></button><!-- 缩写 --><img:src="imageSrc"/><!-- 缩写形式的动态 attribute 名 --><button:[key]="value"></button><!-- 内联字符串拼接 --><img:src="'/path/to/images/' + fileName"/><!-- class 绑定 --><div:class="{ red: isRed }"></div><div:class="[classA, classB]"></div><div:class="[classA, { classB: isB, classC: isC }]"></div><!-- style 绑定 --><div:style="{ fontSize: size + 'px' }"></div><div:style="[styleObjectA, styleObjectB]"></div><!-- 绑定对象形式的 attribute --><divv-bind="{ id: someProp, 'other-attr': otherProp }"></div><!-- prop 绑定。“prop” 必须在子组件中已声明。 --><MyComponent:prop="someThing"/><!-- 传递子父组件共有的 prop --><MyComponentv-bind="$props"/><!-- XLink --><svg><a:xlink:special="foo"></a></svg>

<!-- 方法处理函数 --><buttonv-on:click="doThis"></button><!-- 动态事件 --><buttonv-on:[event]="doThis"></button><!-- 内联声明 --><buttonv-on:click="doThat('hello', $event)"></button><!-- 缩写 --><button@click="doThis"></button><!-- 使用缩写的动态事件 --><button@[event]="doThis"></button><!-- 停止传播 --><button@click.stop="doThis"></button><!-- 阻止默认事件 --><button@click.prevent="doThis"></button><!-- 不带表达式地阻止默认事件 --><form@submit.prevent></form><!-- 链式调用修饰符 --><button@click.stop.prevent="doThis"></button><!-- 按键用于 keyAlias 修饰符--><input@keyup.enter="onEnter"/><!-- 点击事件将最多触发一次 --><buttonv-on:click.once="doThis"></button><!-- 对象语法 --><buttonv-on="{ mousedown: doThis, mouseup: doThat }"></button>

<divid="app"><h2>{{message}}</h2><inputtype="text"v-model="message"><!--  等价于上面的 --><inputtype="text":value="message"@input="message =  $event.target.value"></div>

<divid="app"><textareav-model="message"cols="30"rows="10"></textarea><h2>{{message}}</h2></div>data() {
  return {
    message: ' hell owoeld'
  }
}

<h2>{{message}}</h2><inputtype="checkbox"name=""v-model="message">      data() {
        return {
          message: false
        } 
      }

<div><inputtype="checkbox"v-model="hobbise"value="唱"> 唱
<inputtype="checkbox"v-model="hobbise"value="跳"> 跳
<inputtype="checkbox"v-model="hobbise"value="篮球"> 篮球
<inputtype="checkbox"v-model="hobbise"value="rap"> rap
<h2>{{hobbise}}</h2></div> data() {
        return {
          hobbise: []
        } 
      }

<divid="app"><h2>{{isFlrg}}</h2><inputtype="radio"v-model='isFlrg'name="gender"value="男">男
<inputtype="radio"v-model='isFlrg'name="gender"value="女">女
</div>data() {
        return {
          isFlrg: '男'
        }
      }