Vue基础

2018-04-10

Vue

vue入门基了解

1. Vue入门

1.1. 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

1.2. 文件引入

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

或者

1 2	<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

也可直接下载Vue的js文件引入

1 2	<!-- 在vue官网去下载相应的开发版本 --> https://cn.vuejs.org/v2/guide/installation.html

1.3. Vue的初始小Demo

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之Helloworld</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
    {{ message }}
  </div>
  <script>
    var app = new Vue({         // 创建Vue对象。Vue的核心对象。
      el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
      data: {                   // data: 是Vue对象中绑定的数据
        message: 'Hello Vue!'   // message 自定义的数据
      }
    });
  </script>
</body>
</html>

2. Vue数据绑定

2.1. 什么是双向数据绑定

Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。

由Dom开发的主导时代更变为数据驱动开发时代。

之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上

2.2. Vue绑定文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值

1
2
3

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

2.3. 绑定的数据可以使用javaScript表达式

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

<div>Message: {{ msg + ' - ' + name }}</div>
<script>
  var app = new Vue({         // 创建Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hello',              // message 自定义的数据
      name: 'world'       // name自定义的属性，vue可以多个自定义属性，属性类型也可是复杂类型
    }
  });
</script>

结果：Hello-world

vue还支持表达式中的计算、函数处理。

1
2
3

<div>Message: {{ true ? '123' : '456'  }}</div>
<p>
<div>Message: {{ num*5  }}</div>

2.4. Vue属性绑定

Vue中不能直接使用语法进行绑定html的标签，而是用它特有的v-bind指令

1
2
3

<标签 v-bind:属性名="绑定vue对象data里的属性名"></标签>
例如：
<div v-bind:attr="name"></div>

v-bind使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可

2.5. Vue输出html

由于Vue对于输出绑定的内容做了提前encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

<div id="app">
  <div v-html="tagHtml">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue对象中绑定的数据
      tagHtml: '<p>这里是p标签里的内容</p>'
    }
  });
</script>

2.6. 样式的绑定

2.6.1. 绑定样式对象

经常我们需要对样式进行切换，比如：div的显示和隐藏

<div id="app">
      <div v-html="hl"></div>
      
      <div v-bind:class="{ active: isActive }">
      <!-- class混合-->
      <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 
      <!--对象方式-->
      <div class="static" v-bind:class="classObject">
      <!--数组-->
      <div v-bind:class="[activeClass, errorClass]">
      <!--style 内联样式绑定-->
      <div v-bind:style="{fontSize: size + 'px', width: width}"></div>
  </div>
<script>
    var app = new Vue({
      el:"#app",
      data:{
        hl: '<p>插入的标签</p>',
        isActive: true, //混合绑定
        hasError: false,
        classObject: {  //class在data中样式对象绑定
          active: true,
          'text-danger': false
        },
        activeClass: 'active', //数组方式
        errorClass: 'text-danger',
        width:100,
        size:16
      }
    })
</script>

2.6.2. 混合普通的HTML标签样式类及绑定样式对象

v-bind:class指令可以和普通class共存;
最后它们会合并到一个class里

2.6.3. 绑定data中样式对象

直接在html属性中的双引号内写对象,没有智能提示，很容易写错.Vue可以让我们直接把绑定的class字符串指向data的一个对象

2.6.4. 内联样式绑定

内联样式的绑定，非常类似于样式类的操作。v-bind:style 的对象语法十分直观——看着非常像CSS ，其实它是一个 JavaScript对象。 CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。

<div id="app">
    <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
      vue内联样式绑定
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });
  </script>

自动添加前缀
当 v-bind:style 使用需要特定前缀的CSS属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

2.7. 计算属性computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

用法：和data属性一样用，不用加()

1
2
3

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

比如：把一个日期按照规定格式进行输出，可能就需要我们对日期对象做一些格式化的出来，表达式可能就捉襟见肘了。

<div id="app">
    <!--用法和data属性一样使用-->
  {{ getBirthday }} 
</div>
<script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 这是一个日期对象的值：1998年11月1日
        address: '北京'
      },
      computed: {
        // 把日期换成 常见规格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
 </script>

2.8. 绑定的数据过滤器filters

过滤器是一个比较特别方便选项，过滤器本质就是数据在呈现之前先进行过滤和筛选

Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“|”指示：

/*
* 用法: 
* {{ fil | filter }}
* {{ fil | filterA | filterB }}  可以链式调用
* 常用到：展示几个文字，三位一个逗号，单位、时间转换等
*/

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
<!--  Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。-->
<script>
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

{{ message | filterA('arg1', arg2) }}
//这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

</script>

双向数据绑定

js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？

Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

限制：
<input>
<select>
<textarea>
components

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
    <input type="text" name="txt" v-model="msg">
    <p>您输入的信息是：{{ msg }}</p>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        msg: '双向数据绑定的例子'
      }
    });
  </script>
</body>
</html>

3. Vue列表渲染及条件渲染

3.1 条件渲染 v-if

根据判断布尔值，处理模板
用法：<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
v-if指令可以根据数据绑定的情况进行插入标签或者移除标签

3.2 列表渲染

v-for循环渲染标签

模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法
注：如果我们想要循环两标签，Vue给我们提供了template标签，供我们用于v-for循环中进行处理。
用法：<li v-for="item in list"> </li>

v-for对应数组更新

Vue的机制就是检测数据的变化，自动跟新HTML。数组的变化，Vue之检测部分函数，检测的函数执行时才会触发视图更新
例如一些数组方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

Template循环渲染多标签

上面的例子，我们演示的是每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢？如果还有生成其他的标签呢？

4. Vue 事件处理

4.1 监听事件的Vue处理

监听事件vue处理 v-on:事件名="方法" 简写@事件名=“方法”
之前我们直接用dom原生的方式去绑定事件。vue提供了指令绑定非常方便。vm更简洁
vue 提供了v-on指令进行事件绑定
用法：
1
<div v-on="num+=1"> {{ num }}</div>

4.2 事件处理方法集成到Vue对象methods里

Vue对象中可以添加methods属性

4.3 事件修饰符

事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是常见的需求，我们可以在methods方法调用的函数了进行实现，vue为了让methods只有纯粹的数据逻辑，不处理一些Dom事件细节，所以vue提供了事件修饰符，在指令后面以点来修饰。修饰符可以串联。
.stop 阻止单击事件冒泡
.prevent 提交事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（而不是子元素）触发时触发回调

还有按键修饰符

1 2	<input v-on:keyup.13="submit"> <input v-on:keyup.enter="submit">

5 Vue实例初始化的选项配置对象

5.1 vue实例的data对象

数据绑定离不开data里面的数据。是Vue的核心属性。也是vue绑定数据到html标签的数据源泉，vue框架会自动监视data里面的数据变化，然后更新到html标签上去。
原理：自动化将data里面的数据进行递归抓换成getter和setter,然后自动更新html标签。
data对象类型：
object和function。
组件对象中，data必须是function类型

5.2 vue实例的`computed`

Vue的计算属性computed的属性会自动混入Vue的实例中。所有 getter 和 setter的this上下文自动地绑定为Vue实例。再计算属性中定义的函数里面可以直接使用指向了vue实例的this

5.3 vue实例的`methods`

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

5.4 `vue`实例的`watch`

watch是一个对象，键是需要观察的表达式，值是对应的回调函数或方法名。
回调函数有两个参数，第一个是最新值，第二个是之前的值。
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

5.5 vue实例`el`

提供一个在页面上已存在的 DOM元素作为 Vue 实例的挂载目标,也就是说Vue绑定数据到哪里去找