vue.js安装

时间 2020-01-14

原文原文链接

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

vue中两个核心点：node

响应的数据绑定：
webpack

当数据发生改变->自动更新界面
git

利用Object.definedProperty中的setter/getter代理数据，监控数据的操做github

组合的视图组件：web

ui页面映射为组件树
vue-cli

划分组件可维护，可重用，可测试
npm

虚拟DOM：浏览器

1.运行js的速度是很快的，但大量的操做DOM就会很慢。市场在更新数据后从新渲染页面，这样照成在没有改变数据的地方也从新渲染DOM节点，形成很大程度上的资源浪费。

2.利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构均称之为虚拟DOM。

3.当数据发生改变是，可以智能计算出从新渲染组件的最小代价并应用到DOM操做上。

MVVM模式：

M：Model数据结构

V：View视图模板

vm：view-Model视图模型

1)安装

直接安装vue，从官方下载vue.js。开发使用开发版本，项目上线切换生成版本

引入vue.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
    </head>
    <!-- 模板 -->
    <div id="demo">
        {{ message }}
    </div>
    <script>
        // 数据
        let data = {
            message:"Hellow,Vue!"
        }
        // Vm实例
        var vm = new Vue({
            el:"#demo", // 挂载元素:html的挂载点
            data:data
        });
    </script>
    <body>
    </body>
</html>

本地测试：

nmp方式安装vue:

全局安装 vue-cli：

# npm install --global vue-cli

安装好之后进入nodejs的模块目录下把vue全名添加到全局：

找到vue执行文件所在位置：

添加全局（路径根据实际状况）：

建立一个基于 webpack 模板的新项目：

# vue init webpack my-project

安装依赖，走你（安装速度至关慢，能够尝试换成阿里的cnpm提速）：

# cd my-project
# npm install
# npm run dev

vue响应式数据绑定，数据发生改变，界面发生改变：

相似响应式布局，浏览器尺寸大小发生改变，界面发生改变。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
    </head>
    <!-- 模板 -->
    <div id="demo">
        <input type="text" v-model="message" />
        <p>`message`</p>
    </div>
    <script>
        // 数据
        let data = {
            message:"Hellow,Vue!"
        }
        // Vm实例
        var vm = new Vue({
            el:"#demo", // 挂载元素:html的挂载点
            data:data
        });
    </script>
    <body>
    </body>
</html>

指令会经过输入框的特色，会把vm中的值放进value里面，同时监听value的变化，当value发送改变，vm会通知页面从新渲染：