SEVEN clock

使用HbuilderX学习Vue笔记

使用HbuilderX学习Vue

从各种视频和书中结合学习。做个笔记温故知新。

html中的页面结构


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<p>{{msg}}p>
		div>
		<script>
            // 2.创建一个vue的实例
			var vm = new Vue({
				el: '#app', 
				data: { 
					msg: '欢迎学习vue'
				}
                 methods:{}//存放自定义的方法
                 directives: {}//自定义私有指令
                 filters: {
               //定义私有过滤器,过滤器有两个条件  [过滤器名称 和 处理函数]
               //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
                     msgFormat:function(msg,arg){
                         //字符串的 replace 方法,第一个参数,除了可写一个字符串之外,还可以定义一个正则
						return msg.replace(/说/g,arg)+'~~~'
                         }
                 }//自定义私有过滤器
            
			})
		script>
	body>
html>

当我们导入包之后，在浏览器的内存中就多了一个Vue构造函数。注意：我们new出来的这个 vm对象,就是我们MVVM的vm的调度者。

el: '#app', ——表示当前我们new的这个vue实例,要控制页面上的哪个区域
data:{},——这里的data就是mvvm中的m,专门用来保存每个页面的数据的，data属性中,存放得是el中要用到的数据。

如果你会在之后某些时候需要一个属性，但是它一开始不存在或为空的时候，你就需要在data中设置一些初始值，比如：

data: {
  	n1: 0,
	n2: 0,
	opt: '+',
    selection:false,
    list:[],
    error:null
}

注意： Vue中所有的指令，在调用的时候，都以 v- 开头。

Vue中的一些用法

——v-cloak能够解决插值表达式闪烁的问题。p为一个标签。
——默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素内容清空。
——可以让变量变成一个html元素，而不是一个普通的文本。
v-bind:——vue提供的属性绑定机制，缩写"："。v-bind只能实现数据的单向绑定，从M自动绑定到v，无法实现数据的双向绑定。
v-model="自定义事件"——可以实现表单元素和model中数据的双向数据绑定，注意:v-model 只能运用在表单元素中：比如 input(radio,text,address,email…)，select，checkbox，textarea。
v-on:属性="自定义事件"——vue提供的事件绑定机制，缩写’’@’’。在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了比如@click="add()"。
this.intervalid = setInterval( () => {})——定时器。
{{ 1 == 1 ? 'YES' : 'NO' }}——三元表达式。判断？前的布尔值类型。
@click.stop——使用 .stop 阻止冒泡。阻止单击事件继续传播。
@click.prevent——使用 .prevent阻止默认行为。提交事件不再重载页面。
@click.capture——使用 .capture实现捕获触发事件的机制。
@click.self——使用 .self实现只有点击当前元素的时候，才会触发事件处理函数。.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止人家冒泡行为的触发。
@click.prevent.once——使用 . once只触发一次事件函数。例如此处，点击第二次就不会阻止默认行为。证明，修饰符是可以串连的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
——’.lazy’修饰符使得v-model在"change"时，而非"input"时更新。
—— 如果想自动将用户的输入值转为数值类型，可以给v-model添加’.number’修饰符。即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
—— 如果要自动过滤用户输入的首尾空白字符，可以给v-model添加 ‘.trim’ 修饰符。
add() { this.list.unshift({ })}——添加方法(添加在数组上方)，使用push({})时，为添加在数组下方。
setTimeout(function(){}, 3000);——3000毫秒后，{}内的值变换到所定义的值。
{{ message.split('').reverse().join('') }}——spilt将信息变成一个数组，reverse将数组元素反序，join重新将排序后的元素形成新的一个数组。
v-for——关于v-for的一些用法：

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型：key值。以用来保证数据的唯一性。

注意：v-for循环的时候，key属性只能使用 number 获取string

注意：key 在使用的时候，必须使用v-bind 属性绑定的形式，指定 key 的值。

for循环普通数组

<div id="app">
  索引值:{{i}} --- 每一项：{{item}}p>
div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			list:[1,2,3,4,5,6]
		},
		})
script>

"item"为赋值的对象，"i"是索引。

v-for循环对象数组

<div id="app">
		<p v-for="(user, i) in list">ID:{{user.id}} -- name:{{user.name}}--索引：{{i}}p>
div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			list:[
				{id:1,name:'zs1'},
				{id:2,name:'zs2'},
				{id:3,name:'zs3'},
				{id:4,name:'zs4'}
			]
		},
	})
script>

