Vue(一) 数据绑定和第一个Vue应用

时间  2021-02-19 标签 html vue npm 浏览器 app 函数 学习 this url spa

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

数据绑定和第一个Vue应用

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

<!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 标签内。npm

Vue实例与数据绑定

实例与数据

经过构造函数 Vue 就能够建立一个 Vue 的根实例，并启动 Vue 应用：浏览器

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

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

首先，必不可少的一个选项就是 el 。el 用于指定一个页面已存在的 DOM 元素来挂载 Vue 实例，它能够是 HTMLElement，也能够是 CSS 选择器，好比：函数

<div id="app"><div>

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

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

经过 Vue 实例的 data 选项，能够声明应用内须要双向绑定的数据。this

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

console.log(app.a);	// 2

除了显示声明数据外，也能够指向一个已有的变量，而且他们之间默认创建了双向绑定，当修改其中一个，另外一个也会一块儿变化。url

var myDate = {
    a: 1
}

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

生命周期

每一个 Vue 实例建立时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，咱们能够利用这些钩子，在合适的时机执行咱们的业务逻辑，若是你使用过 jQuery，必定知道它的 ready() 方法，好比如下示例：spa

$(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>

使用语法糖能够简化代码的书写。

联系我们 沪ICP备13005482号-10