Vue基础超详细
目录
一、Vue的简介
1、什么是vue
2、vue 的特性（数据驱动视图、双向数据绑定）
3、MVVM及其工作原理
二、Vue的基本实用
1、基本使用步骤
2、配置Vue的调试工具
3、指令与过滤器
3.1内容渲染指令
4、属性绑定指令
5、使用Javascript表达式
6、事件绑定指令
详细用法可以搜索：click、input、keyip的区别
7、事件对象
8、事件修饰符
9、按键修饰符
10、双向数据绑定指令
11、v-model的修饰符
12、条件渲染指令
12.1 v-if配套指令
编辑
13、列表渲染指令 v-for
三、插件下载样式提示：
编辑
四、案例演示
品牌列表案例1.0（不含过滤器）
注：过滤器在Vue3.0中没有了
查看一些label的for属性
品牌列表案例2.0（含过滤器）
一、Vue的简介
1、什么是vue
2、vue 的特性（数据驱动视图、双向数据绑定）
3、MVVM及其工作原理
二、Vue的基本实用
1、基本使用步骤
Document
{{username}}
2、配置Vue的调试工具
详细安装看另外文档（Edge版本）
3、指令与过滤器
3.1内容渲染指令
Document
性别：
姓名： {{username}}
性别： {{gender}}
{{info}}
4、属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令（简写形式的是直接打冒号：）
Document
![]()
![]()
5、使用Javascript表达式
1 + 2 的结果是：{{1+2}}
{{tips}}反转的结果是：{{tips.split('').reverse().join('')}}
这是一个div
6、事件绑定指令
详细用法可以搜索：click、input、keyip的区别
v-on：click
v-on：input
v-on：keyup：@keyup是一些按键松开的操作,比如@keyup.enter表示按下回车键松开后触发@keyup.left表示鼠标左键按下松开后触发@keyup.right表示鼠标按下右键松开后触发@keyup.delete表示按下删除键松开后触发
Document
count的值是{{count}}
7、事件对象
$event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event
Document
count 的值是：{{count}}
8、事件修饰符
9、按键修饰符
清空
clearInput(e){e.target.value=''console.log("触发了clearInput方法")}10、双向数据绑定指令
v-bind是属于单向绑定
v-model属于双向绑定
看代码
Document
用户的名字是：{{username}}
{{city}}
11、v-model的修饰符
Document
+ = {{n1 + n2}} + = {{n1 + n2}}
12、条件渲染指令
12.1 v-if配套指令
13、列表渲染指令 v-for
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
将新项添加到数组末尾，请使用 push() 方法。
Document
- 姓名：{{user.name}}
三、插件下载样式提示：
vue提示
四、案例演示
品牌列表案例1.0（不含过滤器）
注：过滤器在Vue3.0中没有了
查看一些label的for属性
Document 添加品牌
# 品牌名称 状态 创建时间 操作 {{item.id}} {{item.name}} {{item.time}} 删除
品牌列表案例2.0（含过滤器）
过滤器
私有过滤器何全局过滤器
Document 添加品牌
# 品牌名称 状态 创建时间 操作 {{item.id}} {{item.name}} {{item.time | dateFormat}} 删除