v-for迭代数字

<div id="app">
	<p v-for="count in 10">这是第 {{count}} 次循环p>
div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{},
				})
script>

"in"后面我们放过：普通数组，对象数组，对象，还可以放数字。注意：如果使用v-for迭代数字的话，前面的count值从1开始。还可以自定义一个方法，同时，把所有的关键字，通过传参的形式传递给这个方法。例如：

。

v-if和v-show的使用特点。

<div id="app">
			<input type="button" value="toggle" @click="flag=!flag">
			<h3 v-if="flag">这个是v-if控制的元素h3>
			<h3 v-show="flag">这是v-show控制的元素h3>
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					flag:true//当为false时，则不会被渲染。
				},
				methods:{}
			})
		script>

v-if的特点是：每次都会重新删除或者创建元素。有较高的切换性能消耗。如果元素可能基本不会被显示出来给用户看到，则推荐使用v-if。v-else-if用法：

<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else>
Not A/B
div>

v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式。v-show有较高的初试渲染消耗。如果元素涉及到频繁的切换，最好不要使用v-if，而是推荐使用v-show。

@keyup.enter="add"——按键修饰符，在文本框中敲击回车就触发add事件。add自己在methods中定义。
Object.freeze()——使用在new的Vue实例之前，会阻止修改现有属性。
this.list.splice(index， 1)——索引名用var自定义，这是删除列表中一行数据的方法。

Vue的一些实例

定义全局过滤器

