什么是Vue，Vue的生命周期、vue中的v-if、v-for、v-show

最新推荐文章于 2024-05-14 10:37:00 发布
最新推荐文章于 2024-05-14 10:37:00 发布
阅读量320 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124835472
版权

Vue介绍：

1.介绍

        Vue是什么？

                ---一套用于构建用户界面的渐进式框架

        vue特点

                ---采用组件化开发，提高代码复用率，并且让代码更好的维护

                ---声明式编程，让编码人员无需直接操作dom

                ---虚拟dom的使用

2.生命周期

        四个阶段

                Create        创建

                Mount         挂载

                Update       更新

                Destory       销毁

        八个过程

                beforeCreate                  Created

                beforeMount                   Mounted

               before Update                  Updated

                beforeDestory                 Destoryed

3.列表渲染

        v-for指令

                ---用于展示列表数据

                ---语法：v-for="(item,index) in xxx" :key="yyy"

4.条件渲染

        v-if

                ---写法：v-if="表达式" v-else-if="表达式" v-else

                ---适用于：切换频率较低的场景

                ---特点：不展示DOM元素直接移除

                ---注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

        v-show

                ---写法：v-show="表达式"

                ---适用于：切换频率较高的场景

                ---特点：不展示DOM元素未被移除，仅仅是使用样式隐藏（dispay:none)

                             【如果判断条件为false时】

                

 

初识Vue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- <script>
      window.onload = function () {
        let vm = new Vue({
          el: "#app",
          data: {
            //写变量和声明,直接绑定到了实例上
            msg: "hello world",
          },
          methods: {
            //点击事件
            changeMsg() {
              console.log(this.msg);
              this.msg = 123;
            },
          },
        });

        //还可以这样改变值，因为上面说了变量直接绑定到了实例上
        //vm.msg = 123; //而不是vm.data.msg
      };
    </script> -->
  </head>
  <body>
    <!-- 通过vue实例对象中el数据绑定模板 -->
    <div id="app">
      {{msg}}
      <button @click="changeMsg">点击改变msg的值</button>
    </div>
    <script>
      //创建vue实例
      let vm = new Vue({
        // el:与dom进行绑定  根实例绑定方式
        el: "#app",
        //数据模型
        data: {
          //写变量和声明,直接绑定到了实例上
          msg: "hello world",
        },
        //写方法，函数
        methods: {
          //点击事件
          changeMsg() {
            console.log(this.msg);
            this.msg = 123;
          },
        },
      });

      //还可以这样改变值，因为上面说了变量直接绑定到了实例上
      //vm.msg = 123; //而不是vm.data.msg
      //vue实例中数据模型上绑定的变量和函数中声明的方法，都是直接绑定到vm实例上的，可以通过vm.msg直接调用

      //vue实例中访问绑定的属性和方法
    </script>
  </body>
</html>

 

Vue数据模板模型                

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <hr />
      {{time}}
    </div>

    <script>
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          time: new Date(),
        },
        methods: {
          sayHi() {
            console.log("你好");
          },
        },
      });

      //consol.log(vm.msg);
      //console.log(vm.sayHi());
      setInterval(() => {
        vm.time = new Date();
      }, 1000);
    </script>
  </body>
</html>

Vue生命周期

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg?1:2}}
      <button @click="test">按钮</button>
    </div>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          //   msg: "hello",
          //   time: new Date(),
          msg: true,
        },
        methods: {
          test() {
            console.log("点击按钮-----");
          },
        },
        //钩子函数,生命周期，在beforeCreate这个阶段，现在属性msg数据还没有绑定到实例对象vm上，所以数据不能输出来
        beforeCreate() {
          //属性或方法声明了，但没有和实例绑定
          console.log(111, this.msg); //输出：111 undefined
        },
        //生命周期，在created这个阶段属性msg数据绑定到vm实例对象上
        created() {
          //属性和方法绑定到实例上，可以通过实例进行调用
          console.log(222, this.msg); //输出：222 'hello
        },
        //虚拟dom挂载之前,不可以操作dom
        beforeMount() {
          console.log(333, "挂载之前");
        },
        //虚拟dom挂载完毕，可以操作dom
        mounted() {
          console.log(444, "挂载后");
        },
        beforeUpdate() {
          console.log(555, this.msg);
        },
        updated() {
          console.log(666, this.msg);
        },
        beforeDestroy() {
          console.log(777, this.msg);
        },
        destroyed() {
          console.log(888, this.msg);
        },
      });
      setInterval(() => {
        vm.$destroy();
      }, 5000);
    </script>
  </body>
