美文网首页
Vue 介绍

Vue 介绍

作者: 时光记忆forever | 来源:发表于2017-07-15 13:35 被阅读4397次

Vue.js 是什么

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

helloworld

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" 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>

运行结果：

运行结果

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

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

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" 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!'
        },
        beforeCreate: function () {
            console.log("vue beforeCreate......")
        },
        created: function () {
            console.log("vue created......")
        },
        beforeMount: function () {
            console.log("vue beforeMount......")
        },
        mounted: function () {
            console.log("vue mounted......")
        },
        beforeUpdate: function () {
            console.log("vue beforeUpdate......")
        },
        updated: function () {
            console.log("vue updated......")
        },
        beforeDestroy: function () {
            console.log("vue beforeDestroy......")
        },
        destroyed: function () {
            console.log("vue destroyed......")
        }
    })
</script>

</html>

运行结果：

vue beforeCreate......
vue created......
vue beforeMount......
vue mounted......

谷歌浏览器控制台输入 app.message = 11111
vue beforeUpdate......
vue updated......

app.$destroy()
vue beforeDestroy......
vue destroyed......
undefined
控制台结果 生命周期

模板语法

插值

文本

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

<div id="app">
    {{ message }}
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})
</script>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

<span v-once>This will never change: {{ message }}</span>

运行结果：

当在谷歌浏览控制台下，输入 app.message = '11111'，会发现 v-once 里面的数据并没有改变。

运行结果

属性

Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：

<div id="example-2">
    <div v-bind:id="dynamicId">v-bind</div>
</div>

<script>
    var vm2 = new Vue({
        el: '#example-2',
        data: {
            dynamicId: '123',
        }
    })
</script>

运行结果：

<div id="example-2">
<div id="123">v-bind</div>
</div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

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

运行结果：

<button>Button</button>

使用 JavaScript 表达式

<div id="example-3">
    <div>number + 1: {{ number + 1 }} </div>
    <div>ok: {{ ok ? 'YES' : 'NO' }}</div>
    <div> message reverse:  {{ message.split('').reverse().join('') }}</div>
    <div v-bind:id="'list-' + id">list</div>
</div>

<script>
    var vm3 = new Vue({
        el: '#example-3',
        data: {
            number:10,
            ok: false,
            message: "abcdefg",
            id: '111'
        }
    })
</script>

运行结果：

<div id="example-3">
<div>number + 1: 11 </div> 
<div>ok: NO</div> 
<div> message reverse:  gfedcba</div> 
<div id="list-111">list</div>
</div>

过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

<div id="example-4">
    {{ message | capitalize }}
</div>

<script>
    var vm4 = new Vue({
        el: '#example-4',
        data: {
            message: "abcdefg"
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })

</script>

运行结果： message里面的第一个字母转为大写字母。

<div id="example-4">Abcdefg</div>

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

计算属性

计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>

<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>

</body>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            }
        }
    })

</script>

</html>

运行结果：

<div id="example">
<p>Original message: "Hello"</p> 
<p>Computed reversed message: "olleH"</p>
</div>

你可以打开浏览器的控制台，自行修改例子中的 vm 。 vm.reversedMessage 的值始终取决于 vm.message 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 是没有副作用，这使得它易于测试和推理。

运行结果

计算属性 vs Methods

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

Computed 属性 vs Watched 属性

Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算 setter

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>

<body>
    <div id="example">
        <p>first name : {{this.firstName}}</p>
        <p>last name : {{this.lastName}}</p>
        <p>full name : {{this.fullName}}</p>

    </div>

</body>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            firstName: 'wang',
            lastName: 'test'
        },
        computed: {
            // a computed getter
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    })

</script>

</html>

运行结果：

现在再运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。

运行结果
扫码申请加入全栈部落

相关文章

网友评论

      本文标题：Vue 介绍

      本文链接：https://www.haomeiwen.com/subject/ftnahxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue 介绍|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！