Vue 学习笔记-2022/12/05

一、template 标签使用

这个模板标签适用于在多层 div 容器嵌套的时候使用，因为 <template/>并不会被渲染

二、inline-style 内联样式

  <p :style="pStyle">这是一个段落</p>

const app = Vue.createApp({
  data() {
    return {
      fontSize: 16,
    };
  },
  computed: {
    pStyle() {
      return {
        color: "white",
        fontSize: this.fontSize + "px",
      };
    },
  },
});
app.mount("#app");

三、class 样式 绑定

 <p :class="[textClass, stateClass, { hide: isHidden }]">

// data里面的数据可以进行修改从而改变class绑定的样式
const app = Vue.createApp({
  data() {
    return {
      textClass: "text-blue",
      stateClass: "danger",
      isHidden: false,
    };
  },
});
app.mount("#app");

四、v-html 在模板中输出原始的 HTML 代码

<article v-html="content" />

const app = Vue.createApp({
  data() {
    return {
      content: `<p>这是一段<span style="color: hsl(0, 80%, 70%);">HTML</span>代码</p>`,
    };
  },
});
app.mount("#app");
// 注意v-html最好只展示自己的定义的 html代码 防止用户或者不法分子进行代码注入 

五、v-once

v-once 有一个特殊的性质 就是一旦使用那么就只会渲染一次，即使后续怎么修改 data 属性里面的数据 使用了 v-once 的值是不会发生变化的

六、v-bind 动态参数

<div id="app">
    <!-- 相当于 attr=placeholder -->
    <!-- 并且动态增加了一个change事件 -->
    <div>
        <input type="text" :[attr]="value" @[event]="handleChange" />
    </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      attr: "placeholder",
      value: "请输入一些字符",
      event: "change",
    };
  },
  methods: {
    handleChange() {
      console.log("input 变化");
    },
  },
});
app.mount("#app");

七、v-for 新用法

<div id="app">
    <div>
        <ul>
            <!-- <li v-for="value in blogPost">{{value}}</li> -->
            <!-- 可以直接遍历对象 并且 取出属性值，属性名，索引值 -->
            <li v-for="(value, name, index) in blogPost">
                {{index}}. {{name}} - {{value}}
            </li>
        </ul>
        <ul>
            <!-- 直接变量数组 并且绑定动态的数组对象的ID  -->
            <li v-for="todo in todos" :key="todo.id">{{ todo.content }}</li>
        </ul>
         <!-- 自定义一个循环次数 li 标签 -->
        <ul>
            <li v-for="n in 5" :key="n">{{ n }}</li>
        </ul>
    </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      blogPost: {
        title: "Vue 3.x 完全指南",
        author: "峰华",
        pubDate: "2021-12-12",
      },
      todos: [
        {
          id: 1,
          content: "待办1",
        },
        {
          id: 2,
          content: "待办2",
        },
        {
          id: 3,
          content: "待办3",
        },
      ],
    };
  },
});
app.mount("#app");