Vue.filter('dateFormat', function(dateStr, pattern) {
				//根据给定的时间字符串,得到特定的时间
				var dt = new Date(dateStr)
				//yyyy-mm-dd
				var y = dt.getFullYear()
				var m = (dt.getMonth() + 1).toString().padStart(2, '0')
				var d = dt.getDate().toString().padStart(2, '0')
				var hh = dt.getHours().toString().padStart(2, '0')
				var mm = dt.getMinutes().toString().padStart(2, '0')
				var ss = dt.getSeconds().toString().padStart(2, '0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			})

过滤器的定义语法：Vue.filter(‘过滤器名称’,function(){})。过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符前面传递过来的数据。

定义全局指令

例如：

Vue.directive('focus', {
		bind: function(el) { //,每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
			//注意,在每个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
			//在元素,刚绑定了指令的时候,还没有插入到DOM中去,这时候,调用focus方法
			//没有作用,因为,一个元素只有插入DOM,之后,才有获取焦点
		},
		inserted: function(el) {//inserted表示元素 插入到dom中的时候,会执行该函数,触发一次
			el.focus()
			//和JS行为有关的操作,最好在inserted中去执行,防止JS行为不生效
		},
		updated: function() { //当VNODE更新的时候,会执行updated,可能会触发多次

		}
	})

使用Vue.directive()定义全局指令，其中:参数1: 指令的名称,注意,在定义的时候,指令的名称前面,不需要加v- 前缀，在调用的时候,必须在指令名称前,加上v-前缀进行调用。参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。

根据关键字，进行数据的搜索

search(keywords) { 
		/*var newlist = []
		this.list.forEach(item => {
		if (item.name.indexOf(keywords) != -1) {
				newlist.push(item)
			}
		})
	return newlist*/

	//注意:  forEach   some   filter(过滤)   findIndex(找到对应的索引) 这些都属于数组的新方法
	//都会对数组中的每一项,进行遍历,执行相关的操作
		return this.list.filter(item => {
			// if(item.name.indexOf(keywords)  != -1)
			//注意 : ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
			//如果包含,则返回true,否则返回false
			//contain
			if (item.name.includes(keywords)) {
				return item
			}
		})
	}

实现过渡类名实现动画

<style>
	/* v-enter[这是一个时间点]是进入之前，元素的起始状态，此时还没有开始进入 */
	/* v-leace-to[这是一个时间点]是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */
	.v-enter,
	.v-leave-to{
		opacity: 0;
		/* 入场离场动画位移 */
		transform: translateX(200px);
	}
	/* v-enter-active[入场动画的时间段] */
	/* v-leave-active[离场动画的时间段] */
	.v-enter-active,
	.v-leave-active{
		/* 入场离场所用时间 */
		transition: all 20s ease;
	}
    /*此处的my则是自定义的一个前缀，可以区分不同组的动画*/
  	.my-enter,
	.my-leave-to{
		opacity: 0;
		transform: translateY(200px);
	}
	.my-enter-active,
	.my-leave-active{
		transition: all 1s ease;
	}
style>

使用transition元素，把需要被动画控制的元素，包裹起来，transition元素是vue官方提供的元素。如下：

<transition>
	<h3 v-if="flag"><strong>这是祖安人strong>h3>
transition>

此处的my则是自定义的一个前缀，可以区分不同组的动画。如下：

<transition name="my">
	<h6 v-if="flag2"><strong>这是影流人strong>h6>
transition>

使用第三方类完成动画时——bounceIn为入场，bounceOut为离场。使用 ：duration="毫秒值" 来统一设置入场和离场时候的动画时长。如果使用:duration="{enter:200, leave:600}" 就可以分别设置入场的时长和离场的时长。

<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
	<h3 v-if="flag" class="animated"><strong>这是祖安人strong>h3>
transition>

使用动画钩子函数

var vm = new Vue({
	el: '#app',
	data: {
		flag: false
	},
	methods: {
		// 动画钩子函数的第一个参数el,表示要执行动画的那个DOM元素,是个原生的JS DOM对象
		//el是通过 document.getElementById('')方式获取到的
		beforeEnter(el){
			// 表示入场之前,表示动画尚未开始,可以再before中设置元素动画开始之前的起始样式,位置
			el.style.transform = "translate(0,0)"
		},
		enter(el,done){
			// 这句话没有实际作用,但是如果不写,就没有动画效果
			// 可以认为 el.offsetWidth 会强制动画刷新.
			el.offsetWidth
			// 表示动画开始之后的样式,这里,可以设置小球完成动画之后的,结束状态.
			el.style.transform = "translate(150px,450px)"
			el.style.transition = 'all 1s ease'
			//这里的done,其实就是afterEnter这个函数,也就是说:done是afterEnter函数的引用
			done()
		},
		afterEnter(el){
			//动画完成之后,会调用
			//这句话第一个功能是控制小球的显示与隐藏
			//第二个功能:直接跳过后半场动画,让flag标识符直接变为false
			//当第二次再点击按钮的时候,flag false -> true
			this.flag = !this.flag
			// el.style.opacity= 0.5
            
			//Vue把一个完整的动画，使用钩子函数,拆分为了两部分:
			//我们使用flag标识符,来表示动画的切换;
			//刚一开始,flag = false---->  true   ---->false
		}
	}
})

动画列表

<transition-group appear tag="ul">
	<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
		{{item.id}}----{{item.name}}
	li>
transition-group>


<style>		
.v-move{ 
	transition: all 2s ease;
	}
.v-leave-active {
	position: absolute;			
	}
style>

在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用 transition-group。
如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置：key属性。
给transition-group 添加appear 属性，实现入场时候的效果。
通过为transition-group 元素，设置tag 属性，指定transition-group渲染为指定元素，如果不指定tag属性，默认渲染为span标签。

Vue的生命周期函数

实例创建阶段：

beforeCreate(){}——这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它，在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。也就是在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化。

created(){}——这是遇到的第二个生命周期函数，在create中,data和methods都已经被初始化好了，然而，挂载阶段还没开始，$el 属性目前不可见。如果要调用 methods中的方法,或者操作data中的数据,最早,只能在created中操作。

beforeMount(){}——这是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中，/在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。

mounted(){}——这是遇到的第四个生命周期函数,表示,内存中的模板已经真实的挂载到页面中,表示用户已经可以看到渲染好的页面了。注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示实例已经被完全创建好了。只要执行完了mounted ,就表示整个Vue实例已经初始化完毕了;此时,组件已经脱离了创建阶段;进入到了运行阶段。

接下来的是运行中的两个事件：

beforeUpdate(){}——数据更新时调用，这时候,表示,我们的界面还没有被更新,数据已经被更新了。当执行beforeUpdate的时候,页面中的显示数据,还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步。

updated(){}——组件 DOM 已经更新, 组件更新完毕，updated事件执行的时候，页面和data数据已经保持同步了,都是最新的。

实例销毁阶段：

beforeDestroy(){}——当执行beforeDestroy的时候,实例身上所有的data和所有的methods,以及过滤器,指令…都处于可用状态,此时,还没有真正执行销毁的过程。

destroyed(){}——当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组建中的左右数据，方法，指令，过滤器…都已经不可用了。

组件的使用

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组建的重用；

<div id="app">
    
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2h2>
	button-counter>
	<button-counter title="title2 : ">button-counter>
    <mycom2><mycom2>
div>
<script type="text/javascript">
//使用vue.component(){}为全局注册。
// 1.2 使用Vue.component('组件名称',创建出来的组件模板对象)
// Vue.component('myCom1',com1)
// 如果使用Vue.component定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把大写的
// 驼峰改为小写的字母,同时,两个单词之间,使用 - 连接;
// 如果不使用驼峰,则直接拿名称来使用即可
// 驼峰写法,例如:myCom1,区别于下方常规写法
// Vue.component('mycom1',com1)
Vue.component('button-counter', {//使用vue.component(){}创建一个Vue组件，'button-counter'为组件名称。
	props: ['title'],//为组件定义属性，他是一个数组
	data: function () {//以对象的形式去描述一个组件,data必须是一个函数
		return {//因此每个实例可以维护一份被返回对象的独立的拷贝，如果不是一个函数，各个组件之间会相互影响。
		  count: 0
		}
	},
    //一个组件的模板需要根节点，
    //在模板内通过可以声明一个插槽
	template: 'hi...
'，//其中的{{title}}是对此属性进行应用和渲染
	methods:{
		clickfun : function () {//声明函数
			this.count ++;
            //$emit方法还可以传入事件名称来触发一个事件。如
			this.$emit('clicknow', this.count);//第一个参数是事件名称，第二个参数是可携带的数据，参数。
		}
	}
})
// 注意:不论是哪种方式创建出来的组件,组建的template属性指向的模板内容,必须有且只能有唯一的一个根元素
	Vue.component('mycom2',{
		template:'这是直接使用Vue.component 创建出来的组件
666'
})
			
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {//声明方法
			console.log(e);
		}
	}
});
script>

