MVVM模式
M: 即Model,模型,包括数据的一些基本操作
V: 即View,视图,页面渲染结果
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中,而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何相互影响的:
-
只要我们Model发生了改变,View上自然就会表现出来。
-
当用户修改了View,Mode中的数据也会跟着改变
把开发人员从繁琐的DOM操作中解放出来,把关注点放在了如何操作Model上 -
认识Vue
npm config set registry http://188.188.3.20:8001/repository/sharpnew-npm-group -
下载npm
-
安装 是npm的镜像源管理工具 nrm
npm install nrm -g -
切换到私服
nrm add local registry http://188.188.3.20:8001/repository/sharpnew-npm-group
nrm use local -
查看源
nrm ls -
切换淘宝源
nrm use taobao -
测试速度
nrm test taobao
如果不生效,最好重启生效
设置路由:
route add 192.168.50.0 mask 255.255.0 192.168.23.1 -p
删除路由:
route delete 192.168.50.0
- 建立项目
1)建立空的project
2)建立一个新的module (vue-demo),选择静态页面
3)进入vue-demo 初始化npm
npm init -y
- 再当前目录内,执行命令安装vue(–save 本地安装,当前项目可用)
npm install vue --save
- 使用vue
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//element,Vue作用的标签
data: {
name: "挺憨",
num: 1
}
})
</script>
- 使用元素{{name}} ,{{num}} , 使用的元素必须是data里面定义的元素
- 还有可以再 定义方法
const app = new Vue({
el: "#app",//element,Vue作用的标签
data: {
name: "挺憨",
num: 1
},
methods:{
handleClick(){
console.log("hello")
}
}
})