vue简单介绍

cultureSun

发布于 2024-07-09 15:04:22

810

发布于 2024-07-09 15:04:22

文章被收录于专栏：cultureSun学安全

特点

Vue是目前流行的一款前端框架，总的来看Vue具有如下三个特点：

组件化：Vue鼓励开发者将用户界面分解为可重用的组件。这些组件可以使开发的页面更加模块化和可维护。
双向数据绑定：Vue提供了一种轻松绑定数据和DOM元素之间的机制。这意味着当数据发生变化时，视图会自动更新，反之亦然。
虚拟DOM：Vue使用虚拟DOM来最小化实际DOM更新的次数，从而提高性能。

生命周期钩子

Vue 实例在创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户在不同阶段添加自己的代码的机会。

常用的生命周期钩子包括：

created：在实例创建完成后被立即调用。
mounted：实例被挂载后调用。
updated：当实例更新完毕之后调用。
destroyed：实例销毁后调用。

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('实例已创建');
  },
  mounted() {
    console.log('实例已挂载');
  },
  updated() {
    console.log('实例已更新');
  },
  destroyed() {
    console.log('实例已销毁');
  }
});

数据绑定

使用{{ data }}在模板中插入数据。如下

<body>
   
    <div id="app">
        <!-- 表达式 -->
        <h1>{{message}}</h1>
    </div>
    <script>
        // 创建Vue的实例
        new Vue({
            // 绑定id为app的元素
            el: "#app",
            // 数据
            data: {
                message: "hello Vue!"
            }
        })
    </script>
</body>

数据操作

数据操作有三种，计算(computed)、侦听(watch)、方法(methods)。

计算(computed)

Vue允许开发者定义计算属性，这些属性根据其他数据属性的值进行计算。而计算属性会缓存计算结果，只有在依赖的数据属性发生变化时才会重新计算。

<body>
    <div id="app"> 
      <input type="text" v-model="radius">
      <p>圆的面积：{{ circleArea }}</p>
    </div>

    <script>
        new Vue({
          el:"#app",
          data: {
            radius: 5
          },
          computed: {
            circleArea: function() {
              return Math.PI * Math.pow(this.radius, 2);
            }
          }
        });
    </script>
</body>

侦听(watch)

watch选项来监听数据属性的变化，然后执行自定义的操作。

<body>
    <div id="app"> 
      <input type="text" v-model="radius">
      <p>圆的面积：{{ circleArea }}</p>
    </div>
    <script>
        new Vue({
          el:"#app",
          data: {
            radius: 0,
            circleArea:0
        },
          watch: {
           radius:function(newValue,oldVule){
            console.log(newValue)
                this.circleArea = Math.PI * Math.pow(newValue, 2);
           }
          }
        });
    </script>
</body>

方法(methods)

methods是指Vue实例中methods字段所定义的函数，其主要用于执行特定的操作或逻辑。

<body>
    <div id="app"> 
      <button @click="sayHello">Say Hello</button>
      <button @click="greet('John')">Greet John</button>
    </div>
    <script>
        new Vue({
          methods: {
            sayHello: function() {
              console.log('Hello, Vue!');
            }
            greet: function(name) {
                console.log('Hello, ' + name + '!');
            }
          }
        });
    </script>
</body>

指令

v-model：用于实现双向数据绑定，通常用于表单元素，使输入框的值与数据属性保持同步。

<input v-model="message">

v-for：用于循环渲染列表中的元素，通常与v-bind:key一起使用。

<ul>     <li v-for="item in items" :key="item.id">{{ item.name }}</li>   </ul>

v-if、v-else、v-else-if：用于条件渲染，根据条件决定是否渲染或显示DOM元素。

<p v-if="isTrue">This is true</p>   <p v-else>This is false</p>

v-show：用于根据条件切换元素的可见性，与v-if不同，它仅使用CSS样式控制显示/隐藏，不会添加/删除元素。

<p v-show="isVisible">This may be hidden</p>

v-bind（缩写为:） ：用于绑定HTML属性的值到Vue实例的数据属性，以实现动态属性绑定。

<a :href="url">Visit Vue.js</a>

v-on（缩写为@） ：用于监听DOM事件，当事件触发时执行Vue实例的方法。

<button @click="doSomething">Click me</button>

v-once：用于标记元素和其子元素只渲染一次，后续的数据变化不会影响它们。

<p v-once>{{ message }}</p>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-01，如有侵权请联系 cloudcommunity@tencent.com 删除

开发者

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度