精华内容
下载资源
问答
  • 前端开发调试插件,Vue调试插件,Vue.js devtools Chrome插件下载,直接加压按步骤添加即可使用
  • 本文主要记录,vue开发者工具 vue-devtools的下载安装配置。 截止目前最新版本为5.3.x (githup) vue-devtools github 地址 由于谷歌官方下载需要翻墙,所以我们选择不去官网去下载,而是直接加载本地扩展程序 ...

    START

    • 本文主要记录,vue开发者工具 vue-devtools的下载安装配置。
    • 截止目前最新版本为5.3.x (githup)
    • vue-devtools github 地址
    • 由于谷歌官方下载需要翻墙,所以我们选择不去官网去下载,而是直接加载本地扩展程序

    配置

    • 下载:

      链接:https://pan.baidu.com/s/1557qbs6kdvzhXpgGRfJnpA 
      提取码:xdyk 
      
    • 打开谷歌浏览器 (输入)

      chrome://extensions/
      
    • 将下载好的文件直接拖到浏览器中即可。

    END

    • 就这样啦。
    展开全文
  • https://chrome.zzzmh.cn/info?token=ljjemllljcmogpfapbkkighbhhppjdbg 下载好拖入里面即可
    https://chrome.zzzmh.cn/info?token=ljjemllljcmogpfapbkkighbhhppjdbg

    下载好拖入里面即可

     

    展开全文
  • 2.使用vue3开发者工具安装 如果当前项目是vue2 谷歌浏览器->右上角三个点->更多工具->扩展程序->这是vue2的开发者工具 如果当前项目是vue3 谷歌浏览器->右上角三个点->更多工具->扩展程序->...

    **

    1.vue3组件中的模板结构‘可以’没有根标签(按照vue2.o那么些也没有毛病能运行);

    **
    在这里插入图片描述
    **

    2.安装vue3和vue2开发者工具(3.o那个文件有点不好用,我再找找更新)

    **
    如果当前项目是vue2
    谷歌浏览器->右上角三个点->更多工具->扩展程序->这是vue2的开发者工具
    在这里插入图片描述

    如果当前项目是vue3
    谷歌浏览器->右上角三个点->更多工具->扩展程序->这是vue3的开发者工具

    在这里插入图片描述

    vue2和vue3开发者工具下载地址

    **

    注意:后来发现vue3的文件打不开,所以出现了一个解决办法,就是重定向 vue3使用的开发者工具

    **
    1.前提,安装vue2的文件;
    2.在main.js文件中加入一段代码;重启即可;亲自试好用;
    3.下载地址

     * @Description:
     * @Author: zdx
     * @Date: 2021-12-20 11:59:08
     * @LastEditors: zdx
     * @LastEditTime: 2021-12-21 09:05:27
     */
    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#app')
    
    if('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window){
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = App
    }
    
    

    **

    3.vue3中的setup用法

    **

    <template>
      <h1>hello - {{`${name} - ${age}`}}</h1>
      <button @click="sayHello">触发sayHello方法</button>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      setup() {
        let name = 'zhangsan'
        let age = 20
        /**
         * sayHello
         * 
         **/
        function sayHello() {
          console.log(`hello ${name}`)
        }
    
        return{name,age,sayHello}
      }
    }
    </script>
    

    **

    在这里插入图片描述

    4.vue3中的ref响应式变量的使用方法

    **

    <template>
      <h1>hello - {{`${name} - ${age} - ${work.name}`}}</h1>
      <button @click="changeName">触发changeName方法</button>
      <button @click="changeWork">触发changeWork方法</button>
    </template>
    
    <script>
    import { ref } from 'vue'
    export default {
      name: 'App',
      setup() {
        let name = ref('里斯')
        let work = ref({name:'前端工程师'})
        function changeName() {
          console.log(name.value = '王五')
          console.log(`hello ${name}`)
        }
        function changeWork() {
          work.value.name ='PHP后端开发工程师'
        }
        return{name,age,work,changeName}
      }
    }
    </script>
    

    总结:
    想用ref必须要引用 : import { ref } from ‘vue’
    如果let name = ref(‘张三’) 是字符串类型的 修改name时要:name.value = ‘王五’
    如果**let work = ref({name:‘前端工程师’})**是对象类型,修改work对象里的值时要:work.value.name =‘PHP后端开发工程师’

    与ref相对应的还有个reactive
    想用reactive必须要引用 : import { reactive } from ‘vue’
    如果**let work = reactive({name:‘前端工程师’})**是对象类型,修改work对象里的值时要:work.name =‘PHP后端开发工程师’

    5. ref和reactive的区别

    1.

    **

    6.shallowReactive的理解及使用方法

    **
    理解:shallow是浅层次的,shallowReactive意思就是监听第一层深层不会被监听到;

    let person = reactive({
    	name:'张三',
    	age:13,
    	job:{f1:{salary:30}}
    })
    //reactive监听到salary
    
    
    let person = shallowReactive({
    	name:'张三',
    	age:13,
    	job:{f1:{salary:30}}
    })
    //shallowreactive监听到job
    
    

    **

    7.shallowreactive和shallowRef的区别

    **
    在这里插入图片描述

    个人理解:shallowReactive,监听对象中的第一层,不需要深度监听,reactive深度监听,可以监听到最里层数据;
    ref 一般是用基本数据类型(字符串和数字等),如果你犟就想要用ref搞对象搞数组,也行他会默认转化成reactive下;
    shallowRef 只处理基础的 对象的它不监听了;

    **

    8.readonly和shallowReadonly区别

    readonly:只读,所有的都是只读不可修改;
    shallowReadonly:只有第一层只读,深入层可以修改;

    **

    let person = shallowRef({
                name: "张三",
                age: 13,
                job: { f1: { salary: 30 } },
            });
            readonly(person);
            shallowReadonly(person);
    

    **

    9.toRaw和markRaw

    **
    **加粗样式
    **

        name: "Demo",
        setup() {
            let person = reactive({
                name: "张三",
                age: 13,
                job: { f1: { salary: 30 } },
            });
            // toRaw(person);
            function addCar() {
                let car = { name: "奔驰", price: 34 };
                person.car = markRaw(car);
            }
            return {
                person,
                addCar,
            };
        },
    

    总结 :

    自己理解toRaw就是获取最原始的数据;
    markRaw就是去掉响应式功能;

    展开全文
  • 教你如何安装Vue3.0的开发者工具,在线安装、离线安装(内含扩展包)
    展开全文
  • vue安装开发者工具

    2021-11-09 13:41:50
    vue3安装开发者工具
  • vue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载

    万次阅读 多人点赞 2018-06-03 09:42:48
    版本5.1.1 链接:https://pan.baidu.com/s/1JKGHnpGSY8ivPUOxBBgnRw  提取码:7uv2  2019年4月18日 版本5.1.0 ...谷歌浏览器中扩展程序,开启开发者模式,将下载的文件拖到窗口中即可
  • VUE学习(一)-介绍及安装vue开发者调试工具(devtools) 1 介绍 1.1 什么是VUE (1)渐进式 JavaScript 框架 (2)作用: 动态构建用户界面(将后台数据,在前台动态显示) 1.2 Vue 的特点 (1)遵循 MVVM ...
  • 一、下载vue-devtools插件,解压。 二、去到解压的文件夹目录,eg:D:\vue-devtools-dev,执行命令: npm install 有些公司通虚拟机区分内外网办公,内外网络有限制。如果在下载依赖包的过程中,下载cypress出错...
  • 开门见山,Chrome 安装好的扩展也可以在 Electron 应用中使用,只需要 ...以 Vue.js devtools为例: 在 Chrome中安装 输入chrome://extensions,找到插件的ID,它是一串类似fmkadmapgofadopljbjfkapdkoienihi...
  • 安装vue开发者调试工具vue-devtools的方法有几种: 方法一:通过谷歌浏览器的插件商店直接安装,该方法: 安装地址: ...
  • vue浏览器调试工具

    2018-07-03 11:59:28
    一款非常好用的vue浏览器调试工具 开发vue使用的插件 浏览器调试工具
  • 1.vue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载及安装
  • 在学习Vue上的必经之路,开发者工具的使用,然后半路却被这个问题阻拦了 Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the...
  • 一、下载插件包 :下载地址 二、选择“下载插件手动安装”下载插件包 三、打开Google浏览器 扩展程序 ...六、使用Google浏览器打开开发者工具,也可以用快捷键F12,看到vue调试,即vue调试工具安装成功了 ...
  • google应用商店下载的Vue.js Devtools在控制台没有vue选项第一种:图标不亮第二种:图标亮,但是在下面的控制台选项中没有vue 第一种:图标不亮 首先,如果最上面那个vue图标如果没有亮,说明当前页面不是vue写的,找...
  • 方法一:如果要去github官网可以去clone然后编译为dist文件,找到chrome文件,很耗时 方法二:关注公众号“程序江”,回复vue工具,获得安装包
  • vue-开发工具的安装

    2017-11-23 18:55:00
    1. github官网下载vue工具:https://github.com/vuejs/vue-devtools。并解压 2. 在有package.json的文件夹下,按住shift右键,选择“在此处打开CLI” 执行 cnpm i (没装镜像用 npm i) 3.node_modules安装...
  • 1.安装node.js,如果安装成功输入 node -v ,查看node版本号,输入npm -v查看npm版本 https://nodejs.org/en/ 2.注册淘宝镜像,定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm ... 3.安装vue的脚手架v...
  • 在Chrome web store里安装Chrome开发者工具Vue扩展: 安装完毕之后,在Chrome的工具栏里会出现一个象征Vue的小图标: Chrome开发者工具里会出现一个新的Vue tab,里面提供了方便的针对Vue应用的查看选项。 要...
  • 解压后,直接使用即可!
  • Vue 2019开发者图谱

    2020-12-20 13:26:17
    作为 Vue 的初学者,您或许已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等,您可能还听过和Vue经常一起被提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。面对这些海量、未知的...
  • vue-devtools离线版安装

    2020-06-16 14:17:58
    vue.js的附属工具vue-devtools的本地版本的插件,直接拖动安装即可使用,版本为5.3.3,同时附带有其他版本工具
  • vue-devtools是用于调试 Vue.js 应用程序的浏览器开发工具扩展。 网上很多教程,都是下载源码,然后使用 npm,比较繁琐,下面教大家一种简单安装方法 安装 ① 在GitHub上下载浏览器扩展包 下载连接为:...
  • vue.js可视化开发工具_Vue.js开发工具

    千次阅读 2020-08-25 03:21:58
    vue.js可视化开发工具Install on Chrome 在Chrome上安装 Install on Firefox 在Firefox上安装 Install the standalone app 安装独立应用 How to use the Developer Tools 如何使用开发人员工具 Filter components...
  • 已经配置好的vue 插件在浏览器扩展程序直接可以使用。mac版的chrome
  • 如何在谷歌中安装VUEX调试工具谷歌浏览器中安装 vue调试工具 vue-devtools) 本次介绍了两种方法,第一种方法略微复杂,想追求效率的请查看第二种. 如果你在使用vue开发项目 浏览器中没有安装vue调试工具 显然不...
  • vue调试工具vue-devtools安装 谷歌vue-devtools插件,帮助你vue开发快速调试。 安装 chrome 浏览器,下面是下载链接 ,如果安装过跳过这一步。链接: Google Chrome浏览器. 下载插件并保留,下面是下载链接 。链接: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,755
精华内容 3,102
关键字:

vue谷歌开发者工具

vue 订阅