学习 Vue.js 最有效的方法是查看官网文档

数据绑定和第一个Vue应用

先从一段简单的 HTML 代码开始,感受 Vue.js 最核心的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好,{{ name }}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>

这是一段非常简单的代码,但是体现了 Vue 最核心的功能:双向绑定。在输入框输入的内容会实时显示在页面的 h1 标签内。

Vue实例与数据绑定

实例与数据

通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue 应用:

var app = new Vue({
//选项
})

变量 app 就代表了这个 Vue 实例。

首先,必不可少的一个选项就是 el 。el 用于指定一个页面已存在的 DOM 元素来挂载 Vue 实例,它可以是 HTMLElement,也可以是 CSS 选择器,比如:

<div id="app"><div>

var app = new Vue({
el: document.getElementById('app') //或者是'#app'
})

挂载成功后可以使用 app.$el 来访问该元素。

通过 Vue 实例的 data 选项,可以声明应用内需要双向绑定的数据。

var app = new Vue({
el: '#app',
data: {
a: 2
}
}) console.log(app.a); // 2

除了显示声明数据外,也可以指向一个已有的变量,并且他们之间默认建立了双向绑定,当修改其中一个,另一个也会一起变化。

var myDate = {
a: 1
} var app = new Vue({
el: '#app',
data: myDate
})

生命周期

每个 Vue 实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑,如果你使用过 jQuery,一定知道它的 ready() 方法,比如以下示例:

$(document).ready(function() {
//DOM 加载完后,会执行这里的代码
})

Vue的生命周期钩子与之类似,比较常用的有:

  • created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用,需要初始化处理一些数据时会比较有用。
  • mounted:el 挂载到实例上后调用,一般我们的第一个业务会在这里开始。
  • beforeDestory:实例销毁之前调用,主要解绑一些使用 addEventListener 监听的事件等。

这些钩子与 el 和 data 类似,也是作为选项写入 Vue 实例内,并且钩子的 this 指向的是调用它的 Vue 实例:

var app = new Vue({
el: '#app',
data: {
a: 2
},
created: function() {
console.log(this.a); // 2
}
mounted: function() {
console.log(this.$el); // <div id="app"></div>
}
})

插值与表达式

使用双大括号(Mustache 语法)"{{}}" 是最基本的文本插值方法,它会将我们双向绑定的数据实时显示出来,例如:

<div id="app">
<h1>{{ name }}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
}
})
</script>

大括号里的内容会被替换为 Vue.js, 通过任何方式修改数据 name,大括号里的内容都会被实时替换,比如下面的示例,实时显示当前的时间,每秒更新:

<div id="app">
<p>时间:{{ date }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function () {
this.timer = setInterval(() => {
this.date = new Date();
}, 1000)
},
beforeDestory: function () {
if(this.timer) {
clearInterval(this.timer);
}
}
})
</script>

这里的 {{ date }} 输出的是浏览器默认的时间格式,比如 2017-01-02T14:04:49.470Z,并非格式化的时间(2017-01-02 22:04:49),所以需要注意时区,有多种方法可以对时间格式化,比如赋值时先使用自定义的函数处理。Vue 的过滤器(filter)或计算属性(computed)也可以实现。

如果有的时候想输出 HTML,而不是将数据解释后的纯文本,可以使用 v-html:

<div id="app">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个链接</a>'
}
})
</script>

如果想显示 {{}} 标签,使用 v-pre 即可跳过这个元素和它的子元素的编译过程,例如:

<span v-pre>{{ 这里的内容不会被编译 }}</span>

在 {{}} 中,除了简单的绑定属性值外,还可以使用 JavaScript 表达式进行简单的运算、三元运算等,例如:

<div id="app">
{{ number /10 }}
{{ isOK ? '确定' : '取消' }}
{{ text.split(',').reverse().join(',') }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 100,
isOK: false,
text: '123, 456'
}
})
</script>

Vue.js 只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用 Vue 白名单内的全局变量,例如 Math 和 Date。以下是一些无效的示例:

<!-- 这是语句,不是表达式-->
{{ var book = 'Vue.js'}}
<!-- 不能使用流控制,要使用三元运算 -->
{{ if(ok) return msg}}

过滤器

Vue.js 支持在 {{}} 插值的尾部添加管道符"(|)"对数据进行过滤,经常用于格式化文本,比如字母全部大写,货币千位使用逗号分隔。过滤的规则是自定义的,通过给 Vue 实例添加选项 filters 来设置,例如在上一节中实时显示当前时间的案例,可以对时间进行格式化处理。

<div id="app">
<p>时间:{{ date | formatDate }}</p>
</div>
<script>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
methods: {
},
filters: {
formatDate: function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hour = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var second = padDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + hour + '-' + minutes + '-' + second;
}
},
mounted: function () {
this.timer = setInterval(() => {
this.date = new Date();
}, 1000)
},
beforeDestory: function () {
if(this.timer) {
clearInterval(this.timer); //在 Vue 实例销毁前,清除我们的定时器
}
}
})
</script>

过滤器也可以串联,而且可以接收数据,例如:

