Vue快速上手#
Vue 是一个用于 构建用户界面 （基于数据渲染出用户看到的页面） 的 渐进式 （循序渐进） 框架
渐进式：Vue.js核心包（声明时渲染--组件系统）--Vue插件（客户端路由VueRouter--大规模状态管理Vuex）--工程化开发（构建工具Webpack/Vite）
框架：一套完整的项目解决方案
Vue的两种使用方式：
-
Vue核心包开发
场景：局部模块改造
-
Vue核心包&Vue插件 工程化开发
场景：整站开发
使用Vue开发的优点：大大提升开发效率（70%+）
缺点：需要理解记忆规则-- 官网
创建Vue实例，初始化渲染#
构建用户界面
创建Vue实例，初始化渲染
核心步骤4步：
- 准备容器
- 引包（官网）- 开发版本 /生产版本
- 创建Vue实例：new Vue()
-
指定配置项--渲染数据
- el指定挂载点
- data提供数据
{{ msg }}#
{{ count }}<div id="app">
<h4>{{ msg }}</h4>
<a href="javascript:;">{{ count }}</a>
</div>
<script src="../js/vue.js"></script><script>
// 一旦引入Vuejs核心包，在全局环境就有了Vue构造函数
const app = new Vue({
// 通过el配置选择器，指定Vue管理的盒子
el: '#app',
// 通过data提供数据
data: {
msg: 'Hello Vue',
count: 666,
},
});
</script>插值表达式{{ }}#
插值表达式是一种Vue的模板语法
-
作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，js引擎会将其计算出一个结果
-
语法：
{{ 表达式 }} -
注意
- 使用的数据（data）必须存在
- 支持的是表达式，而非语句，比如：if、for是不能使用的
-
不能在标签属性中使用
{{ }}插值<!-- 以下写法不被允许 --> <p title="{{ username }}">xxxxx</p>
{{ nickname }}
{{ nickname.toUpperCase() }}
{{ nickname+'泥嚎吗？' }}
{{ age>=18?'成年':'未成年' }}
{{ friends[1].name }}:{{ friends[1].desc }}
<div id="userinfo">
<p>{{ nickname }}</p>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ nickname+'泥嚎吗？' }}</p>
<p>{{ age>=18?'成年':'未成年' }}</p>
<p>{{ friends[1].name }}:{{ friends[1].desc }}</p>
</div>const userinfo = new Vue({
el: '#userinfo',
data: {
nickname: 'andy',
age: 18,
friends: [
{ name: 'tony', desc: '热爱学习' },
{ name: 'max', desc: 'Home-made cupcakes' },
],
},
});Vue核心特性：响应式#
响应式数据：数据改变了，视图自动更新
对于实例的data中的数据：
- 访问数据：实例.属性名
- 修改数据：实例.属性名=值
聚焦于数据--数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
开发者工具#
安装Vue开发者工具：装插件调试Vue应用
- 通过谷歌应用商店安装（国外网站）
- 极简插件 https://chrome.zzzmh.cn/index ：下载--开发者模式--拖拽安装--插件详情允许访问文件
Edge用户直接在扩展中下载即可
用极简插件下载 Vue Devtools
下载解压后的crx文件拖入扩展程序中即可添加
添加完成后需要在插件详情中勾选'允许访问文件网址'，chrome需要重启一次
打开Vue运行的页面，即可发现在调试工具中多出一个Vue选项
用这个插件就要比在控制台调试方便一些
