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

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

vue学习大纲7:vuejs核心和vue.js的devtools安装_第1张图片

4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭喜已经安装成功!!!
vue学习大纲7:vuejs核心和vue.js的devtools安装_第2张图片

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

  • 使用:打开vue项目,在控制台选择vue:


    vue学习大纲7:vuejs核心和vue.js的devtools安装_第3张图片

你可能感兴趣的:(vue学习大纲7:vuejs核心和vue.js的devtools安装)