学习随笔Vue

v-if：
- v-if 是用于条件性地渲染 HTML 元素，根据表达式的值来决定是否将元素添加到 DOM 中。
- 当表达式的值为 true 时，元素会被渲染到 DOM 中，当表达式的值为 false 时，元素不会被渲染到 DOM 中，也就是说元素会被完全删除。
- 当条件频繁变化时，使用 v-if 适合，因为它能够完全销毁和重建元素，这样可以节省内存，但频繁的 DOM 操作也可能会影响性能。
```
<div v-if="isVisible">Content</div>
```
```
new Vue({
  data: {
    isVisible: true
  }
})
```
在这个例子中，当 isVisible 的值为 true 时，<div> 元素会被渲染到 DOM 中，当 isVisible 的值为 false 时，<div> 元素会从 DOM 中移除。
v-show：
- v-show 也用于根据表达式的值来控制元素的显示和隐藏，但是它是通过 CSS 的 display 属性来实现的。
- 当表达式的值为 true 时，元素会显示，当表达式的值为 false 时，元素会隐藏，但是元素的 DOM 结构始终存在于页面中。
- 当需要频繁切换元素的显示状态，而且希望保留元素的 DOM 结构时，使用 v-show 更合适，因为它只是切换了元素的 display 属性，不会对 DOM 结构进行修改。
```
<div v-show="isVisible">Content</div>
```
```
new Vue({
  data: {
    isVisible: true
  }
})
```
当 isVisible 的值为 true 时，<div> 元素会显示，当 isVisible 的值为 false 时，<div> 元素会隐藏，但是元素的 DOM 结构始终存在于页面中。

因此，主要区别在于：

v-if 是条件性地向 DOM 中添加或删除元素，适合在条件改变不频繁的情况下使用。
v-show 是通过 CSS 控制元素的显示和隐藏，适合在需要频繁切换显示状态但不频繁改变条件的情况下使用。
v-bind 和 v-model 是 Vue.js 中两个不同的指令，它们用于不同的场景，但都是用来处理数据绑定的。

v-bind：
- v-bind 用于动态地绑定 HTML 属性，它会根据 Vue 实例中的数据来更新 HTML 元素的属性。
- 例如，你可以使用 v-bind 来动态地绑定一个元素的 href、class 或者其他属性。
```
<a v-bind:href="url">Link</a>
```
```
new Vue({
  data: {
    url: 'https://example.com'
  }
})
```
在这个例子中，href 属性会根据 Vue 实例中的 url 数据动态地更新。
v-model：
- v-model 用于在表单元素和 Vue 实例的数据之间建立双向绑定关系。
- 它可以在表单元素（如 <input>、<textarea>、<select>）上创建双向数据绑定，当用户输入时，Vue 实例中对应的数据也会更新，反之亦然。
```
<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
```
```
new Vue({
  data: {
    message: ''
  }
})
```
在这个例子中，当用户在输入框中输入内容时，message 数据会自动更新，同时页面上绑定的 {{ message }} 也会实时更新。

因此，主要区别在于：

v-bind 用于将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，实现单向绑定。
v-model 用于在表单元素和 Vue 实例的数据之间建立双向绑定关系，实现双向数据绑定。

Vue项目打包

终端输入npm run build
将dis下的复制
替换nginx里面的html

端口号更改
nginx-config ---> listen 端口

posted on 2024-03-02 10:03 放水。阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

学习随笔Vue

导航

公告