Vue.js使用实例

Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。
Vue不支持IE 8及以下版本， Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。
链接: Vue官网

MVVM模式

在这里插入图片描述
Model：模型层，在这里表示JavaScript对象。
View：视图层，在这里表示DOM(HTML操作的元素)。
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者。
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者；
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
Vue.js就是一个MVVM的实现者，核心就是实现了DOM监听与数据绑定。

Vue.js优点

轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高
……

Vue使用实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue使用实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>
</body>
</html>

注意事项：
首先在使用时要导入vue,js;然后需要创建构造器：

var vm = new Vue{
...
}

1.el 参数
在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 app，在 div 元素中：

<div id = "app">
...
</div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
2.定义数据对象
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
3.定义方法
methods 用于定义的函数，可以通过 return 来返回函数值。
4.输出
{{ }} 用于输出对象属性和函数返回值。如：

 <h1>url : {{url}}</h1>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

END

MVVM模式

Vue.js优点

Vue使用实例

猜你喜欢