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指令能轻松实现表单输入和应用状态之间的双向绑定 ---<br>
text、textarea
绑定 value property 并侦听 input 事件
注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：
checkbox、radio
绑定 checked property 并侦听 change 事件
select
绑定 value property 并侦听 change 事件
单个选择器
多个选择器
值绑定
radio checkbox
v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：<br>
checkbox---<br>将该值绑定到当前组件实例上的动态数据<br>使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型<br>
radio<br>pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second<br>
select
selected 会被设为该对象字面量值 { number: 123 }<br>
修饰符
lazy
v-model 会在每次 <font color="#e74f4c">input 事件</font>后更新数据 (IME 拼字阶段的状态例外)<br>添加 lazy 修饰符来改为在每次 change 事件后更新数据：<br>
number
用户输入自动转换为数字<br>如果该值无法被 parseFloat() 处理，那么将返回原始值。<br>输入框type="number"时候，自动启用
.trim
自动去除用户输入内容中两端的空格<br>
v-bind:value="msg"
v-for
v-for指令可以遍历data中的数据，并在页面进行数据展示<br>
demo
过滤器
demo
Axios
简介
引入
通过NPM安装node.js
npm install axios
通过CDN方式引入<br>
API用法
<br>
get
语法
post
vscode，安装live server插件
传参
1）放入data中传递<br>
创建data对象
使用data属性
创建formData对象
2）在url中传递
pathvaribel注解参数接收
响应内容
生命周期
概念
常用函数
demo
组件
全局组件
语法
demo<br>
1)定义模板
2）全局组件定义
3）组件的调用
局部组件
1)模板定义
2）组件定义
3)调用
父子组件
1)父组件模板
2）子组件模板
<br>
3)使用
父传子值组件
1）模板
自定义事件<br>
demo
看element 脚手架内容
脚手架
安装node.js配置
1）下载node.js 配置环境变量
2.)node -v验证
3）配置淘宝镜像<br>
npm config set registry https: //registry.npm.taobao.org
npm config get registry
4)配置nmp依赖仓库位置(地址自定义)
npm config set cache "D: \nodereps\npm-cache"<br>
npm config set prefix "D:\nodereps\npm_global“
5）验证
npm config ls
安装脚手架
卸载x3版本 npm install -g @vue/cli <br>卸载x2版本 npm install -g @vue-cli
创建一个项目
vue init webpack 项目名称<br>
选项
目录结构
0 条评论
下一页
为你推荐
查看更多
