首页 > 其他分享 >jQuery和Vue入门

jQuery和Vue入门

时间:2022-09-04 23:11:26浏览次数:89  
标签:jQuery Vue 入门 元素 vue key data 选择器 函数

jQuery

jQuery:别人写好的js文件 *********jquery中所有东西都是函数: jQuery的放啊发 名称:first获取名称的第一个元素 名称:last获取名称的最后一个元素
* $(document).ready-文档就绪函数(当文档加载时生效)
widow.onload只能运行最后一块代码,并且只有当浏览器内所有元素都解析完
jQuery就绪函数可运行多次,并且在浏览器document对象解析完后就可以使用

* $("选择器")          随意选:敢想啥选择器就有选择器
$(this) 把当前对象转化为jQuery对象
* 事件($(选择器).click()) 
* *$("html标签结构")创建了一个标签  在选择器内部插入 :后:.appendTo($("选择器"))  前.prependTo()   在选择器后插入  .insertAfter() .insertBefore()  
			      替换元素:替换一个 被替换的元素.replaceWith()   替换所有 .replaceAll(被替换的元素) 
			      元素 .append .prepend .after .before	 .empty()清空容器内所有元素  .remove删除自己
			      .html()的 相当于innerHtml   .Text 相当于innerText   .val() 想当于.value-还可以操作单选框,下拉菜单,复选框的选择状态  .prop(key,value)-相当于setAttribute/getAttribute可以获取,设置属性(key,value)  或状态(状态key,true/false) 状态key:checked,selected
			      .addclass(样式 样式)  .removeclass(样式 样式)   .toggleclass(样式 样式)  
			      .hide(duration,funtion) 隐藏  .show() 显示  .toggle()隐藏和显示
			      .fadein() 淡入 .fadeout淡出 fadetoggle 淡入和淡出 fadeto透明度
			      .slideUp 拉上去 .slideDown 拉下来 slideToggle
.each(函数) 函数(index,item){}  item是文档对象(js对象) index(每个元素的索引)	

VUE(JS库)

语法跟java类似,也是要new实例的———vue的语法使用vue的变量不需要使用{{}}

  • Vue是一个工程化的东西,必须要抓到一个容器,浏览器解析后不会显示Vue语法,会解析成HTML源码—底层是操纵的css和js所以和他们兼容很好
    {{取data的值}} -----插值表达式(不能取html元素) 依赖于网络环境传输(慢的话会看见它-可能会有插值闪烁)
    属性v-text="取data的值" 相当于innerText
    v-Html="取data的值" 相当于innerHtml
    v-show="取data的值-Boolean" 操作document元素的css的display展示样式
    v-if="取data的值-Boolean" 操作底层dom元素(HTML元素)
    v-bind:(也可以写单:冒号) 绑定HTml原生属性到我们的vue属性,然后就可已取值,也可以设置通过修改vue对象的变量的值来改变HTML元素的属性
    v-for="(value,key,index) in data中的值" 单对象(key和value)多对象(user) in user,但是顺序不变 类似于JSTL表达式的使用
    v-model(data中的值) 双向绑定到我们的表单中的数据:双向绑定:data的值变了,表单中的数据就变了,表单中的数据变了 data也变了 单选框(下拉菜单)要给data默认值,才能实现checked 复选框的data一点更要定义成数组才能存储多个value
    v-on:(事件)(也可以写@事件) @click=""

  • new Vue({——————里面都是是json格式的() key:value 一个el元素就是一个作用域,不同的作用域的东西不能互相访问到
    el:"选择器" ----只能抓第一个元素*******
    data:{"数据"}----- {}对象 []数组 字符串 数字
    methods{方法}--- 方法(){---this---代表当前vue实例} 添加事件@click="函数"
    components{组件-key:value}
    })

  • 事件修饰
    @事件.stop=函数——阻止事件冒泡
    @事件.prevent=函数——组织标签默认行为,执行函数 a便签-跳转 submit便签-提交
    @事件.once ——只触发一次函数,然后执行标签默认行为
    @事件.enter——当敲回车键的时候 在form便签中添加,进行数据合法验证

  • vue组件:可以在html结构中写<组件名></组件名>使用 内容:template:html代码—必须要有容器(html容器,有且只有一个最外层根容器) 所有使用 data(){ return{}} props:属性需要挂载(需要挂载vue实例的属性) methods方法
    全局组件:Vue.component(组件名,{内容}):
    局部组件(vue实例使用的话需要被挂载):let 组件名={内容/组件id}

内容 let组件名={ template:id}

  • vue路由(vue实例使用的话需要被挂载):路由需要引入js,但是要在引入vue.js下面引入
    new VueRouter({
    routes:[{path:"路由路径",component:"组件",children:[{path:"路由路径",component:"组件",children:[]}........]},........一般还要再路径中配置一个根路径path:“/”设置默认显示哪个模板]
    })
    vue路由展示模板内容
    vue路由链接注册/登录 相当于a标签

ajax步骤

1.检查是否挂载xmlhttprequest-创建对象
2.链接地址xhr.open("GET","https://api.xdclass.net/pub/api/v1/web/index_card") (get也可以换成post,post用于传递账号密码等重要数据)
3.对象.send发送数据
4.判断是否返回成功,成功的话可以打印出JSON字符串

axios.get('请求网址,返回response对象') .then(function (response对象) {
对请求到response中数据的操作------返回数据的方法必须是response.getwriter.write往回写
})
.catch(function (error) { // 失败时抛出异常
console.log(error);
});

回调函数的使用
匿名函数:this指向当前函数的调用者 fution(){}匿名函数
箭头函数:this还是之前的this 不会识别为funtion()

标签:jQuery,Vue,入门,元素,vue,key,data,选择器,函数
From: https://www.cnblogs.com/404tly/p/16656456.html

相关文章

  • Docker技术入门与实战 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1OnXNENWwKEqyEiPYoCxyAA点击这里获取提取码《Docker技术入门与实战》是中国首部Docker著作,一线Docker先驱实战经验结晶,来自I......
  • Java入门1-安装开发环境
    JDK8的安装1.浏览器搜索JDK8,找到下载地址2.下载电脑对应的版本3.双击安装JDK4.记住安装的路径5.配置环境变量​(1)我的电脑-->右键-->属性-->高级系统设置-->环境......
  • STM32 汇编入门 伪指令ALIGN
    https://blog.csdn.net/u012264124/article/details/65434871......
  • vue纯前端导入导出excel
    vue纯前端导入导出excel我们有时会遇到在前端实现导入/导出excel的需求这里直接推荐两个现成的vue导入导出excel的库,他们是基于xlsx封装的https://www.npmjs.com/packa......
  • 前端学习之------浏览器兼容(vue)
    1、vue支持所有兼容ES5的浏览器,IE8及以下的浏览器不支持IE5特性,所以IE8及以下的浏览器都不支持vue。2、Babel插件:IE浏览器不支持ES6语法,Babel插件的作用就是把ES6语法转为......
  • 1.JS快速入门
    1.引入JavaScript1.1引入JavaScript1.内部标签 <script>   alert('HelloWorld!'); </script>2.外部引入xxx.js ....test.html <scriptsrc="xxx.js"......
  • vue3——hook函数
    什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂......
  • vue3——生命周期
    vue2.x的生命周期:  Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3.0也提......
  • Git和gitee的使用(二、入门篇)
    一、准备工作Git的下载以及gitee的注册。Git下载链接:https://git-scm.com/downloads注:按照默认选项进行安装就ok。gitee官网:https://gitee.com/注:按照提示进行注册。......
  • vue3——watchEffect函数
    watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像comp......