Vue.js前端开发实战（二）

最新推荐文章于 2024-06-01 09:46:12 发布

Alphamilk

最新推荐文章于 2024-06-01 09:46:12 发布

阅读量553

点赞数

分类专栏： Vue2.0 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dogxixi/article/details/131865544

版权

Vue2.0 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

常用的内部指令

v-if	根据条件渲染元素，如果条件为真，则渲染元素；否则，不渲染
v-for	根据数组或对象的内容进行循环渲染元素
v-bind	动态地绑定属性或 DOM 特性
v-on	绑定事件监听器，用于处理 DOM 事件
v-model	在表单元素上创建双向数据绑定，将输入的值与 Vue 实例的数据进行同步
v-show	根据条件显示或隐藏元素
v-text	更新元素的文本内容，类似于使用 `textContent` 属性
v-html	更新元素的 HTML 内容，类似于使用 `innerHTML` 属性

以下是指令的案例代码

1.v-if与v-show

都是用来控制是否显示元素

区别：

编译时刻：v-if 是"惰性"地编译条件块中的内容。只有当条件为真时，才会进行编译，不满足条件时，元素及其子组件不会被渲染到 DOM 中。而 v-show 在任何时候都会编译条件块中的内容，但是会使用 CSS 的 display 属性来控制元素的显示与隐藏。

切换开销：v-if 在条件切换时有更高的切换开销，因为它会完全销毁和重建条件块中的元素及其子组件。而 v-show 只是简单地切换了元素的 CSS 属性，所以切换开销较小。

初始化渲染：v-if 在初始渲染时，如果条件为假，则条件块中的元素不会被渲染到 DOM。而 v-show 在初始渲染时，会将条件块中的元素渲染到 DOM，只是通过 CSS 的 display 属性来决定是否显示。

性能优化：如果需要频繁切换显示状态，v-show 的切换开销较小，因为元素始终保留在 DOM 中。而如果条件很少改变，且初始渲染时条件为假的情况下，v-if 的初始渲染开销会较小。

综上所述，如果频繁地切换显示状态，则使用 v-show 更合适；如果不经常切换显示状态或初始渲染时条件为假的情况下，使用 v-if 更合适。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-show="showInfo">show</p>
        <p v-show="!showInfo">display</p>
        <button @click="showInfo=!showInfo">show or display</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        showInfo:true
    }
})
</script>
</html>

2.v-bind与v-model

用以控制数据绑定

在 Vue 中，"单向数据绑定"（One-Way Data Binding）和"双向数据绑定"（Two-Way Data Binding）是指数据和视图之间的关联方式。

单向数据绑定：单向数据绑定是指数据流只能从数据源（通常是 Vue 实例中的数据）流向视图（HTML 元素）。当数据发生变化时，视图会相应地更新，但反过来，对视图的修改不会影响到数据源。在 Vue 中，使用 v-bind 指令可以实现单向数据绑定，将数据绑定到 HTML 元素属性上，实现从数据到视图的更新。

双向数据绑定：双向数据绑定是指数据可以在数据源和视图之间进行双向流动。当数据发生变化时，视图会更新；同时，当用户在视图中输入或修改数据时，数据源也会相应地更新。在 Vue 中，使用 v-model 指令可以实现双向数据绑定，适用于表单元素等需要用户输入的场景。

单向数据绑定

<div id="app">
  <p>Name: {{ name }}</p>
  <input type="text" v-bind:value="name">
</div>

<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
  data: {
    name: "John"
  },
  el: '#app'
});
</script>

双向数据绑定

<div id="app">
  <p>Message: {{ message }}</p>
  <input type="text" v-model="message">
</div>

<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
  data: {
    message: "Hello!"
  },
  el: '#app'
});
</script>

3.v-text与v-html

插入文本或者插入html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-text="msg"></p>
        <div v-html="blog"></div>
    </div>
    
</body>
<script src="./js/vue.js"></script>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            msg:'我是v-text指令插入的文本',
            blog:'<h1>我是v-html插入的html代码</h1>'
        }
    })
</script>
</html>

4.v-on

事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="changeUpcase">{{isUpperCase ? 'Change to Lowercase' : 'Change to Uppercase'}}</button>
        <p>{{msg}}</p>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm =new Vue({
        data:{
            msg:"hello world",
            isUpperCase: false
        },
        el:'#app',
        methods:{
            changeUpcase(){
                if(this.isUpperCase){
                    this.msg = this.msg.toLowerCase();
                }
                else{
                    this.msg = this.msg.toUpperCase();
                }
                this.isUpperCase = !this.isUpperCase

            }
        }
    })
</script>
</html>

5.v-for

列表渲染

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

<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
  data: {
    items: [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Orange" }
    ]
  },
  el: '#app'
});
</script>

在上面的例子中，我们有一个包含多个对象的 items 数组。使用 v-for="item in items"，Vue 会遍历 items 数组，并为每个数组元素生成一个 <li> 元素。:key="item.id" 是用来提供每个循环项的唯一标识，以便 Vue 在更新列表时能够准确追踪每一项的变化。

在每个 <li> 元素中，我们通过 {{ item.name }} 来显示 item 对象的 name 属性。

运行上述代码后，将会呈现一个无序列表，其中包含了数组 items 中的三个元素，分别是 "Apple"、"Banana" 和 "Orange"。

v-for 指令还支持索引和父级数据的访问，以及在循环内使用条件和计算属性等功能。可以根据具体需求在循环中添加更多的逻辑处理