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模式

Vue.js使用实例_第1张图片
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(虚拟DOM) 的长处, 并拥有自己独特的功能,如:计算属性
开源,社区活跃度高
……


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

你可能感兴趣的:(Vue,vue,javascript,js)