vue脚手架基础API全面讲解【内附多个案例】

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

2.8_@vue/cli 欢迎界面清理

目标: 我们开始写我们自己的代码, 无需欢迎页面

• src/App.vue默认有很多内容, 可以全部删除留下框

• assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

3. Vue指令

---

3.0_vue基础-插值表达式

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值

语法: { { 表达式 }}

{ { msg }}

{ { obj.name }}

{ { obj.age > 18 ? '成年' : '未成年' }}

总结: dom中插值表达式赋值, vue的变量必须在data里声明

3.1_vue基础-MVVM设计模式

目的: 转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)

等下面学了v-model再观察V改变M的效果

• MVVM，一种软件架构模式，决定了写代码的思想和层次

• M： model数据模型 (data里定义)

• V： view视图 （html页面）

• VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

• V（修改视图） -> M（数据自动同步）

• M（修改数据） -> V（视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率

3.2_vue指令-v-bind

目标: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"

• 简写：:属性名="vue变量"

我是a标签

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

3.3_vue指令-v-on

目标: 给标签绑定事件

• 语法

• v-on:事件名=“要执行的少量代码”

• v-on:事件名=“methods中的函数”

• v-on:事件名=“methods中的函数(实参)”

• 简写: @事件名=“methods中的函数”

你要买商品的数量: { {count}}

增加1

增加1个

一次加5件

<button @click=“subFn”>减少

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

3.4_vue指令-v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

• 语法:

• 无传参, 通过形参直接接收

• 传参, 通过$event指代事件对象传给事件处理函数

<a @click=“one” href=“http://www.baidu.com”>阻止百度

---

<a @click=“two(10, $event)” href=“h