第四章 Vue入门

MVVM模式
M： 即Model，模型，包括数据的一些基本操作
V： 即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉)

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中，而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何相互影响的:

1. 只要我们Model发生了改变，View上自然就会表现出来。

2. 当用户修改了View，Mode中的数据也会跟着改变
   把开发人员从繁琐的DOM操作中解放出来，把关注点放在了如何操作Model上

3. 认识Vue
   npm config set registry http://188.188.3.20:8001/repository/sharpnew-npm-group

4. 下载npm

5. 安装 是npm的镜像源管理工具 nrm
   npm install nrm -g

6. 切换到私服
   nrm add local registry http://188.188.3.20:8001/repository/sharpnew-npm-group
   nrm use local

7. 查看源
   nrm ls

8. 切换淘宝源
   nrm use taobao

9. 测试速度
   nrm test taobao
   如果不生效，最好重启生效

设置路由：
route add 192.168.50.0 mask 255.255.0 192.168.23.1 -p
删除路由：
route delete 192.168.50.0

2. 建立项目
   1）建立空的project
   2）建立一个新的module (vue-demo)，选择静态页面
   

3）进入vue-demo 初始化npm

npm init -y

4. 再当前目录内，执行命令安装vue(–save 本地安装，当前项目可用)

npm install vue --save 

5. 使用vue

<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",//element,Vue作用的标签
    data: {
        name: "挺憨",
        num: 1
    }
})
</script>

6. 使用元素{{name}} ，{{num}} , 使用的元素必须是data里面定义的元素
7. 还有可以再 定义方法

const app = new Vue({
    el: "#app",//element,Vue作用的标签
    data: {
        name: "挺憨",
        num: 1
    },
    methods:{
        handleClick(){
            console.log("hello")
        }
    }
})