Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

介绍

安装

1
2
3
4
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本,优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

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

说明:给前端定义一个 Vue 对象,然后前端可以有选择的渲染,因为是响应式的,所以数据的修改会直接反应到前端。

条件与循环

1
2
3
  <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>
1
2
3
4
5
6
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

说明:添加了条件语法

处理用户输入

1
2
3
4
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
   var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

说明:修改了事件绑定语法

组件化应用构建

详细说明

前端模板 view

数据定义与绑定
1
2
3
4
5
6
7
8
9
  <div id="app">{{val}}<div>
      <script>
        new Vue({
        el: '#app',
        data: {
        val: 'Hello World !'
        }
        })
      </script>

数据定义在 data 中,将 el 与 data 进行绑定。前端可以用模板选择要显示的数据,模板还能进行简单的计算。

非成对 DOM 的数据绑定 v-model
HTML
1
  <span v-html="rawHtml"></span>
使用表达式
1
2
3
4
  {{ number + 1 }}
  {{ ok ? 'YES' : 'NO' }}
  {{ message.split('').reverse().join('') }}
  <div v-bind:id="'list-' + id"></div>
方法的定义及事件绑定
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  <div id="app">
    <input type="button" value="点击我" v-on:click="fun()">
  </div>
  <script>
    new Vue({
    el: '#app',
    data:{
    val: 'hello'
    },
    methods: {
    fun(){
    alert(this.val);
    }
    }
    })
  </script>

绑定方法:

  1. v-on:click="fun()"

  2. @:click="fun()"

属性绑定
  • v-bind:title="message"

1
  <button v-bind:disabled="isButtonDisabled">Button</button>

特殊例子, 如果 `isButtonDisabled` 的值是 `null`、`undefined` 或 `false`,则 `disabled` 特性甚至不会被包含在渲染出来的 `<button>` 元素中。

条件与循环
  • v-if 条件判断

  • v-else 分支

  • v-for 循环 (val,key) in arr

  • v-else-if

  • v-show 显示隐藏

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
      <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>
事件绑定
点击事件 @click
鼠标事件 @mouseover @mouseleave
表单事件 @focus @blurs
键盘事件 @keyup @keydown
事件修饰符
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="doThis"></a>

  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>

  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>

  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>

  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>

  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>

  <!-- 点击事件将只会触发一次 -->
  <a v-on:click.once="doThis"></a>

  <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  <!-- 而不会等待 `onScroll` 完成  -->
  <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  <div v-on:scroll.passive="onScroll">...</div>
  <!-- 这个 `.passive` 修饰符尤其能够提升移动端的性能。 -->
按键修饰符
1
2
3
4
  <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
  <input v-on:keyup.13="submit">
  <!-- 同上 -->
  <input v-on:keyup.enter="submit">

自定义按键修饰符别名

1
2
  // 可以使用 `v-on:keyup.f1`
  Vue.config.keyCodes.f1 = 112

全部的按键别名

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

系统修饰键

  • .ctrl

  • .alt

  • .shift

  • .meta

1
2
3
4
5
6
  <!-- Alt + C -->
  <input @keyup.alt.67="clear">

  <!-- Ctrl + Click -->
  <div @click.ctrl="doSomething">Do something</div>
  `
缩写
  • v-bind 缩写 :

  • v-on 缩写 @

计算属性

对于需要修饰的内容 ,直接用模板处理会加重模板的清晰度,可以用计算属性维护

1
2
3
4
5
6
7
  computed: {
      // 计算属性的 getter
      reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
      }
  }
侦听器

自己有特殊需求可以使用

1
2
3
4
5
  watch: {
         // 如果  dataname 发生改变,这个函数就会运行
      dataname: function ( ){
      }
  },
Class 与 Style 绑定
class
1
2
3
  <div class="static"
       v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
1
2
3
4
  data: {
      isActive: true,
      hasError: false
  }

结果渲染为

1
  <div class="static active"></div>

或者

1
  <div v-bind:class="classObject"></div>
1
2
3
4
5
6
  data: {
      classObject: {
          active: true,
          'text-danger': false
      }
  }
style
1
<div v-bind:style="styleObject"></div>
1
2
3
4
5
6
  data: {
      styleObject: {
          color: 'red',
          fontSize: '13px'
      }
  }

组件

每个页面有些东西是重复的(比如头部,底部,侧边栏),那么,我们可以把这些重复的地方第一为组件,就可以重复使用了。

定义组件
  • Vue.component(tagName, options)

    1
    2
    3
    4
    
      // 定义名为 todo-item 的新组件
      Vue.component('todo-item', {
          template: '<li>这是个待办项</li>'
      })
    
使用组件

组件也是要配对的,和标签一样的用法

1
2
3
4
  <ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item1 v-for="i in [1,2,3]"></todo-item>
  </ol>
定义局部组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  var Child = {
      template: '<div>A custom component!</div>'
  }

  new Vue({
      // ...
      components: {
          // <my-component> 将只在父组件模板中可用
          'my-component': Child
      }
  })
模板解析注意事项

因为 Vue 的解析在 DOM 之后,所以对于像 `<ul>`、`<ol>`、`<table>`、 `<select>` 这样的元素会有限制,这时要用到 is 特性

错误的方法

1
2
3
  <table>
    <my-row>...</my-row>
  </table>

正确的方法

1
2
3
  <table>
    <tr is="my-row"></tr>
  </table>
  • JavaScript 内联模板字符串

    • `.vue` 组件

    这两种方式就没有限制

data 必须是函数
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  Vue.component('buttonclicked', {
      props: [
          'initial_count'
      ],
      data() {
          return {
              count: 0
          }
      },
      template: '<button v-on:click="onclick">Clicked {{ count }} times</button>',
      methods: {
          onclick() {
              this.count += 1;
          }
      },
      mounted() {
          this.count = this.initial_count;
      }
  });

过渡效果

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:

在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js.

单文件组件

为了更好地适应复杂的项目,Vue 支持以.vue 为扩展名的文件来定义一个完整组件, 用以替代使用 Vue.component 注册组件的方式。开发者可以使用 Webpack 或 Browserify 等构建工具来打包单文件组件。

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、 编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运 行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。

  • created 实例被创建后执行

  • mounted

  • updated

  • destroyed

vue-cli 使用

初始化项目

vue init webpack vue_mall(项目名称)

运行项目 npm run dev