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