Vue2快速上手

本节目标

初步了解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>