- Vue 快速上手
- 概念：Vue 是一个用于 构建用户界面 的 渐进式 框架
构建用户界面:基于数据渲染出用户看到的页面（数据渲染成网页）
渐进式:循序渐进
Vue 的两种使用方式：
① Vue 核心包开发
场景：局部 模块改造
② Vue 核心包 & Vue 插件 工程化开发
场景：整站 开发
框架：一套完整的项目解决方案
优点：大大提升开发效率 (70%↑)
缺点：需要理解记忆规则 → 官网
- 创建Vue实例，初始化渲染
核心步骤 4步：
- 准备容器
- 引包 (官网) - 开发版本 vue.js / 生产版本vue.min.js(注意：只有开发版本才支持调试)
- 创建 Vue 实例 new Vue()
- 指定配置项 → 渲染数据
① el 指定挂载点
② data 提供数据
<body>
<div>非托管区域：{{msg}}</div>
<div id="app">
{{msg}}
</div>
<!-- 开发本本：包含完整的警告个调试模式，学习阶段统一使用开发版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 一旦引入了vue的包，全局就会有一个vue构造函数
// 3.创建实例
// 4. 添加配置项 => 完成渲染
const app=new Vue({
// 指定vue管理的区域
el:'#app',
// 数据
data:{
msg:'你好世界'
}
})
</script>
</body>
- 插值表达式
哪些可以写到插值表达式里。能够求值的，有结果的
插值表达式是一种 Vue 的模板语法
作用: 利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果（即：只要有结果的都是表达式）
语法：{{ 表达式 }}
注意点：
- 使用的数据必须存在 （data）
- 支持的是表达式，而非语句，比如：if for ..
- 不能在标签属性中使用 {{ }} 插值
- 响应式特性
数据的响应式处理 → 响应式：数据变化，视图自动更新
使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可
好处：程序员以后不用在操心视图如何渲染了，把精力全部放在操作数据上面门吱呀数据变化，视图就会自动更新
访问或修改数据
① 访问数据： "实例.属性名"
② 修改数据： "实例.属性名" = "值"
- 开发者工具——把vue安装在浏览器上的步骤
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