</html>

 

 

Vue列表渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue的数据模型</title>
        <script src="../js/vue.js"></script>
      </head>
      <body>
        <div id="app">
          {{msg}}
          <hr />
          <!-- 列表渲染 -->
          <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
          </ul>
          <ul>
            <!-- key的作用 -->
            <li v-for="{item,index}in arr" :key="index">{{item}}</li>
          </ul>
          <hr />
          <!-- 表格渲染 -->
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in stu" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <script>
          let vm = new Vue({
            el: "#app",
            data: {
              msg: "hello",
              arr: ["苹果", "苹果", "香蕉", "西瓜"],
              stu: [
                {
                  id: 1,
                  name: "张三",
                  age: 20,
                },
                {
                  id: 1,
                  name: "李四",
                  age: 20,
                },
              ],
            },
            methods: {},
          });
        </script>
      </body>
    </html>
  </body>
</html>

 Vue条件渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <hr />
      <div v-if="isLogin">欢迎您</div>
      <!-- <div v-if="!isLogin">请登录</div> -->
      <!-- 和if--else差不多 -->
      <div v-else>请登录</div>
      <div v-show="isLogin">show测试</div>
      <div>111</div>
    </div>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          isLogin: true,
        },
        methods: {},
      });
    </script>
  </body>
</html>

 

