Vue 使用总结

本文基于 Vue 2.0,聊一聊 Vue 的使用。

简单介绍

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

我个人觉得有基础的人学习 Vue 上手是比较快的，使用也是简单，并且还有完整的生态并且社区活跃，相信学习 Vue 会是一件有价值的事。

在项目中集成 Vue

简单的，写代码的方式简单点。我们从简单的开始，Vue 是一个 js 库，想要在项目中使用，需要在项目中引用 Vue，Vue 的引用和引用 JavaScript 库没有区别。

1

<script src="https://unpkg.com/vue"></script>

把 Vue 集成进项目后，实例化一个 Vue 对象来对接原生开发。Vue 对象是我们介入原生开的入口，通过这个入口就能使用 Vue 来开发。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<html>
    <head>
         <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                 message: 'Hello,Vue!'
            }
        })
    </script>
</html>

在 script 标签里，我们创建了一个 Vue 对象。在 Vue 对象中有 el 字段,它代表我们创建的 Vue 对象要在哪个元素上进行操作，以后 Vue 所有的操作都会在该元素下，Vue 中的所有元素都是该元素的子元素。 el 可以通过 CSS 选择器来指定具体的元素。另外一个重要的字段就是 data ，Vue 是一个 MVVM 框架，没有数据和咸鱼有什么区别。在 data 中的数据就可以在 html 中访问，最简单就是使用 {{ }} 来访问。 {{ }} 是模板语法，会简单的显示文本内容，当 data 中的数据发生变化时， {{ }} 中的会自动更新。

模板指令

在了解了怎么在项目中引入 Vue 之后，就来了解一下 Vue 的使用。

文本渲染

普通文本渲染

给什么就显示什么。不会进行编译，原样输出。就算你给了一段 html 也只是原样输出而已。

1
2
3


<div>
    {{message}}
</div>

除了使用 {{ }} 来渲染文本，还可以使用 v-text 来更新内容。

1

<span v-text="message"></span>

使用 v-text 和使用 {{ }} 都是更新元素的 textContent ,不过要更新局部或者部分还是要使用 {{ }} 。

html 渲染

如果我们只是简单的想要渲染文本，使用 {{ }} 就够了。但是我们有可能会需要渲染 html，这时候就需要使用 v-html 来渲染包含 html 的内容。与 v-text 不通过的是 v-html 更新的是元素的 innerHTML ， v-html 会按照普通的 html 来进行插入，不会进行编译。

1
2


<div v-html="<h1>我是 h1 标签">
</div>

条件渲染

Vue 提供了 v-if 来控制标签的渲染， v-if 会根据表达式的值来决定是否渲染。当表达式为不为 true 时可以使用 v-else 来渲染其他内容， v-else 不需要表达式，但是 v-else 前一兄弟必须要有 v-if 或者 v-else-if 。 v-else-if 和 v-if 一样也是用来判断条件的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<div id="app">
    <p v-if="isShow">显示</p>
    <p v-else>不显示</p>
</div>
<script>
     var app = new Vue({
          el: '#app',
          data: {
              isShow: true
          }
     })
</script>

循环

循环在编程中是必不可少的，Vue 怎么能缺席呢。

Vue 提供 v-for 指令来表示循环

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<div id="app">
    <ol>
        <li v-for="item in items">
            {{item}}
        </li>
    </ol>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: ['Java','C/C++','JavaScript','Python','PHP','SQL']
        }
    })
</script>

v-for 还提供了索引功能，所以上面的代码还可以修改成：

1
2
3


<li v-for="(item,index) in items">
    {{index + ":" + item}}
</li>

v-for 不仅可以遍历数组，还可以遍历对象的每个属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div id="app">
    <ol>
        <li v-for="(value,key) in user">
            {{key + ":" + value}}
        </li>
    </ol>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {
                name: 'Vue',
                version: '2.0'
            }
        }
    })
</script>

属性绑定

在 Vue 中，属性是不能使用 {{ }} 进行绑定的。所以 Vue 提供了 v-bind 来绑定属性。

1

<a v-bind:href="https://cn.vuejs.org"></a>

由于 v-bind 使用很频繁，所以 Vue 提供了 v-bind 的缩写，只需要属性前面加上 : 。如下所示

1

<a :href="https://cn.vuejs.org"></a>

事件绑定

在 Vue 中使用 v-on 来进行事件绑定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div id="app">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">逆转文本</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello,Vue.js'
        },
        methods: {
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

和 v-bind 一样 v-on 也提供了缩写，可以使用 @ 来代替 v-on 。如下所示

1

<button @click="reverseMessage">逆转文本</button>

表单的双向绑定

文本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<div id="app">
    <p>{{message}}</p>
    <input v-model="message"/>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js'
        }
    })
</script>

通过使用 v-model 就能对数据进行双向绑定了，当 input 标签里的内容被改变的时候，所绑定的 message 也会对应的改变。使用起来还是非常简单的。

多行文本

1
2


<textarea v-model="message">
</textarea>

多行文本和单行的一样，没有太大的区别。

复选框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div id='app'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        checkedNames: []
      }
    })
</script>

单选按钮

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<div id="app">
    <input type="radio" value="Jack" v-model="name"/>
    <label>Jack</label>
    <br/>
    <input type="radio" value="John" v-model="name"/>
    <label>John</label>
    <br/>
    <input type="radio" value="Mike" v-model="name"/>
    <label>Mike</label>
    <br>
    <span>选择了: {{ name }}</span>
</div>
<script>
new Vue({
    el: "#app",
    data: {
      name: ''
    }
})
</script>

选择列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div id="app">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
    el: '#app',
    data: {
      selected: ''
    }
})
</script>

v-model 除了上面的基本用法，还提供了修饰符的功能。

.lazy

lazy 会把原来的 input 事件改为 change 事件，只有当文本的内容发生了变化，才会同步数据。

1

<input v-model.lazy="message"/>

.number

number 修饰符会将输入的自动转为 Number 类型。

1

<input v-model.number="message" type="number"/>

.trim

trim 修饰符会自动过滤首尾的空格。

1

<input v-model.trim="message"/>

参考

Vue 官网

文章目录