您的位置：首页 > 产品设计 > UI/UE

快速入门Vue.js

2017-04-16 09:21 375 查看

近几年，互联网前端行业发展得依旧迅猛，

涌现出了很多优秀的框架，

同事这些框架也正在逐渐改变我们的前端开发方式，

Google 的 AngularJS 、Facebook 的 ReactJS，

这些前端 MVC（MVVM）框架的出现

和组件化开发的普及和规范化，

既改变了原有的开发思维和方式，

也是的前端开发者加快脚步，

更新自己的知识结构。

2014年2月，

原 Google 员工尤雨溪公开发布了自己的前端库——Vue.js，

时至今日Vue.js 在 Github 上已经收货超过30000Star，

而且也有越来越多的开发者在实际的生产环境中运用它。

Vue是什么？

构建用户界面的渐进式框架

只关注视图层（view）

需要用到什么就用什么。

vue中的两个核心点

响应式数据绑定

当数据发生改变>自动更新视图

利用 Object.definedProperty 中的setter/getter代理数据，

监控对数据的操作。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>vue快速入门案例</title>
   <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
   {{message}}
</div>
<script>
   //数据
   let data = {
       message:"Hello Vue"
   };

   //Vm实例
   var vm = new Vue({
       el:"#demo",//挂载元素
       data:data
   });
</script>
</body>
</html>

这里就是把我们的数据呈现到页面中，

代码实现效果如下：

之前我们说vue.js是响应式数据绑定，

        因为我们之前实现了变量"vm"实例，

        我们可以我们把数据修改一下，

        页面也会随之改变！

注意：引用vue的时候，它不兼容IE8

组合的视图组件：

UI页面映射为组件树

划分组件可维护、可重用、可测试

虚拟DOM

虚拟DOM(virtual DOM)

        运行js的速度很快的，

        大量操作DOM就会很慢。

        时常在更新数据后会重新渲染页面，

        这样造成在没有改变数据的地方

        也重新渲染了DOM节点，

        这样造成了很大程度上的资源浪费。

        这里是一张示意图：

利用在内存中生成与真实DOM与之的数据结构，

        这个在内存中生的结构称之为虚拟DOM。

        当数据发生变化时，能够只能计算出重新渲染组件的

        最小代价并应用到DOM操作上。

MVVM模式

      M:Model 数据模型

  V：view 视图模板

  VM：view-Model 视图模型

接下来给大家写一个双向数据绑定的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>双向数据绑定</title>
   <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
   <input type="text" v-model="message">
   <p>{{message}}</p>
</div>
<script>
   //数据
   let data = {
       message:"Hello,Vue"
   };

   //实例
   var vm = new Vue({
       el:"#demo",//挂载元素
       data:data
   });

</script>
</body>
</html>

效果实现如下：

接下来我们修改下输入框内的内容。

页面内容也随之改变，这就叫双向数据绑定。

vue的实例

vue实例

每一个应用都是通过vue这个结构函数

创建根实例（root instance）启动

new vue （选项对象）

需要传入选项对象，对象包含挂载元素，

数据，模版，方法等。

    el:挂载元素选择器 String | HtmlElement

    data: 代理数据          Object | Function

    methods:定义方法 Object

如果你想了解全部属性可以看它的API

vue代理data数据

        每个Vue实例都会代理其打他对象所有的属性，

      这些被代理的属性是响应的，

        新添加的属性不具备响应功能，

        改变后不会更新视图

vue实例自身属性性和方法

        暴露自身的属性和方法，已$开头，例如：$el $data ......

接下来我给大家写个vue实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>VUE的实例</title>
   <script src="../vue.js"></script>
</head>
<body>
   <!-- HTML模版 -->
   <div id="demo">
       <span v-on:click="clickHandle">{{message}}</span>
   </div>
   <script>
       //数据
       let obj = {
           message:"hello Vue"
       };
       //声明式渲染
       var vm = new Vue({
           el:"#demo",
           data:obj,
           methods:{
               clickHandle(){
                       alert("click")
                       }
           }
       });
       console.log(vm.$data)
   </script>
</body>
</html>

实现效果如下：

声明式渲染

声明式

        只需要声明在哪里就做什么，不需要关心如何实现。

命令式

        需要以具体的代码表达在哪里做什么，如何实现。

        我们来个例子，求数组中每一项的倍数。

            命令式

                使用for循环拿出每一项，然后求值完成后，在放入另一个数组中

            声明式

                使用map方法，就能实现。

代码如下

</head>
<body>
   <!-- HTML模版 -->
   <div id="demo">
       <span v-on:click="clickHandle">{{message}}</span>
   </div>
   <script>

       var arr = [1,2,3,4,5];
       //求数组中每一项的倍数，放在另一个数组中
       //命令式
//        var newArr = [];
//        for(var i = 0 ; i < arr.length ; i ++){
//            arr.push(arr[i]*2)
//        }
       //声明式
       var newArr = arr.map(function(item){
           return item * 2 ;
       });
       console.log(newArr);
   </script>
</body>
</html>

声明式效果实现如下：

推荐阅读

webpack入门篇

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端开发 mvvm vue 框架

相关文章推荐

新的分享

章节导航