目录
1 v-html：在模板中输出原始的 HTML 代码
将html代码插入到页面中
注意 如果代码是用户输入的要进行安全审查
html:
<div id="app">
<div>
<article v-html="content" />
<!-- <article>{{ content }}</article> -->
</div>
</div>js :
const app = Vue.createApp({
data() {
return {
content: `<p>这是一段<span style="color: hsl(0, 80%, 70%);">HTML</span>代码</p>`,
};
},
});
app.mount("#app");2 v-once：只渲染1次 HTML 模板
html:
<div id="app">
<div>
<p v-once>list 初始长度： {{ list.length }}</p>
<p>list 新长度： {{ list.length }}</p>
<button @click="list.push(list.length + 1)">添加元素</button>
</div>
</div>js :
const app = Vue.createApp({
data() {
return {
list: [1, 2, 3],
};
},
});
app.mount("#app");3 给 v-bind 和 v-on 设置动态参数
placeholder属性提示input输入占位
用户名: <input type="text" name="username" placeholder="请输入用户名" > <br> 密 码: <input type="password" name="pwd" placeholder="请输入密码" > <br> <input type="submit" value="提交">
使用中括号 中写入表达式:
<input type="text" :[attr]="value" @[event]="handleChange" />
html:
<div id="app">
<div>
<input type="text" :[attr]="value" @[event]="handleChange" />
</div>
</div>js:
const app = Vue.createApp({
data() {
return {
attr: "placeholder",
value: "请输入一些字符",
event: "change",
};
},
methods: {
handleChange() {
console.log("input 变化");
},
},
});
app.mount("#app");4 v-for 的进阶用法
html:
<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>
<li v-for="todo in todos" :key="todo.id">{{ todo.content }}</li> <!-- 用key来顺序显示 移动HTML -->
</ul>
<ul>
<li v-for="n in 5" :key="n">{{ n }}</li> <!-- 在一个范围内的数据 排序名次 指定序号的情况 -->
</ul>
</div>
</div>js:
// 示例：再看 v-for
const app = Vue.createApp({
data() {
return {
blogPost: {
title: "Vue 3.x 完全指南",
author: "aaa",
pubDate: "2021-12-12",
},
todos: [
{
id: 1,
content: "待办1",
},
{
id: 2,
content: "待办2",
},
{
id: 3,
content: "待办3",
},
],
};
},
});
app.mount("#app");
5 模板<///template///> 渲染一组标签但不额外增加嵌套
如果代码是这样的,即使没有进入if 但页面还会产生多余的html标签
<div v-if="show" class="content">
<h1>标题</h1>
<p>这是一个段落</p>
</div>但是使用 <template/> 就不会产生多余的元素
html:
<div id="app">
<div>
<template v-if="show" class="content">
<h1>标题</h1>
<p>这是一个段落</p>
</template>
<button @click="show = !show">切换显示</button>
</div>
</div>js:
// 示例：Template 标签
const app = Vue.createApp({
data() {
return {
show: true,
};
},
});
app.mount("#app");6 Vue 事件传参与多事件处理函数
@click="handleClick(msg)" //一般事件
@click="handleClick(msg, $event)" //携带参数 与原生dom 函数
@click="handleClick1(),handleClick2() //可以触发多事件处理 但是函数名必须要带'()'
html:
<div id="app">
<div>
<ul>
<li
v-for="todo in todos"
:key="todo.id"
@click="handleClick(todo.id, $event), showContent(todo.content)"
>
{{todo.content}}
</li>
</ul>
</div>
</div>js:
const app = Vue.createApp({
data() {
return {
todos: [
{
id: 1,
content: "待办1",
},
{
id: 2,
content: "待办2",
},
{
id: 3,
content: "待办3",
},
],
};
},
methods: {
handleClick(id, e) {
alert(id + ", " + e.clientX + ", " + e.clientY);
},
showContent(content) {
alert(content);
},
},
});
app.mount("#app");7 事件相关的修饰符
之前已经在表单处理中接触到了 prevent 事件修饰符 来阻止页码刷新
<form
@submit.prevent="handleSubmit">/form>
@submit.prevent == event.preventDefault();
Vue中的事件修饰符
事件修饰符还可以组合使用
ｅｇ： @click.self.prevent 只有自身被点击 时 才会触发事件 而且阻止 跳转
事件冒泡不会触发
.stop .prevent 比较常用
html:
<div>
<a href="https://zxuqian.cn" @click.prevent="">点击跳转</a>
<!-- <ul @click="handleUlClick">
<li @click="handleLiClick">1</li>
<li>2</li>
</ul> -->
<!-- stop-->
<ul @click="handleUlClick">
<li @click.stop="handleLiClick">1</li>
<li>2</li>
</ul>
<!-- capture -->
<!-- <ul @click.capture="handleUlClick">
<li @click="handleLiClick">1</li>
<li>2</li>
</ul> -->
<!-- self -->
<!-- <ul @click.self="handleUlClick">
<li @click="handleLiClick">1</li>
<li>2</li>
</ul> -->
<!-- once -->
<!-- <ul @click.once="handleUlClick">
<li @click="handleLiClick">1</li>
<li>2</li>
</ul> -->
</div>js:
const app = Vue.createApp({
data() {
return {};
},
methods: {
handleUlClick() {
alert(0);
},
handleLiClick() {
alert(1);
},
},
});
app.mount("#app");
8 处理键盘、鼠标事件的修饰符
Vue中的
更多键盘修饰符 访问这个网站
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
当使用两个按键是 需要'-'来连接 并且全部小写
常用组合键修饰符 (单个不能使用)
监听鼠标的修饰符有:
html:
<div id="app">
<div>
<ul @mousedown.right="comments.reverse()"> <!--鼠标右键监听 -->
<li v-for="content in comments">{{ content }}</li>
</ul>
<input
type="text"
v-model="comment"
@keyup.ctrl.enter.exact="addComment" /> <!-- 键盘ctrl+enter -->
<!-- 双向监听v-model -->
<!-- exact准确 就需要这两个按键 -->
</div>
</div>js:
// 示例：处理键盘、鼠标事件的修饰符
const app = Vue.createApp({
data() {
return {
comments: ["好", "非常好", "赞"],
comment: "",
};
},
methods: {
addComment() {
this.comments.push(this.comment);
this.comment = "";
},
},
});
app.mount("#app");9 表单输入相关的修饰符
html:
<div id="app">
<div>
<input type="text" v-model.lazy.trim="username" />
<p>{{ username }}</p>
<!-- <input type="text" v-model.number="year" /> -->
<input type="number" v-model="year" />
<p>{{ typeof year }}</p>
</div>
</div>js:
const app = Vue.createApp({
data() {
return {
username: "",
year: 2000,
};
},
});
app.mount("#app");10 通过 Vue 实例访问和修改应用的配置
- 实例可直接访问data 属性
- 也可以通过 $data 访问
- 还可访问计算属性、方法
- 能添加监听
- 适合传统网站和Vue 相结合的场景
js:
const app = Vue.createApp({
data() {
return {
msg: "你好！",
name: "张三",
};
},
computed: {
greetings() {
return `${this.msg} ${this.name}`;
},
},
methods: {
changeName(name) {
this.name = name;
},
},
watch: {
name(newName) {
console.log("watch 监听：" + newName);
},
},
});
const vm = app.mount("#app");
Console:
>vm.changeName("李四")
undefined
>vm.$watch("name"，newName =>{console.log("监听 name:"+newName)})
> vm.name="王五" 监听 name:王五 VM688:1
←'王五'11Vue 生命周期钩子：在合适的时机为应用添加数据和行为
- 生命周期钩子在不同时期执行
- 最常用的有:created 和 mounted
1.vue的生命周期 生命周期函数，又叫钩子函数 生命周期钩子===生命周期函数===生命周期事件
2.
什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
3.vue中的生命周期函数，一般都是 成对出现
4.10个生命周期函数 ： vue 实例被创建一直到 vue 实例被销毁
beforecreate --- vue实例创建之前
created -----------vue实例创建之后
beforemounte ---DOM挂载之前
mounted -----------DOM挂载之后
beforeupdate ---数据更新之前
updated -----------数据更新之后
beforeDestroy ---组件销毁之前
destroyed ----------组件销毁之后
html:
<div id="app">
<div>
<ul>
<li v-for="post in posts" :key="post.id">
{{ post.title }}
</li>
</ul>
</div>
</div>js:
const app = Vue.createApp({
data() {
return {
posts: [],
};
},
methods: {
async fetchPosts() {
const res = await fetch("./posts.json");
const postsData = await res.json();
this.posts = postsData;
},
},
created() {
this.fetchPosts();
},
});
const vm = app.mount("#app");posts.json
[
{
"id": 1,
"title": "Vue 生命周期的使用方法"
},
{
"id": 2,
"title": "JavaScript 原型链原理"
},
{
"id": 3,
"title": "CSS Grid 布局完全指南"
},
{
"id": 4,
"title": "CSS Flexbox 布局完全指南"
}
]