Vue基础笔记

Lucky白

已于 2022-08-02 21:28:58 修改

阅读量233

点赞数 1

文章标签： vue.js javascript 前端

于 2022-08-02 21:27:33 首次发布

本文链接：https://blog.csdn.net/m0_58620239/article/details/126110271

版权

引用：Vue官方文档中不推荐直接操作DOM。

不推荐操作DOM的原因有：

1.性能得损耗，操作DOM是及其损耗性能得，相信大多数人都不会推荐操作大量得DOM，而是从数据层入手，比较流行得vue, react,angular等都不直接操作DOM

2.代码得质量会降低，出现一些多余得代码，经常直接操作DOM 会导致一些不可预测得问题，在一个组件当中直接操作全局得DOM时，有可能会影响到其他页面，一旦报错，定位问题会比较困难。
原文链接：https://blog.csdn.net/qq_38935512/article/details/100654195

el：挂载点

-el是用来设置Vue实例挂载（管理)的元素

-Vue会管理el选项命中的元素及其内部的后代元素

-可以使用其他的选择器,但是建议使用ID选择器（el："#app"）

-可以使用其他的双标签,不能使用HTML和BODY

data：数据对象

-Vue中用到的数据定义在data中

-data中可以写复杂类型的数据（数组的调用可以在<li>标签下，按照数组下标的顺序调取）

-渲染复杂类型数据时,遵守js的语法即可（比如说对象的 . 语法。数组的索引语法）

vue指令

v-text

设置标签的文本值（textContent）

<div id="app">
<h2 v-text="message+'!'"></h2>

<h2>文本1{{ message + "! "}}</h2>

</div>

var app = new Vue({el:"#app",
data:{
message:"文本2"}
})

-v-text指令的作用是:设置标签的内容(textContent)
-默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

-内容支持表达式

v-html

-设置标签的innerHTML

</div>

var app = new Vue({

el:"#app",
data:{
//content:"文本"
content:"<a href='网址链接'>文本</a>"}
})

v-html指令的作用是:设置元素的innerHTML

-内容中有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

-解析文本使用v-text,解析html结构使用v-html

v-on(简写：@)

为元素绑定事件，

var app = new Vue({
el:"#app",
methods:{
dolt:function(){

//逻辑(alert("文本"));
}
}})

v-on指令的作用是:为元素绑定事件

事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

传递自定义参数,事件修饰符

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车

事件修饰符有多种

计数器

</div>
var app = new Vue({

el: "#app",

data：{},

methods:{}
});

1.data中定义数据:比如num
2.methods中添加两个方法:比如add(递增),sub(递减)
3.使用v-text将num设置给span标签
4.使用v-on将add,sub分别绑定给+,-按钮
5.累加的逻辑:小于10累加,否则提示
6.递减的逻辑:大于0递减,否则提示

创建Vue示例时:el(挂载点),data(数据),methods(方法)

v-on指令的作用是绑定事件,简写为@
方法中通过this,关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为{{}}

v-html指令的作用是:设置元素的innerHTML

v-show

根据表达值的真假,切换元素的显示和隐藏（广告、遮罩层）
<div id="app">
<img src="图片地址" v-show="true">

</div>

var app = new Vue({

el:"#app",
data:{
isShow:false,

age:16
}
})

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值

值为true元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新

v-if

根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

<div id="app">
<p v-if="true">我是一个p标签</p>

<p v-if="isShow">我是一个p标签</p>

</div>

var app = new Vue({

el:"#app",
data:{
isShow:false

}
})

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind

设置元素的属性(比如:src,title,class)
v-bind的格式 :属性名=表达式

</div>

var app = new Vue({

el:"#app",
data:{
imgSrc:"图片地址",

imgTitle:"黑马程序员",

isActive:false
}
})

v-bind指令的作用是:为元素绑定属性

完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名

v-for

根据数据生成列表结构

{{ item }}
</li>
<li v-for="(item,index) in objArr">{{ item.name }}
</li>
</ul></div>

var app = new Vue({

el: "#app",
data: {
arr: [1,2,3,4, 5],

objArr: [
{ name: "jack" },

{ name: "rose" }]
}})

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据
item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

v-model

获取和设置表单元素的值(双向数据绑定)

</div>

var app = new Vue({

el: "#app",
data: {
message:"黑马程序员"

}
})
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据→表单元素的值

记事本案例

vue案例小黑记事本

1.新增功能

写好样式后，生成列表结构(v-for和数组)
获取用户输入(v-model)
按下回车键，新增数据(v-on.enter添加数据)

2.删除功能

使用v-on绑定删除方法，在方法中获取数组的索引(index)，然后用splice()删除

3.隐藏功能

        -列表结构可以通过v-for指令结合数据生成
        v-on结合事件修饰符可以对事件进行限制,比如.enter
        v-on在绑定事件时可以传递自定义参数
        -通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式

网络应用

Vue结合网络数据开发应用

axios

功能强大的网络请求库，Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中

原理：axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

注：XHR就是ajax的意思

axios.post(文档提供的api地址,{key:value,key2:value2}).then(function(response){f,function(err){})

        axios必须先导入才可以使用
        使用get或post方法即可发送对应的请求
        then方法中的回调函数会在请求成功或失败时触发
        通过回调函数的形参可以获取响应内容,或错误信息

    1、从 node.js 创建 http 请求
        2、支持 Promise API
        3、拦截请求和响应
        4、转换请求和响应数据
        5、取消请求
        6、自动转换JSON数据
        7、客户端支持防御XSRF要特点
        8、从浏览器创建 XMLHttpRequests

文档官网：https://github.com/axios/axios