The..Fuir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
Vue的生命周期以及v-if与v-show的区别
sixsix668的博客
06-11 393
vue的生命周期以及v-if与v-show的区别
Vue的生命周期、v-ifVSv-show、v-if和v-for的优先级
smell201611010513的博客
02-05 1927
生命周期、v-if/v-show、v-if/v-for
Vue中v-if与v-for的优先级和注意事项
最新发布
阿牛哥的博客
05-14 861
在Vue.js中，和是两种常用的指令，它们在模板中控制元素的渲染方式。理解它们之间的优先级和如何正确使用它们对于编写高效的Vue应用至关重要。在Vue模板编译时，和都会被转换成可执行的函数。在Vue的源码中，的判断优先于。 Vue源码分析 在Vue的源码中，的处理优先于，这意味着在渲染过程中，Vue会先进行列表渲染，然后才进行条件判断。 计算属性示例 四、流程图 下面是和在Vue模板中的处理流程的简化流程图：Vue模板v-forv-if列表渲染条件判断 在Vue中，和的处理流程可以通过以下简化流程图来表
v-if ， v-show 和v-for
qq_50577394的博客
05-18 196
1.v-if有更高的切换渲染开销，v-show有更高的初始化渲染开销。2.v-if 和 v-for 一起用时，v-if 优先级更高。3.v-for 加key值可以高效的更新虚拟DOM。
VUE生命周期
HeMister的博客
11-27 254
这篇博客将会从下面四个常见的应用诠释组件的生命周期，以及各个生命周期应该干什么事 1、单组件的生命周期 1.1 组件 v-if 和 v-show 切换时生命周期钩子的执行 2、父子组件的生命周期 2.1 组件 v-if 和 v-show 切换时生命周期钩子的执行 3、兄弟组件的生命周期 3.1 组件 v-if 和 v-show 切换时生命周期钩子的执行 4、宏mixin的生命周期 ...
v-if 与 v-show 的区别以及分别会触发什么生命周期
wenjiechen的博客
08-14 1142
v-if指令状态变化会会使得组件的dom发生变化，组件将会更新视图，所以会触发父组件的beforeUpdate和updated钩子函数。v-if和v-show指令可以控制普通元素的隐藏和显示，也可能是用于控制子组件的隐藏和显示。同时，将show变量的值 从true改变为false时，会触发更更新钩子，却不能控制子组件的隐藏；解决该问题的办法说是可以添加跟标签或者通过emits属性声明自定义事件，则可以解决该问题。描述过，是说子组件一定要有根标签，不然v-show是无法控制组件的隐藏和显示的；
vue3中用v-show触发的生命周期钩子以及注意事项
Madman528的博客
04-26 6790
有以下结构,通过show真假值对组件life进行显示隐藏 <template> <button @click="show = !show">隐藏</button> <life v-show="show" /> </template> 这是life组件的生命周期 onBeforeMount(() => { console.log('onBeforeMount'); }) onMounted(() => { co.
以v-model与promise两种方式实现vue弹窗组件
08-27
* Vue 组件的生命周期 * Vue 组件的 props 和 $emit * Promise 的使用 * Vue 组件的模板语法 * CSS 实现弹窗组件的样式 六、扩展阅读 * Vue 官方文档：https://cn.vuejs.org/ * Vue 组件生命周期详解：...
Vue 动态组件components和v-once指令的实现
10-16
Vue.js 是一款流行的前端框架，它提供了丰富的特性来帮助开发者构建...在实际开发中，应根据具体需求合理选择使用`v-if`、`v-show`或`v-once`，以及动态组件的实现方式。不断学习和实践，可以进一步提升Vue开发技能。
Vue.js使用v-show和v-if的注意事项
11-30
在Vue中，`v-if` 和 `v-show` 都是用来实现条件渲染的指令，但它们之间存在一些关键的区别，这在编写高性能应用时尤其重要。 **`v-if` 的特点：** 1. **惰性渲染**：`v-if` 只会在初次渲染时检查条件，如果条件为假...
前段v-if测试最终版.zip
04-17
混入是一种在多个组件之间共享功能的方法，可以包含任何可被 Vue 实例方法、生命周期钩子或选项。在这个场景下，`mixins`可能定义了通用的显示/隐藏方法，这些方法可以被多个组件调用，从而减少重复代码并提升代码...
必背的小技巧让你轻松过关
links_577073699的博客
04-24 1110
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、生命周期1.1 什么是生命周期函数1.2 生命周期函数有哪些1.3 项目开发中 在生命周期里都做过什么功能1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?二、vuex 的理解三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解 一、生命周期 1.1 什么是生命周期函数 - 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.2 生命周期函数有哪些 创建阶段（4个） beforeCr.
v-show与v-for
jwz934738949的博客
07-05 2014
v-show: v-if与v-show都可以表示条件判断； 当条件为false时，v-if所修饰的元素直接在DOM中消失，而v-for修饰的元素只是添加了display:none的样式 v-for: 表示循环的命令，可以对数组以及对象进行循环遍历，获取到数组以及对象相应的属性。 ①在v-for中循环数组 1.只显示数组内容：v-for="item in 数组" 2.显示数组内容与数组下标：v-for="(item, index) in 数组" ②在v-for中循环对象 1.直接循环...
Vue学习笔记
Kyling817的博客
08-29 119
个人的vue学习笔记，如果有不对的地方欢迎大家指正~
Vue的生命周期总结
qq_47443027的博客
03-14 364
每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。 　　首先贴一张Vue文档给出的生命周期图示，并添加了一些注释： 　　Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表 生命周期钩子 详细 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(dat
v-if 与 v-show 指令对生命周期的影响
qq_38712081的博客
01-14 5625
要点 v-if和v-show指令可能附属于普通元素也可能是组件。当附属于组件时，指令改变对父组件和本身组件都会有影响，这时候我们会分开讨论 v-show 先说 v-show，由于v-show指令是通过控制元素的css属性(display)从而实现显示和隐藏的效果，这也就说无论v-show是true还是false,元素都会有初始渲染，且状态改变元素不会导致元素或组件的重新生成和销毁。 当v-sho...
vue中V-for和v-show的区别
qq_45780380的博客
03-12 942
vue中V-for和v-show的区别 1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 3. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-s
【v-if和v-show的区别，分别会触发什么什么周期】
GR199717的博客
04-16 796
v-if是真正的条件渲染，能够保证在切换的过程中适当销毁和重建内部监听事件和子组件。
vue3 生命周期 v-show
09-09
Vue 3 中，v-show 指令是用于根据条件展示或隐藏元素的。它在组件的生命周期中的具体作用与 Vue 2 中相同。 v-show 的原理是通过修改元素的 CSS 属性 `display` 来控制元素的显示与隐藏。当条件为 true 时，元素会被显示，当条件为 false 时，元素会被隐藏。 在组件的生命周期中，v-show 主要在以下阶段起作用： 1. 创建组件实例：在组件实例化时，v-show 可以根据初始条件来决定是否显示元素。 2. 更新阶段：当组件的响应式数据发生变化时，Vue 会重新渲染组件。此时，v-show 会根据新的条件重新决定是否显示元素。 3. 销毁组件：当组件被销毁时，v-show 会将元素隐藏。 总结来说，在组件的整个生命周期中，v-show 可以动态地控制元素的显示与隐藏，基于条件的变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值