1-1.Vue 入门介绍

vue官方API，以下案例涉及到的示例代码：示例代码

1、渐进式框架

vue是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整。
渐进式表现：声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具

2、两个核心点

（1）响应式数据绑定
当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
（2）组合的视图组件
即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

3、虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

4、MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
M：Model（数据层，也就是指数据（前端是js））
V：View ( 也就是指DOM层或用户界面 )
VM : ViewModel (处理数据和界面的中间层，也就是指Vue)
1-1.Vue 入门介绍插图1

5、声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
额外补充：
渲染分为：命令式渲染和声明式渲染
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：只需要告诉程序想要什么效果，其他的交给程序来做
具体区别看如下代码，执行结果一样，实现方式不同。

<script type="text/javascript">
    var arr = [1, 2, 3, 4, 5];

    // 命令式渲染：关心每步，关心流程，用命令去实现
    var newArr = [];
    for(var i = 0, len = arr.length; i < len; i++) {
        newArr.push(arr[i] * 2);
    }
    console.log(newArr);

    // 声明式渲染：不关心中间流程，只需要关心结果和实现条件
    var arr1 = arr.map(function(item) {
        return item*2;
    });
    console.log(arr1);
</script>

6、安装方式

（1）CDN引入方式

对于刚接触Vue，还是推荐这个简单的方式，使用html页面引入vue学习

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）NPM安装-脚手架真实开发方式

使用NPM的方法进行安装需要先在本地安装Node环境。这也是真实开发必备的。

2-1-vue-cli安装

3年前

01700

npm install vue

7、helloworld基础案例

（1）使用html页面学习方式，案例完整代码如下：

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {{message}}
    </div>

    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // data: 是Vue对象中绑定的数据
                message:'hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

（2）页面输出结果：

hello Vue!

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END