Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子

文章目录

p12 条件渲染v-if与v-show
p13 列表渲染v-for
p14 事件与参数和事件修饰符
p15 表单的数据双向绑定
p16 组件与父组件传递数据给子组件 -- 方式props
p17 通过自定义事件将子组件数据传递给父组件
p18 Vue3 生命周期钩子

p12 条件渲染v-if与v-show

v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

<template><h1 v-if="user == 'vip'">欢迎会员登录</h1><!-- <h1 v-else>充值后，成为会员</h1> --><button @click="toggleUser">vip过期</button><h1 v-show="isShow">切换显示内容</h1><button @click="toggleShow">切换</button>
</template><script>
export default {data() {return {user: "vip",isShow: true,num: 1,};},methods: {toggleUser() {if (this.num % 2 !== 0) {this.user = "!vip";} else {this.user = "vip";}this.num++;},toggleShow() {this.isShow = !this.isShow;},},
};
</script>

p13 列表渲染v-for

<template><ol><li v-for="(item, index) in news" :key="index">{{ item }}</li></ol><ul><li v-for="(item, index) in newsObj" :key="index">{{ item.title }} {{ item.tag }} {{ item.num }}</li></ul><ol><li v-for="(item, i) in person" :key="i">{{ item }}</li></ol><ul><li v-for="(item, i) of person" :key="i">{{ item }}</li></ul>
</template><script>
export default {data() {return {news: ["#怎样才能释怀曾经深爱的人#","#你会因为什么原因换手机#","#怎样才是有效化妆#","#你有彻底改变生活方式的勇气吗#",],newsObj: [{title: "#怎样才能释怀曾经深爱的人#",tag: "沸",num: "450万",},{title: "你有彻底改变生活方式的勇气吗#",tag: "沸",num: "45万",},],person: {name: "zhagnsan",age: 28,sex: "man",},};},
};
</script>

p14 事件与参数和事件修饰符

