vue指令复习

最新推荐文章于 2024-05-17 14:32:46 发布

_Improve

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量899

点赞数 14

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

本文链接：https://blog.csdn.net/qq_44501608/article/details/136557622

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

复习vue2.0，3.0指令

传统的DOM

在这里插入图片描述
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

JS操作DOM

在这里插入图片描述

DOM操作为啥麻烦

非常麻烦,可能大家开发的少, 没有体验到, 你想象一下 ,京东一共有很多个标签
在这里插入图片描述

比如我让你把右下角显示修改下, 你是不是要先选择这个html 然后再用JS来操作 .然后再用HTML拼接进去 .大概就是

// 创建商品分类数据
const categories = [
  { name: '电子产品', icon: '📱' },
  { name: '服装', icon: '👕' },
  { name: '食品', icon: '🍎' },
  { name: '图书', icon: '📚' },
  // 添加更多分类...
];

// 获取目标div元素
const targetDiv = document.getElementById('targetDiv');

// 创建ul元素
const ulElement = document.createElement('ul');

// 遍历商品分类数据并创建li元素
categories.forEach(category => {
  const liElement = document.createElement('li');

  // 创建span元素用于显示图标和文字
  const iconSpan = document.createElement('span');
  iconSpan.textContent = category.icon;

  const nameSpan = document.createElement('span');
  nameSpan.textContent = category.name;

  // 将图标和文字添加到li元素中
  liElement.appendChild(iconSpan);
  liElement.appendChild(nameSpan);

  ulElement.appendChild(liElement);
});

// 将ul元素追加到目标div中
targetDiv.appendChild(ulElement);

感谢GPT. 不是我写的

但是如果用VUE的模板指令呢

<!DOCTYPE html>
<html>
<head>
  <title>商品分类</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="category in categories" :key="category.name">
        <span>{{ category.icon }}</span>
        <span>{{ category.name }}</span>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        categories: [
          { name: '电子产品', icon: '📱' },
          { name: '服装', icon: '👕' },
          { name: '食品', icon: '🍎' },
          { name: '图书', icon: '📚' },
          // 添加更多分类...
        ]
      }
    });
  </script>
</body>
</html>

我们只需要改变底下data里面的内容就好了
在这里插入图片描述

在这里插入图片描述

V就是上面的页面

Model就是底下的data

VM 就是帮你把数据dom上去的,就是vue的核心

VUE模板指令

显示相关

插值表达式{{}}

<p>{{ inputValue }}</p>

注意事项
- {{}} 会造成插值闪烁 ,什么是插值闪烁 ? 目前暂时不演示 ,效果如下

在这里插入图片描述

v-model

v-model 指令用于在表单元素和Vue实例的数据之间创建双向数据绑定。

<input v-model="inputValue" placeholder="Type something">
<p>{{ inputValue }}</p>

注意事项
- v-model 适用于<input>, <textarea>, 和 <select>等表单元素。
- 双向绑定的数据会实时更新，同时用户的输入也会影响绑定的数据。

v-text 和 v-html

v-text 指令用于设置元素的文本内容，v-html 用于设置元素的HTML内容。

<div v-text="displayText"></div>
<div v-html="rawHtml"></div>

注意事项
- 避免使用 v-html 来直接插入用户提供的内容，以防止XSS攻击

v-if 和 v-else

v-if 和 v-else 指令用于根据条件切换DOM元素的显示与隐藏。

<div v-if="showElement">显示这个元素</div>
<div v-else>如果'showElement'值为false，这个元素则会显示</div>

注意事项
- 使用 v-if 时要考虑性能，因为它会频繁地销毁和重建DOM元素。
- 可以结合 v-else-if 来实现多条件判断。

v-show

v-show 指令根据表达式的真假切换元素的显示与隐藏，与 v-if 不同，v-show 仅通过设置元素的 CSS 属性 display 来切换元素的显示状态。

<div v-show="isVisible">显示或者隐藏</div>

注意事项
- v-show 不会销毁和重建DOM元素，但可能会影响性能，特别是在初始渲染时。

v-for

v-for 指令用于循环遍历数组或对象，生成对应的DOM元素。

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

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

注意事项
- 始终为循环的元素提供一个唯一的 key，以便Vue能够跟踪元素的变化。
- 如果循环的是对象，可以使用 (item, index) 作为参数。

事件相关

v-on

v-on 指令用于监听DOM事件，并在触发时调用Vue实例中指定的方法。

<button v-on:click="handleClick">点击一下</button>

注意事项
- v-on 可以简写为 @。例如，上面的示例可以简写为 @click="handleClick"。其中handleClick是一个方法

属性相关

v-bind

v-bind 指令用于动态地将一个或多个 HTML 属性绑定到 Vue 实例的数据。它会在元素加载时根据指定的数据动态更新属性。

<button v-bind:disabled="isButtonDisabled">点击一下</button>

注意事项
- v-bind 可以简写为 :。例如，上面的示例可以简写为 :disabled="isButtonDisabled"。
- 比如a标签里面的href也可以

综合练习

<!DOCTYPE html>
<html>
<head>
    <title>商品分类</title>
  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>商品分类列表</h1>

    <input v-model="searchQuery" placeholder="搜索分类">

    <ul>
        <li v-for="category in categories" :key="category.name" v-show="category.name.includes(searchQuery)" @click="showCategoryInfo(category)">
            <span>{{ category.icon }}</span>
            <span>{{ category.name }}</span>
        </li>
    </ul>

    <div v-if="selectedCategory">
        <h2>选中的分类信息</h2>
        <p>名称: {{ selectedCategory.name }}</p>
        <p>图标: {{ selectedCategory.icon }}</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            searchQuery: '',
            categories: [
                { name: '电子产品', icon: '📱' },
                { name: '服装', icon: '👕' },
                { name: '食品', icon: '🍎' },
                { name: '图书', icon: '📚' },
                // 添加更多分类...
            ],
            selectedCategory: null
        },
        methods: {
            showCategoryInfo(category) {
                this.selectedCategory = category;
            }
        }
    });
</script>
</body>
</html>

},
// 添加更多分类…
],
selectedCategory: null
},
methods: {
showCategoryInfo(category) {
this.selectedCategory = category;
}
}
});