本节目标
初步了解vue
- vue定义
- 开发方式
- 体验核心包开发
- 插值表达式
- 响应式特征
- 开发者工具
vue定义
vue2官网: Vue.js
vue是用于构建用户界面的渐进式框架
???? Tips： 构建用户界面 -> 数据驱动视图
???? Tips： 渐进式 -> 学一部分就能用一部分
开发方式
vue有两种开发方式: 核心包开发 | 工程化开发
???? Tips：
核心包开发
- 作用: 适合局部模块改造
- 步骤: 基于html/css/js文件, 直接引入核心包开发, 编写的代码就是运行的文件
???? Tips：
工程化开发
- 作用: 适合整站开发
- 步骤: 基于构建工具生成的环境开发程序, 运行的文件是编译后代码
- 工具:
- webpack: 配置繁琐/基础配置雷同/各公司缺乏统一标砖
- vue cli: 基于webpack/快速搭建代码环境/生成标准化配置
体验核心包开发
- 准备容器
- 引入核心包
- 开发版本: 包含完整的警告和调试模式
- 生产版本: 体积更小
- 创建vue实例
- 指定配置项
- el指定挂载点
- data提供数据
<body>
<div id="app"> </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
// 指定挂载点
el: '#app',
// 管理数据源
data: { },
})
</script>
</body>插值表达式
作用: 利用表达式进行插值,将数据渲染到页面中
语法格式: {{ 表达式 }}
???? Tips：
- 使用的数据需要存在于data中
- 支持的表达式,而不是语句
- 表达式: 可以被求值的代码就是表达式
- 语句: 执行一个操作的代码就是语句
- 不能再标签属性中使用
<body>
<div id="app">
<h1>{{ msg }}</h1>
<h1>{{ age+1 }}</h1>
<h1>{{ friend.name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
// 指定挂载点
el: '#app',
// 管理数据源
data: {
msg: 'hello world',
age: 19,
friend: {
name: 'jepson'
}
},
})
</script>
</body>响应式特性
数据变化, 视图自动更新
???? Tips：
目标: 通过控制台修改数据, 体验数据驱动视图更新
原理: data中的数据,会被添加到实例上
- 在控制台中调试
- 访问数据: 实例.属性名
- 修改数据: 实例,属性名 = 新值
<body>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
// 指定挂载点
el: '#app',
// 管理数据源
data: {
msg: 'hello world',
},
})
</script>
</body>开发者工具
帮助我们更方便的调试代码
谷歌应用商店
- 补充: 由于网络限制, 可能无法打开
极简插件
官网: 极简插件官网_Chrome插件下载_Chrome浏览器应用商店
使用:
- 下载/解压
- 谷歌浏览器/设置/扩展程序/开发者模式
- 拖拽安装
- 设置插件详情允许访问文件
- 重启浏览器