你可能感兴趣的:(VUE,前端,vue)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
【vite 自动配置路由】 CODER-V 前端 javascript vue.js 前端软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
遍历dom 并且存储（将每一层的DOM元素存在数组中）换个号韩国红果果 JavaScript html
数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
Android+Jquery Mobile学习系列(9)-总结和代码分享白糖_ JQuery Mobile
目录导航经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
impala参考资料 dayutianfei impala
记录一些有用的Impala资料 1. 入门资料 >>官网翻译： http://my.oschina.net/weiqingbin/blog?catalog=423691 2. 实用进阶 >>代码&架构分析： Impala/Hive现状分析与前景展望：http
JAVA 静态变量与非静态变量初始化顺序之新解周凡杨 java 静态非静态顺序
今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
跳出iframe返回外层页面 g21121 iframe
在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
JAVA多线程监听JMS、MQ队列 510888780 java多线程
背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。对于上面提到的方法2使用一个监听器开启多线
第一个SpringMvc例子布衣凌宇 spring mvc
第一步：导入需要的包；第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
通过XSD验证XML antlove xml schema xsd validation SchemaFactory
1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
文本流与字符集百合不是茶 PrintWrite()的使用字符集名字别名获取
文本数据的输入输出; 输入;数据流,缓冲流输出;介绍向文本打印格式化的输出PrintWrite(); package 文本流; import java.io.FileNotFound
ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 java jvm jdb
用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
动态页面正文部分中文乱码排障一例 ronin47
公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。因为有做过系统调整，所以第一反应就是新上
java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
从100PV到1亿级PV网站架构演变 cfyme 网站架构
一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
[宇宙时代]宇宙时代的GIS是什么？ comsci Gis
我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的宇宙是一个高维时空
详解create database命令 czmmiao database
完整命令 CREATE DATABASE mynewdb USER SYS IDENTIFIED BY sys_password USER SYSTEM IDENTIFIED BY system_password LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
几句不中听却不得不认可的话 datageek
1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
原文地址：http://www.kafka0102.com/2010/08/281.html 因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
xcode6 Auto layout and size classes dcj3sjt126com ios
官方GUI https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html iOS中使用自动布局（一） http://www.cocoachina.com/ind
通过PreparedStatement批量执行sql语句【sql语句相同，值不同】梦见x光 sql 事务批量执行
比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) { String sql = "inseret into customer(id
程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear 二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
NGINX IXHONG nginx
pcre 编译安装 nginx conf/vhost/test.conf upstream admin { server 127.0.0.1:8080; } server { listen 80; &
设计模式--工厂模式 kerryg 设计模式
工厂方式模式分为三种： 1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。 2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。 3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd java spring bean xml
1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centos vim
有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？答案是肯定的，设置下缩进格式就可以了，非常简单：在用户的根目录下直接vi ~/.vimrc文件然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
netty大并发请求问题 tianzhihehe netty
多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod