vue学习(一)

九月 25, 2020

Vue笔记(一)

写在前面

生活开始变化，总之要学vue了

开始

vue差不多给我的感觉就是一个javascript的库，就和python一样

1	npm install vue

1	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明渲染

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

指令

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

指令-列举

v-text

预期：string

示例：

1
2
3

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

参考：

<span id="msg" v-text="msg"></span>
<script>
var v_text = new Vue({
  el : '#v-text',
  data: {
    html : '<strong>Hello</strong> <br/>Vue!'
  }
  })
</script>

效果：

注：v-html 与 v-text 的区别主要是前者输出位html，后者会输出全部text，例如<br/>，前者会换行，而后者会直接输出

v-html

预期：string
详细：
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击]
示例：
1
<div v-html="html"></div>
参考：

<div id="v-html" v-html="html"></div>
<script>
var v_html = new Vue({
  el : '#v-html',
  data: {
    html : '<strong>Hello</strong> <br/>Vue!'
  }
  })
</script>

效果：

注：v-html 与 v-text 的区别主要是前者输出位html，后者会输出全部text，例如<br/>，前者会换行，而后者会直接输出

v-show

预期：any
用法：

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。
参考：

<h1 id="v-show" v-show="ok">Hello!</h1>
</body>
<script>
var v_show = new Vue({
  el : '#v-show',
  data: {
    ok : false
  }
  })
</script>

效果：(false、0、null、undefined时不显示)

v-if

使用时会出现一闪的情况

预期：any
用法：

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程
参考：

<div id='v-if'>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>

</body>
<script>
var v_if_else = new Vue({
  el : '#v-if',
  data: {
    awesome : 1
  }
  })
</script>

效果：(false、0、null、undefined时不显示)

`v-if` vs `v-show`

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-else

使用时会出现一闪的情况

不需要表达式
限制：前一兄弟元素必须有 v-if 或 v-else-if。

用法：

为 v-if 或者 v-else-if 添加“else 块”。

<div id='v-if'>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>

</body>
<script>
var v_if_else = new Vue({
  el : '#v-if',
  data: {
    awesome : 1
  }
  })
</script>

效果：同 v-if

v-else-if

2.1.0 新增

类型：any
限制：前一兄弟元素必须有 v-if 或 v-else-if。

用法：

表示 v-if 的“else if 块”。可以链式调用。

<div id="v_if_else">
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</div>

</body>
<script>
var v_if_else = new Vue({
  el : '#v_if_else',
  data: {
    type : 'A'
  }
  })
</script>

效果：输出A

v-for

预期：Array | Object | number | string | Iterable (2.6 新增)
用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
1
2
3
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：
1
2
3
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
1
2
3
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

v-for 的详细用法可以通过以下链接查看教程详细说明。
参考：
- ```html

</body>

vue学习(一)

vue学习(一)

Vue笔记(一)

写在前面

开始

声明渲染

指令

指令-列举

v-text

v-html

v-show

v-if

v-if vs v-show

v-else

v-else-if

v-for

`v-if` vs `v-show`