Vue.js入门及常用指令

发布于 2020-04-22  164 热度


简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

准备工作

导包

去Vue.js官网下载js包:https://cn.vuejs.org/
其中有两个包
* vue.js:开发版本,包含完整的警告和调试模式
* vue.min.js:生产版本,删除了警告,33.30KB min+gzip
我们在学习过程使用开发版本,使用script标签引入:

<script src="js/vue.js"></script>

创建Vue对象

var vm = new Vue({
    el:"body",//需要vue管理的DOM
    data:{//数据
        msg:"hello Vue!"
    },
    methods:{//方法
        buttonClick(){
            alert("点击了click!");
        }
    }
})

new了之后,vm中的所有数据及方法均可使用vm.xxx访问到。例如vm.msgvm.buttonClick()

模板语法及常用指令

Mustache语法

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

<span>{{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。
Mustache语法中还支持JavaScript表达式:

{{ 2 + 1 }}
{{ 1 > 2 ? 'YES' : 'NO' }}

v-text

v-text会获取msg的内容并填充到标签内。

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

无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
如果想避免更新,可以使用使用 v-once 指令,当数据改变时,插值处的内容不会更新。

<span v-once>{{hello}}</span>

v-html

使用Mustache语法或v-text都会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<span v-html="rawHtml"></span>

v-bind

Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:

<div v-bind:id="dynamicId" v-bind:class="dynamicClass"></div>

也可以简写为:

<div :id="dynamicId" :class="dynamicClass"></div>

也支持JavaScript:

<div v-bind:id="'list-' + id"></div>

动态参数:
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用

v-if

v-if指令将根据表达式的值的真假来创建/移除元素。

<p v-if="seen">我被创建了!</p>

如果v-if的条件经常发生改变,就会频繁创建、删除元素,会造成性能消耗,因此这个条件下推荐使用v-show

v-show

v-show指令将根据表达式的值的真假来显示/隐藏元素。
v-if不同,当条件不成立时,v-show不会删除元素,只是使用style的display:none将其隐藏起来了。

<p v-show="seen">现在你看到我了</p>

v-for

v-for循环迭代:

数组

<ul>
  <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
</ul>

对象

循环遍历对象身上的属性

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

循环

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

v-on

v-on用于事件绑定。

<button v-on:click="buttonClick" v-on:focus="buttonFocus">按钮</button>

也可以简写为@:

<button @click="buttonClick" @focus="buttonFocus">按钮</button>

v-bindv-on也支持动态参数。

v-cloak

在网速比较慢,Vue.js未执行完时,Mustache语法会直接显示出来,为了更好的用户体验,可以使用v-cloak来实现加载过程中的美化。

<span v-cloak>{{ msg }}</span>

在CSS中对带有v-cloak属性的标签美化:

[v-cloak]{
  display: none;
}

v-model

双向数据绑定,当V(页面)数据发生变化,VM(Vue实例)的数据也会同步变化。
同样,当VM(Vue实例)的数据发生变化,V(页面)也会同步变化。
例如:

<input type="text" v-model="inputValue"/>

我一直在开辟我的天空