欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue常用术语与常用指令

程序员文章站 2022-03-01 18:38:03
...

vue常用术语

1.挂载点

  1. <div class="app">
  2. </div>

2.vue实例
const app = Vue.createApp({}).mount(".app")
3.数据注入

  1. const obj = {
  2. $data: {
  3. email: "123456789@qq.com",
  4. },
  5. get email() {
  6. return this.$data.email;
  7. },
  8. }

4.响应式
app.username = "李同学";

vue常用指令

v-text
<p>用户名:<span v-text="username"></span></p>
v-html
<p>用户名:<span v-html="username"></span></p>
app.username = '<span style="color:red">张同学</span>';
v-once
<p>用户名:<span v-once="username"></span></p>
样式绑定:v-bind,简化:冒号
<p v-bind:style="style">嗓子疼</p>
<p :class="['active','bgc']">一会就出去</p>
双向绑定v-model

  1. <div class="app">
  2. <p>
  3. <input type="text" v-model="comment" :value="comment" />
  4. <span>{{comment}}</span>
  5. </p>
  6. </div>