美文网首页张蕾的技术博客Web前端之路让前端飞
vue学习大纲7:vuejs核心和vue.js的devtools

vue学习大纲7:vuejs核心和vue.js的devtools

作者: cd72c1240b33 | 来源:发表于2017-06-22 09:31 被阅读239次

vuejs核心:

  • 数据驱动
  • 组件化

数据驱动

  • DOM是数据的一种自然映射
    即:数据驱动dom变化,dom是数据的一种自然映射
  • 他也会对操作做一些监听,当我们修改视图的时候,vuejs监听了这些变化,才会改变数据;
  • 以上就形成了数据的双向绑定;

组件化

  • 目的:扩展html元素,封装可重用的代码
  • 组件设计原则:
    1、页面上每个独立的可视/可交互区域视为一个组件
    2、每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护;
    3、 页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面

vue.js的devtools安装

安装
1.github下载地址:https://github.com/vuejs/vue-devtools
2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.
3.修改manifest.json 中的persistent为true


4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭喜已经安装成功!!!

5.打开自己的vue项目中,如果是有vue-cli构建的项目,执行npm run dev,打开http://localhost:8080/ 服务器调试地址;至此完成devtools的安装;
  • 使用:打开vue项目,在控制台选择vue:


相关文章

网友评论

  • a40b6545a91d:谷歌不是可以直接搜吗?插件就好了吧?有没有区别?
    cd72c1240b33:@thumbchan 嗯,你搜搜只要能按上,控制台能有vue调试就OK,不行了就按我写的来,这个没问题👌
    a40b6545a91d: @thumbchan 和谐上网是可以的
    cd72c1240b33:@thumbchan 现在的谷歌商城很多人都打不开

本文标题:vue学习大纲7:vuejs核心和vue.js的devtools

本文链接:https://www.haomeiwen.com/subject/mypxcxtx.html