Vue
2023-04-12 12:41:48 7 举报AI智能生成
111
作者其他创作
大纲/内容
MVVM
Model:Vue在设计上使用的MVVM (Model-View-ViewModel)模式Model:负责数据存储
View:负责页面展示
ViewModel:负责业务逻辑处理（比如Ajax请求等)，对数据进行加工后交给视图展示
特性
低耦合
视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化时Model可以不变，当Model变化时View也可以不变
可重用性
可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码
独立开发
开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人
示例
v-指令
v-if
条件为真，显示内容
v-else
条件为假，显示内容，紧接在v-if后面
v-show="isShow"
等同于v-if + v-else
if 和 show 区别
v-on
语法
demo
注解写法@click=""
阻止元素默认事件
1)<a href="javascript:void(0)"
2)@click.prevent
阻止冒泡事件alert
@click.stop
可以连用@click.prevent.stop
阻止子元素冒泡
@click.self
事件捕获
@click.capture
v-model
基本用法
v-model指令能轻松实现表单输入和应用状态之间的双向绑定 ---
text、textarea
绑定 value property 并侦听 input 事件
注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：
checkbox、radio
绑定 checked property 并侦听 change 事件
select
绑定 value property 并侦听 change 事件
单个选择器
多个选择器
值绑定
radio checkbox
v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：
checkbox---
将该值绑定到当前组件实例上的动态数据
使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型
将该值绑定到当前组件实例上的动态数据
使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型
radio
pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second
pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second
select
selected 会被设为该对象字面量值 { number: 123 }
修饰符
lazy
v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)
添加 lazy 修饰符来改为在每次 change 事件后更新数据：
添加 lazy 修饰符来改为在每次 change 事件后更新数据：
number
用户输入自动转换为数字
如果该值无法被 parseFloat() 处理，那么将返回原始值。
输入框type="number"时候，自动启用
如果该值无法被 parseFloat() 处理，那么将返回原始值。
输入框type="number"时候，自动启用
.trim
自动去除用户输入内容中两端的空格
v-bind:value="msg"
v-for
v-for指令可以遍历data中的数据，并在页面进行数据展示
demo
过滤器
demo
Axios
简介
引入
通过NPM安装node.js
npm install axios
通过CDN方式引入
API用法
get
语法
post
vscode，安装live server插件
传参
1）放入data中传递
创建data对象
使用data属性
创建formData对象
2）在url中传递
pathvaribel注解参数接收
响应内容
生命周期
概念
常用函数
demo
组件
全局组件
语法
demo
1)定义模板
2）全局组件定义
3）组件的调用
局部组件
1)模板定义
2）组件定义
3)调用
父子组件
1)父组件模板
2）子组件模板
3)使用
父传子值组件
1）模板
自定义事件
demo
看element 脚手架内容
脚手架
安装node.js配置
1）下载node.js 配置环境变量
2.)node -v验证
3）配置淘宝镜像
npm config set registry https: //registry.npm.taobao.org
npm config get registry
4)配置nmp依赖仓库位置(地址自定义)
npm config set cache "D: \nodereps\npm-cache"
npm config set prefix "D:\nodereps\npm_global“
5）验证
npm config ls
安装脚手架
卸载x3版本 npm install -g @vue/cli
卸载x2版本 npm install -g @vue-cli
卸载x2版本 npm install -g @vue-cli
创建一个项目
vue init webpack 项目名称
选项
目录结构
0 条评论
下一页
