vue学习

最新推荐文章于 2024-08-23 14:49:37 发布

小冯冲鸭!

最新推荐文章于 2024-08-23 14:49:37 发布

阅读量680

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/qq_53213715/article/details/116422822

版权

0.1vue的导入导出

export是导出
import是导入
1.导出方式一:
export{
flag,sum
}
2.导出方式二:
export var num1 = 1000;
export var height = 1.88;
3.导出函数/类
export function mul(num1,num2){
return num1 * num2
}
export class person{
run(){
console.log(“在运行”)
}
}
4.export default
一个文件里有且只能有一个
在导入的时候可以随便命名
const address=“湖北省”
export default address

导入:
type="module"
1.导入的{}中定义的变量
import {flag,sum} from “./a.js”;
2.直接导入export定义的变量
import {num1,height} from “./a.js”;
3.导入export的function
import {mul} from “./a.js”;
4.导入export default中的内容
import add from"./a.js";
5.全部统一导入
import*as a from ‘./a.js’
console.log(a.flag);

0.2vue的7大属性

el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

1:基础知识

{{}}中只能使用表达式，不能使用语句。
v-bind:id和:id是一种可解析动态数据的指令；
指令相当于一种标记位，vue通过这个标记位可以做相应的处理
v-for v-if v-else可以让我们在模板语句中使用条件，判断
v-show = “”，根据绑定的值来确定是否显示
v-for 可以循环渲染如：
在这里插入图片描述
v-on :,添加事件监听器，通过它调用定义的方法

vue中不用触碰dom，所有的dom操作都由vue来处理，编写的代码只需要关注逻辑层面即可
v-model 它能轻松实现表单输入和应用状态之间的双向绑定。
列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式

2.组件

定义：组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树，
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件就是为了解决复用而诞生的
https://blog.csdn.net/weixin_44972008/article/details/113772348
https://blog.csdn.net/weixin_44972008/article/details/114368528

3箭头函数

ES6允许箭头(=>)
function 换成=>放在参数和函数体中间
1.如果没有参数，或有多个参数就需要使用（）来定义参数列表
2.如果有一个参数，可以不用（）
3.如果函数体中只有一条语句，可以不用{}，就不用使用return

4.VUE网络应用

Vue结合网络数据开发应用

4.1axios

是功能强大的网络请求库
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response{},function(err){}))
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息

4.2axios+vue

axios如何结合vue开发网络应用
axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了,需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构