Vue 学习笔记-2022/12/05
一、template 标签使用
这个模板标签适用于在多层 div 容器嵌套的时候使用，因为 并不会被渲染
二、inline-style 内联样式
这是一个段落
const app = Vue.createApp({
data() {
return {
fontSize: 16,
};
},
computed: {
pStyle() {
return {
color: "white",
fontSize: this.fontSize + "px",
};
},
},
});
app.mount("#app");三、class 样式 绑定
// data里面的数据可以进行修改从而改变class绑定的样式
const app = Vue.createApp({
data() {
return {
textClass: "text-blue",
stateClass: "danger",
isHidden: false,
};
},
});
app.mount("#app");四、v-html 在模板中输出原始的 HTML 代码
const app = Vue.createApp({
data() {
return {
content: `这是一段HTML代码
`,
};
},
});
app.mount("#app");
// 注意v-html最好只展示自己的定义的 html代码 防止用户或者不法分子进行代码注入 五、v-once
v-once 有一个特殊的性质 就是一旦使用那么就只会渲染一次，即使后续怎么修改 data 属性里面的数据 使用了 v-once 的值是不会发生变化的
六、v-bind 动态参数
const app = Vue.createApp({
data() {
return {
attr: "placeholder",
value: "请输入一些字符",
event: "change",
};
},
methods: {
handleChange() {
console.log("input 变化");
},
},
});
app.mount("#app");七、v-for 新用法
- {{index}}. {{name}} - {{value}}
- {{ todo.content }}
- {{ n }}
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");
此处评论已关闭