<template><!-- 绑定事件，不需要参数 --><h1 @click="increment">{{ num }}</h1><!-- 绑定事件 直接处理表达式 --><h1 @click="num += 7">{{ num }}</h1><!-- 绑定事件，传递参数 --><h1 @click="addThree(3)">{{ num }}</h1><!-- 绑定事件，传递事件对象和参数 --><h1 @click="incrementTen(10, $event)">{{ num }}</h1><!-- <h1 @click="incrementFive($event, 10)">{{ num }}</h1> // 这种是错误的, $event只能放在第二个 --><!-- @就是v-on的缩写 --><!-- 一个事件绑定多个处理函数 --><h1 @click="addThree(3), changeColor()" :style="{ background: color }">{{ num }}</h1><!-- 事件修饰符 --><!-- .once 事件只触发一次 --><h1 @click.once="incrementTen(20, $event)">{{ num }}</h1><!-- 阻止事件冒泡.stop  阻止默认事件.prevent --><!-- 按键修饰符.enter tab delete esc space up down left right--><input type="text" @keydown.enter="searchEevent" /><!-- 系统修饰符.ctrl/.alt/.shift/.meta(window) --><!-- 鼠标按键修饰符 .left/.right/.middle -->
</template><script>
export default {data() {return {num: 2,color: "red",};},methods: {increment() {this.num += 2;},incrementTen(number, event) {console.log(event);this.num += number;},// incrementFive(event, number) {//   console.log(event);//   this.num += this.number;// },addThree(number) {this.num += number;},changeColor() {this.color = "green";},searchEevent() {console.log("执行了回车搜索");},},
};
</script>

p15 表单的数据双向绑定

<template><!-- 文本 --><input type="text" v-model="message" placeholder="edit me" /><p>Message is {{ message }}</p><!-- 多行文本 --><span>Multiline message is</span><p>{{ message }}</p><textarea v-model="message" placeholder="请输入"></textarea><!-- 单一的复选框，绑定布尔类型 false <-> true--><input type="checkbox" v-model="checked" id="checkbox" /><label for="checkbox">{{ checked }}</label><!-- 多个复选框 绑定到同一个数组或集合 --><div>checked name: {{ fruits }}</div><input type="checkbox" id="apple" value="苹果" v-model="fruits" /><label for="apple">苹果</label><input type="checkbox" id="pear" value="梨" v-model="fruits" /><label for="pear">梨</label><input type="checkbox" id="banana" value="香蕉" v-model="fruits" /><label for="banana">香蕉</label><input type="checkbox" id="orange" value="橙子" v-model="fruits" /><label for="orange">橙子</label><!-- 单选按钮 --><div>Picked : {{ picked }}</div><input type="radio" id="man" value="男" v-model="picked" /><label for="man">男</label><input type="radio" id="women" value="女" v-model="picked" /><label for="women">女</label><!-- 单个选择器 --><div>Selected: {{ city }}</div><select v-model="city"><option disabled value="">请选择一个城市</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option></select><!-- 选择器 可多选 --><div>Selected More: {{ citys }}</div><select v-model="citys" multiple><option disabled value="">请选择一个城市</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option></select><!-- 单个选择器v-for渲染 --><div>Selected level: {{ level }}</div><select v-model="level"><option v-for="item in options" :value="item.value">{{ item.title }}</option></select><!-- 值绑定 --><input type="checkbox" v-model="checked1" true-value="yes" false-value="no" /><h1>{{ checked1 }}</h1><!-- 修饰符 .lazy --><!-- 在 "change" 事件后同步更新而不是 "input" --><input v-model.lazy="msg" />{{ msg }}<!-- .number 用户输入自动转换为数字 --><input v-model.number="age" /><div>{{ age }}{{ typeof age }} number</div><input v-model="ageCopy" /><div>{{ ageCopy }}{{ typeof ageCopy }} string</div><div><!--默认自动去除用户输入内容中两端的空格  --><p>.trim</p><input v-model.trim="msgtrim" />{{ msgtrim }}</div>
</template><script>
export default {data() {return {msgtrim: "",ageCopy: 0,age: 0,msg: "111",checked1: "",message: "",checked: false,fruits: [],picked: "",city: "",citys: [],level: "A",options: [{ value: "A", title: "优秀" },{ value: "B", title: "良好" },{ value: "C", title: "一般" },],};},
};
</script>

p16 组件与父组件传递数据给子组件 – 方式props

父组件App.vue

<template><!-- 通过props 传递给子组件数据 --><Header :contnet="msg" />
</template><script>
import Header from "./components/Header.vue";
export default {components: {Header,},data() {return {msg: "父组件准备传给子组件header的数据",};},
};
</script>

子组件Header.vue

<template><header><p>这里是头部组件</p><p>{{ contnet }}</p></header>
</template>
<script>
export default {//   props: ["contnet"], 这一句的效果 跟下面一样 都显示出来了props: {contnet: String,},
};
</script>

p17 通过自定义事件将子组件数据传递给父组件

子组件Login.vue

<template><input type="text" v-model="username" /><button @click="submit">将数据提交给父组件</button>
</template><script>
export default {data() {return {username: "",};},methods: {submit() {// 触发自定义事件 $emit(事件名称, 发送的事件参数)this.$emit("sendParentMsg", this.username);},},
};
</script>

父组件App.vue

<template><Login @sendParentMsg="getChildMsg" /><p>从子组件中拿到的数据:{{ msg }}</p>
</template><script>
import Login from "./components/Login.vue";
export default {components: { Login },data() {return {msg: "",};},methods: {getChildMsg(value) {this.msg = value;},},
};
</script>

p18 Vue3 生命周期钩子

npm init vite-app demo04

 beforeCreate() {console.log("beforeCreate,初始化数据之前");},created() {console.log("created,数据初始化之后");},beforeMount() {console.log("beforeMount,挂载渲染之前");},mounted() {console.log("mounted,挂载渲染之后");},beforeUpdate() {console.log("beforeUpdate,更新之前");},updated() {console.log("updated,更新之后");},beforeUnmount() {console.log("beforeDestory,销毁之前");},unmounted() {console.log("destoryed, 销毁完毕");},

Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子相关推荐

Vue多组件切换，并相互传值（在created和mounted生命周期钩子函数中渲染数据的区别）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
jquery 监听td点击事件_VUE @hook浅析（监听子组件的生命周期钩子） - 古兰精
一.前言接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
我的 Vue.js 学习日记（七） - 事件与修饰符
上节回顾上节写了一个v-for与table的简单互动,脑子里回忆一下,嗯 ~ 还是回去再看一遍吧... 本节目标今天看一下事件与修饰符,并且把有疑惑的地方敲一遍,亲眼看一下输出结果.由于时间有限, ...
事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符
事件处理-注册事件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
Vue3父子组件间传参通信
Vue3 父子组件间通信前言一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
VUE3 之多个 v-model 绑定及 v-model 修饰符的使用
目录 1. 概述 2. 多个 v-model 绑定 3. v-mode 修饰符 4. 综述 5. 个人公众号 1. 概述洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很 ...
JAVA基础-栈与堆,static、final修饰符、内部类和Java内存分配
JAVA基础-栈与堆,static.final修饰符.内部类和Java内存分配发布时间: 2013/01/12 22:29 QQ空间新浪微博腾讯微博人人网豆瓣网百度空间百度搜藏开心网 ...
Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...

Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子

文章目录

p12 条件渲染v-if与v-show

p13 列表渲染v-for

p14 事件与参数和事件修饰符

p15 表单的数据双向绑定

p16 组件与父组件传递数据给子组件 – 方式props

p17 通过自定义事件将子组件数据传递给父组件

p18 Vue3 生命周期钩子

Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子相关推荐

最新文章

热门文章

Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子

文章目录

p12 条件渲染v-if与v-show

p13 列表渲染v-for

p14 事件与参数和事件修饰符

p15 表单的数据双向绑定

p16 组件 与 父组件传递数据给子组件 – 方式props

p17 通过自定义事件将子组件数据传递给父组件

p18 Vue3 生命周期钩子

Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子相关推荐

最新文章

热门文章

p16 组件与父组件传递数据给子组件 – 方式props