VUE创建

最新推荐文章于 2024-07-20 18:05:54 发布

小文学Java

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量72

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57058450/article/details/128557810

版权

VUE以及其组件功能

链接https://cn.vuejs.org/

快捷键tr>th*n+tab

#vue实例中el属性代表vue实例的作用范围，日后在vue实例作用范围内可以使用{{data属性中变量名}}直接获取data中变量名对应属性值；vue3中使用的是Vue.createApp({data属性中变量名}).mount('#app')

#vue实例中data属性用来给当前vue实例绑定自定义数据,日后绑定数据可以在vue实例作用范围内直接使用{{变量名1}}方式获取;vue3中的格式为data(){return{变量名1}}

#使用{{}}进行data中数据获取时,可以在{{}}取值语法中进行算数运算、逻辑运算以及调用相关类型的相关方法

#{{}}取值和v-text取值区别:
 1.{{}}取值不会将标签原始数据清空使用 v-text取值清空标签原始数据
 2.{{}}取值存在“插值闪烁” v-text v-html取值不存在插值闪烁

#v-text (innerText)、v-html (innerHtml)区别:
 1.使用v-text取值:直接将获取数据渲染到指定标签中
 2.使用v-html取值:先将获取数据进行html标签解析,解析之后在渲染到指定标签中

v-on

#事件―事件源:发生事件dom元素―事件:发生特定的动作c1ick.... 监听器发生特定动作之后的事件处理程序通常是js中函数
#1.在vue中绑定事件是通过v-on指令来完成的v-on:事件名如v-on:click
#2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
#3.在vue中事件的函数统一定义在vue实例的methods属性中
#4.在vue定义的事件中this指的就是当前的vue实例,日后可以在事件中通过使用this获取vue实例中相关数据

#v-on简化为：@
# test:function()简化为test()

v-if、v-show

v-if , v-show指令:
#作用:用来通过vue方式控制页面中哪些标签展示和隐藏
#语法:控制那个标签显示隐藏直接在那个标签上加入v-if="true | false
#逻辑运算表达式”v-show="true | false"
#区别:
 1.v-if底层通过控制dom树上元素节点实现页面标签展示和隐藏 （删除和增加dom树）
  推荐状态更改“不频繁”的时候使用
 2.v-show底层通过控制标签css中display属性实现标签展示和隐藏 （改变css样式）
 推荐状态更改“频繁”的时候使用

v-bind

#v-bind 简化为“:”冒号
用来将html标签属性绑定vue实例,日后通过修改vue实例中属性以达到动态修改标签属性效果
 一般为 :key="index" 或者 :key="user.id"，或者 :href="",或者 :src=""

v-for

v-for指令:
#作用:用来在页面中实现vue中定义数据的遍历
#语法:直接在对应标签上加入v-for指令
 a.遍历对象:v-for="(value,key, index) in data中变量名”
  <div v-for="(value,key,index) in user">{{value}}=={{key}}=={{index}}</div>
 b.遍历数组:v-for="(item ,index) in data中变量名"

#为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute : 例如绑定：:key="mean.id"

v-model

#v-model:模型
#作用:用来将html标签的value属性进行绑定，交给vue实例管理
  主要用在表单元素上最能体现"双向绑定"机制一个指令

data

#用来绑定数据

methods

#用来定义一系列方法

computed

#computed:计算属性
#作用:用来在vue实例中完成相关业务计算工作――日后在将某个数据渲染页面时如果该数据需要经过业务处理之后再渲染就可以使用computed
#好处:提升vue运行性能﹐主要使用computed进行计算相关处理会将第一次计算结果进行缓存，便于日后页面多次使用

axios(异步请求库)

网址：http://axios-js.com/zh-cn/docs/

#Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
	在服务端它使用原生node.js http模块，而在客户端(浏览器端)则使用XMLHttpRequests。
#特性
    从浏览器创建XMLHttpRequests，从node.js创建http请求
    支持promise API
    拦截请求和响应，转换请求和响应数据，取消请求，自动转换JSON数据
    客户端支持防御XSRF
    
#axios发送各种方式异步请求
    a. axios.get("url?id=21").then(function(res){res.data}).catch(function(err){})
    b. axios.post("http://localhost:8081/test",{id:21,name:"xiaochen"}) .then(function(res){
    console.log(res);
    console.log(res.data);//响应结果
    }) catch(function(err){
    console.log(err);
    });
    c.axios.put().then().catch();
    d.axios.patch().then().cateh();
    e.axios.delete("ur1?id=21").then().catch();

vue组件功能

#toFixed(2):保留两位小数

#事件修饰符
    .stop
    作用:用来阻止事件冒泡（阻止事件冒泡到到父元素上）
    .prevent作用:用来阻止标签的默认行为
    .self
    作用:只监听自身标签触发的事件
    .once
    作用:该事件只触发一次
#语法:
	@事件名事件修饰符="事件处理函数"======>@click.stop="test"

#按键修饰符
    .enter
    对键盘回车键修饰
    .tab
    对键盘切换tab按键修饰
    .delete(捕获"删除”和"退格”键).esc
    对键盘esc按键修饰
    .space
    对键盘的空格按键修饰
    .up
    对上
    .down
    下
    .left
    左
    .right
    右