vue基础讲解（一）

vue基础讲解（一）

1、vue是什么

Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架 ，vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 ，他的创建者是尤雨溪

2、引入vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者:

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3、使用vue创建一个hello vue实例
<<div id="app">
  {{ message }} <!-- {{...}}  插值表达式取vue对象中data中的值 -->
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

输出

Hello Vue!
4、vue指令的用法
1）v-cloak指令的用法

v-cloak的作用就是消除Vue语法所带来的页面样式的闪动 ，在下面代码中当我们打开浏览器的一瞬间或者我们刷新网页的一瞬间，我们会发现网页上会出现我们的Vue表达式的结构（网速较慢时，渲染网页会出现闪烁即插值表达式显示出来）

<div id="app">
  <div>
    {{msg}}
  </div>
</div>

v-cloak的用法：就是和 CSS 规则如 [v-cloak] { display: none } 一起用，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<head>
  ...
  <style>
  [v-cloak]{
      display: none;
  }
</style>
</head>
<body>
  <div id="app">
  <div v-cloak>{{msg}}</div>
</div>
</body>

背后的原理：先通过样式隐藏内容(隐藏未编译的 Mustache 标签直到实例准备完毕)，然后在内存中进行值的替换(也就是当vue实例加载完毕后) ，替换好之后再显示最终的结果

2) 文本数据填充的三个指令的用法(v-text v-html v-pre)

三个数据填充的指令分别是：

1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题

3、v-pre用于显示原始信息(不编译数据直接显示)用于对数据做原封不动的展示。

<div id="app">
  <div>{{msg}}</div>
  <div v-text="msg"></div>
  <div v-html="msg1">{{msg}}</div>
  <div v-pre>{{msg}}</div> <!--这里显示{{msg}}-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!',
    msg1: '<h1>hello<h1>',
  }
})
</script>
3) v-once指令的用法

v-once使元素和组件只渲染一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-once的应用场景：如果显示的信息后续不需要再修改，我们可以使用v-once，这样可以提高性能。(数据的更新会让DOM结构重新渲染 ，一个网站中有巨量的数据 ，时刻在更新电脑浏览器每次都要重新渲染页面会消耗性能 ，对于不常改变的数据可以使用提升性能)

<div id="app">
  <div v-once>{{msg}}</div> <!--只渲染一次 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!',
  }
})
</script>
4）双向数据绑定v-model的用法

什么是双向数据绑定：

1、从页面到数据 (可以理解为页面改变带动数据改变)

2、从数据到页面(数据改变带动页面改变)

img

<div id="app">
  <div>{{msg}}</div> 
  <input type="text" v-model="msg"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!',
  }
})
</script>
posted @ 2020-05-11 09:16  Quan'sBlog  阅读(276)  评论(0)    收藏  举报