VUE学习(一)-介绍及安装vue开发者调试工具(devtools)
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
更多推荐
所有评论(0)