VUE学习(一)-介绍及安装vue开发者调试工具(devtools)

1 介绍

1.1 什么是VUE

    (1)渐进式 JavaScript 框架

    (2)作用: 动态构建用户界面(将后台数据,在前台动态显示)

 1.2 Vue  的特点

    (1)遵循 MVVM 模式
    (2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
    (3)它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目VUE学习

 

1.3 Vue  扩展插件

    (1)vue-cli: vue 脚手架 
    (2) vue-resource(axios): ajax 请求
    (3)vue-router: 路由
    (4)vuex: 状态管理
    (5) vue-lazyload: 图片懒加载
    (6) vue-scroller: 页面滑动相关
    (7) mint-ui: 基于 vue 的 UI 组件库(移动端)
    (8) element-ui: 基于 vue 的 UI 组件库(PC 端)

2 基本使用

    创建一个简单的vue项目并实现一下效果:

2.1 下载Vue.js

    下载地址:https://cn.vuejs.org/v2/guide/installation.html

2.2 创建一个Html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01Vue的基本使用</title>
</head>
<body>

    <div id="app">
        <input type="text"  v-model="username"/>
        <p>您好 {{username}}!</p>
    </div>

    <!-- 1 引入Vue.js -->
    <script type="text/javascript" src="../plugins/vue.js"></script>
    <script type="text/javascript">
        // 2 创建 Vue 实例
        var vm = new Vue({  // 配置对象
            el: '#app',     // 选择器
            data: {         // 数据
                username: ''
            }
        })
    </script>
</body>
</html>

2.3 完成

 

3 安装vue开发者调试工具(devtools)

(1)下载devtools插件:

vue开发者调试工具(devtools):https://pan.baidu.com/s/1omML8dzwufmC-u32Ab4NOw 提取码:vtpt 

(2)使用谷歌打开chrome://extensions/,打开开发者模式

(3)将下载后的文件拖拽到谷歌中

如果包以下错误:

则,通过以下方式:

1. 将你下载到的后缀为 .crx 的插件文件  改名为后缀为 .zip 

2. 然后通过解压软件解压改名后的.zip的文件 到一个空文件夹 (注意 路径 或者命名 不要出现中文 )

3. 复制链接chrome://extensions/到浏览器直达扩展程序界面(如果已打开程序界面 可忽略这一步)

4. 记得打开开发者模式 然后点击 加载已解压到扩展程序  选择刚才解压好的文件夹 确定  安装完成!

完成

测试:

附件:

VUE学习(一)-介绍及安装vue开发者调试工具(devtools):https://pan.baidu.com/s/1CEdss7j0065d7qd_uWbXwA  提取码:nzrr 

GitHub 加速计划 / de / devtools
24.6 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:3 个月前 )
79116147 - 4 个月前
f0359002 - 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