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)

JavaScript 树形菜单总结 Auscy microsoft
树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，
前端项目架构设计要领
1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目
【前端】jQuery数组合并去重方法总结
在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
vue keep-alive标签的运用
keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标签一的表单中输入内容后，点击标签二，再回到标签一，表单的内容依然存在。如果按以往的做法，不使用keep-alive，那是不能实现的。然而，我们只需要在选项卡的内容最外层包一个keep-alive标签即可。但这儿有一
Vue3+Vite+TS+Axios整合详细教程老马聊技术 Vue Vite TS vue.js
1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
本地包解决npm error code E404 雅痞yuppie npm 前端 node.js
这个错误提示表明npm找不到名为create-vue-admin-cli的包。这是因为你开发的CLI工具还没有发布到npm官方注册表。要解决这个问题，有两种方法：方法一：使用本地开发模式测试1.确保你的CLI已正确链接到全局在你的vue-admin-cli项目根目录下执行：npmlink这会在全局环境中创建一个符号链接，指向你本地的CLI项目。2.使用本地链接的CLI创建项目直接使用命令：vue-
前端 NPM 包的依赖可视化分析工具推荐前端视界前端艺匠馆前端 npm arcgis ai
前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开
数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验 ui设计前端开发老司机 ui
hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”
Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求可曾去过倒悬山 java 前端架构
Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场
《Java前端开发全栈指南：从Servlet到现代框架实战》
前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
[Vue warn]: onUnmounted is called when there is no active component instance to be associated with 扬帆起航&d vue.js javascript 前端 ecmascript 前端框架
[Vuewarn]:onUnmountediscalledwhenthereisnoactivecomponentinstancetobeassociatedwith.LifecycleinjectionAPIscanonlybeusedduringexecutionofsetup().Ifyouareusingasyncsetup(),makesuretoregisterlifecyclehoo
Vue3组件库实战: 打造高复用UI系统武昌库里写JAVA 面试题汇总与解析课程设计 spring boot vue.js layui 毕业设计
Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
Ubuntu基础（Python虚拟环境和Vue） aaiier ubuntu python linux
Python虚拟环境sudoaptinstallpython3python3-venv进入项目目录cdXXX创建虚拟环境python3-mvenvvenv激活虚拟环境sourcevenv/bin/activate退出虚拟环境deactivateVue安装Node.js和npm#安装Node.js和npm（Ubuntu默认仓库可能版本较旧，适合入门）sudoaptinstallnodejsnpm#验
Flutter基础（前端教程⑥-按钮切换） aaiier Flutter flutter 前端状态模式
1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text
为Layui Table组件添加前端搜索功能 caifox菜狐狸 JavaScript 学习之旅：从新手到专家前端 layui javascript table 前端搜索表格搜索前端框架
在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添
vue3面试题(个人笔记) 武昌库里写JAVA 面试题汇总与解析课程设计 spring boot vue.js java 学习
vue3比vue2有什么优势？性能更好，打包体积更小，更好的ts支持，更好的代码组织，更好的逻辑抽离，更多的新功能。描述Vue3生命周期CompositionAPI的生命周期：onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount()onErrorCaptured()onRenderTrac
el-timeline时间线（Plus）左边图标改为自定义图片顾尘眠 javascript 前端 vue.js
（目前图片有点小，还需要自己去调整下大概样式，比较懒，就放了个大概样子）时间线左侧正常根据文档内容，是填写的icon，但通过icon属性还有另外一个类型，component，可以搭配h函数写一组img元素，实现将图标改为本地图片{{activity.content}}import{h}from'vue'constactivities=[{content:'Eventstart',timestamp
vue3 + Element Plus 系统主题切换顾尘眠 vue.js 前端 javascript
创建主题管理模块(用于配置颜色变量)新建src/utils/theme.tsimport{ref,watchEffect}from'vue'typeThemeType='light'|'dark'|'system'//主题配置constthemeConfig={light:{'--el-color-primary':'#409eff','--bg-color':'#ffffff','--text-
Vue.js 过渡 & 动画 lsx202406 开发语言
Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
Javaweb学习之Vue模板语法（三）不要数手指啦 vue.js 学习前端
目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
Vue3 tailwindcss
1、安装tailwindcsspnpmi-Dtailwindcsspostcssautoprefixer#yarnadd-Dtailwindcsspostcssautoprefixer#npmi-Dtailwindcsspostcssautoprefixer2、创建TailwindCSS配置文件npxtailwindcssinit-ptailwind.config.js/**@type{impor
Vue框架之模板语法全面解析 AA-代码批发V哥 Vue vue.js
Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式：数据渲染的基础2.1基本用法：渲染文本2.2纯HTML渲染：`v-html`指令2.3一次性插值：`v-once`指令三、指令系统：控制DOM的行为3.1条件渲染：`v-if`与`v-show`3.1.1`v-if`：动态创建/销毁元素3.1.2`v-else`与`v-else-if`：条件分支3.1.3`v-show`：动态显示/
GPT实操——利用GPT创建一个应用狗木马深度学习 gpt-3 gpt
功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：
前端面试题总结——JS篇又又呢前端 javascript 开发语言
一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号
前端面试题——5.AjAX的缺点？浅端前端面试题前端面试题
①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist
封装一个有最小化的dialog组件嘉琪001 javascript 前端 css
{{title}}最小化关闭温馨提示：当您开启医学白板并最小化界面时，离会前先关闭白板（观看者无需操作）。{{title}}import{ElMessageBox}from'element-plus'import{defineComponent,ref,watch}from'vue'exportdefaultdefineComponent({name:'CustomDialog',props:{v
2023高薪前端面试题（二、前端核心——Ajax）
原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML，就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示
前端面试题——手写实现 ajax 阿水爱踢中锋 ajax js 前端
凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封
JQ+vue实现图片拼接（无限套娃版）小周同学: js vue jquery vue.js javascript jquery
css样式/*css初始化*/*{margin:0;padding:0;}/*去掉li的小圆点*/li{list-style:none;}/*去掉a的下划线*/a{text-decoration:none;}/*搜索框去除边框*/input,button,select{border:0;/*设置背景颜色为透明*/background-color:transparent;/*去掉外轮廓*/outli
vue如何实现Cascader 级联选择器(二级全部选中只展示一级，三级全部选中只展示二级) 小周同学: vue vue.js
select提交重置级联exportdefault{data(){return{ruleForm:{selectLabel:[],idList:[],},citiesList:[],rules:{selectLabel:[{type:'array',required:true,message:'多选不能为空',trigger:'change'}],},props:{multiple:true,va
遍历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