<!-- 串联 -->
{{ message | filterA | filterB }} <!-- 接收参数 -->
{{ message | filterA('arg1', 'arg2') }}

这里的字符串 arg1 和 arg2 将分别传给过滤器的第二个和第三个参数,因为第一个参数是数据本身。

过滤器应当用于简单的文本转换,如果要实现复杂的数据变换,应当使用计算属性。

指令与事件

指令是 Vue.js 模板中最常用的功能,它带有前缀 v-,指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到 DOM 上。

Vue.js 内置了很多指令,现在只需了解 v-bind 和 v-on 指令。

v-bind

v-bind 的基本用途是动态更新 HTML 的属性, 比如 id,class,例如:

<div id="app">
<a v-bind:href="url">百度一下</a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
}
})
</script>

此时示例中的链接地址与 url 进行了绑定,当通过某种方法改变 url 时,链接就会更新。

v-on

v-on 用来绑定事件监听器,这样就可以做一些交互了,例如:

<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="change">点我切换</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function () {
this.show = !this.show
}
}
})
</script>

在 button 按钮上,使用 v-on:click 给该元素绑定一个点击事件,在普通的元素上,v-on 可以监听原生的 DOM 事件,除了 click 外,还有 dbclick,keyup,mousemove 等。表达式可以是一个方法名,这些方法都写在 Vue 实例的 methods 属性内,并且都是函数的形式,函数内的 this 指向当前 Vue 实例本身,因此你可以使用 this.xxx 的形式访问或修改数据。

表达式除了方法名,也可以直接是一个内联语句,上例可改为:

<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="show = !show">点我切换</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>

语法糖

语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。

Vue.js 的 v-bind 和 v-on 指令,都提供了语法糖,也可以说是缩写。

v-bind 可以直接写成一个 “:” :

<a v-bind:href="url">百度一下</a>
<!-- 缩写为 -->
<a :href="url">百度一下</a>

v-on 可以直接用 “@” 来缩写:

<button v-on:click="change">点我切换</button>
<!-- 缩写为 -->
<button @:click="change">点我切换</button>

使用语法糖可以简化代码的书写。

Vue(一) 数据绑定和第一个Vue应用的更多相关文章

  1. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  2. (译文)开始学习Vue——构建你的第一个Vue应用

    我们要构建如下组件:(最终代码在这里:https://codesandbox.io/s/38k1y8x375) 开始 Vue是支持单文件组件的,但是我们不准备这么做.你也可以构建一个全局的组件,通过V ...

  3. Windows10安装node.js,vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  4. 2.第一个Vue程序

    1.IDEA中安装Vue.js插件 2.建立项目以及html文件 1.创建一个 HTML 文件 2.引入 Vue.js <script src="https://cdn.jsdeliv ...

  5. 一、vue:如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

  6. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  7. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  8. Vue最全指令大集合————VUE

    # Vue指令大集合(无slot) #### 包含内容: 1. v-cloak2. v-html3. v-text4. v-bind5. v-show6. v-model7. v-for8. v-if ...

  9. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

随机推荐

  1. CentOS6.5下搭建Samba服务实现与Windows系统之间共享文件资源

    FTP文件传输服务确实可以让主机之间的文件传输变得简单方便,但是FTP协议的本质是传输文件,而非共享文件,因此要想通过客户端直接在服务器上修改文件内容还是一件比较麻烦的事情. 1987年,微软公司和英 ...

  2. oracle中sql优化

    问题描述:刚开始做项目的时候没啥感觉,只用能出来结果,sql随便写,但是后来用户的数据量达到几万条是,在访问系统,发现很多功能加载都很慢,有的页面一个简单的关联 查询居然要花费30多秒,实在是不能忍, ...

  3. Java SE 枚举的基本用法

    出于对自己基础的稳打,期末考试后依旧对SE部分进行复习 枚举的基本用法 public enum Season { SPRING,SUMMER,AUTUMN,WINTER } public class ...

  4. C++.构造函数(超出范围)_01

    环境:Win7x64.Qt5.3.2 MSVC2010 OpenGL.vs2010 1.ZC:在 构造函数 中,基类访问子类的成员 会报内存错误,如果访问的是 基本类型的话(如int) 可能还不会出错 ...

  5. linux c/c++ 文件是否存在

    linux c/c++ 文件是否存在 #include <unistd.h> int FileExist(const char* fname) { return access(fname, ...

  6. TypeError: atlas.getSpriteFrame is not a function

    1.资源结构如下: 2.在使用cc.loader.loadRes动态异步加载cc.SpriteAtlas资源时出现这个错误,代码如下: var self = this; var url = " ...

  7. Lua和C++交互 学习记录之三:全局值交互

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...

  8. js中use或者using方法

    看Vue.use方法,想起了以前工作中别人用过的use方法. var YANMethod = { using:function() { var a = arguments, o = this, i = ...

  9. 第 2 章 容器架构 - 008 - Docker 组件如何协作?

    容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本地没有 httpd 镜像. daemon 从 Docker Hub 下载镜像. 下载完成, ...

  10. Getting Started with Processing 第五章的easing问题(2)

    程序代码清单如下: float x; float y; float px; float py; float easing = 0.05; void setup(){ size(480,120); st ...