Vue

最新推荐文章于 2023-04-06 16:43:41 发布
最新推荐文章于 2023-04-06 16:43:41 发布
阅读量1k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45919908/article/details/105089918
版权

文章目录

Vue概述

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：数据和 DOM 已经被建立了关联，所有东西都是响应式的。
当data中msg的数据发生改变，h1标签中的数据也会响应式的进行改变

<body>
	<div id="box">
		<h1>{{msg}}</h1>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg:'Hello Vue',
	}
});

声明式渲染：只需要声明在哪里需要做什么？不需要关心具体怎么实现的
命令式渲染：需要以具体代码表达在哪里做什么？它是如何实现的

在使用Vue框架时，需要在项目中引入Vue
导入文件或者通过网页链接导入

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue语法

Vue实例的创建

用Vue函数创建一个Vue实例

/*el:进行渲染的元素
  data:数据*/
new Vue({
	el:'#box',
	data:{
		msg:'Hello Vue',
	}
});
模板语法
<body>
	<div id="box">
		<!-- {{}}:模板语法，用于数据的展示 -->
		<h1>{{msg}}</h1>
		<!-- 模板语法可以进行一些运算 -->
		<h1>{{(30+50)*10/20}}</h1>
		<h1>{{5>1}}</h1>
		<h1>{{1+2>0?'大于':'小于'}}</h1>
		<!-- 模板语法也可以调用JS的方法和属性 -->
		<h1>{{msg.length}}</h1>
		<h1>{{msg.startsWith('a')}}</h1>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg:'abc'
	}
});

将数据显示到页面上

<body>
	<div id="box">
		<!-- 通过{{}}显示数据 -->
		<h1>{{msg1}}</h1>
		<!-- v-text:设置元素文本内容，相当于{{文本内容}} -->
		<h1 v-text="msg2"></h1>
		<!-- v-html:设置元素html内容 -->
		<h1 v-html="msg3"></h1>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg1:'Hello Vue1',
		msg2:'Hello Vue2',
		msg3:'<s>Hello Vue3</s>'
	}
});
绑定事件
<body>
	<div id="box">
		<!-- v-on:给元素绑定事件 -->
		<button type="button" v-on:click="show1()">按钮1</button>
		<!-- 事件绑定的简写方式 -->
		<button type="button" @click="show2()">按钮2</button>
	</div>
</body>

new Vue({
	el:'#box',
	data:{},
	// methods:存放事件的处理函数
	methods:{
	// 函数可传入参数event事件对象，并使用其属性和方法
	// 调用preventDefault()方法阻止事件默认行为
	// 调用stopPropagation()方法组织事件冒泡行为
		show1:function(){
			alert("abc");
		},
		show2:function(){
			alert("123");
		}
	}
})

Vue中阻止事件默认行为和冒泡行为的特有方式

<body>
	<div id="box">
		<div id="div1" @click="show1()" style="height:100px;width: 100px;background: red;">
			<!-- 阻止事件冒泡行为 -->
			<div id="div2" @click.stop="show2()" style="height:50px;width:50px;background:yellow;">
				
			</div>
		</div>
		<!-- 阻止事件默认行为 -->
		<a href="https://www.baidu.com" @click.prevent="show1()"></a>
	</div>
</body>

new Vue({
	el:'#box',
	data:{},
	methods:{
		show1:function(){
			alert("aaa");
		},
		show2:function(){
			alert("bbb"); 
		}
	}
})
绑定属性
<body>
	<div id="box">
		<!-- v-bind:用于绑定data中的属性数据-->
		<img v-bind:src="imgurl">
		<a v-bind:href="hrefurl">百度</a>
		<!-- 简写 -->
		<a :href="hrefurl">百度</a>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		imgurl:"img/picture.png",
		hrefurl:"https://www.baidu.com"
	}
});
修改绑定的数据

切换图片

<div id="box">
	<img :src="imgurl1" >
	<button type="button" @click="change()">切换图片</button>
</div>

new Vue({
	el:'#box',
	data:{
		//imgurl1:'img/picture1.png'
		imgurl1:'img/ali.png'
	},
	methods:{
		change:function(){
			// this代表创建出的Vue实例
			// 通过修改imgurl1数据来改变图片
			this.imgurl1="img/baidu.png"
		}
	}
})
表单绑定
<body>
	<div id="box">
		<!-- v-model:绑定表单数据 -->
		<input type="text" id="text1" v-model="msg"/>
		<input type="text" id="text2" v-model="msg"/>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg:'abc'
	}
})

数据的双向绑定：
如果改变text1中的数据，text2中的数据也会被改变
因为text1中的数据会返回到Vue中data中，更新msg的值，所以text2中的数据也来自data中的msg，所以也会改变
收集表单中数据

<body>
	<div id="box">
		<!-- @submit.prevent:阻止表单默认提交的行为 -->
		<form action="123.html" method="get" @submit.prevent="submitData()">
			<!--required:h5提供的属性，表单必须填入值  maxlength:最大字符的长度  -->
			用户名：<input type="text" name="username" required="required" placeholder="请输入用户名" maxlength="20" v-model.trim="username" /><br>
			密码：<input type="password" name="password" required="required" v-model.trim="password" /><br>
			性别：<input type="radio" name="gender" value="1" v-model="gender" /> 男
			<input type="radio" name="gender" value="0" v-model="gender" /> 女
			<br>
			爱好：<input type="checkbox" name="hobby" value="run" v-model="hobby" /> 跑步
			<input type="checkbox" name="hobby" value="game" v-model="hobby" /> 玩游戏
			<input type="checkbox" name="hobby" value="sing" v-model="hobby" /> 唱歌
			<br>
			学历：
			<select name="edu" v-model="edu">
				<option value="1">小学</option>
				<option value="2">中学</option>
				<option value="3">大学</option>
			</select>
			<textarea rows="" cols="" v-model="desc">

			</textarea>
			<input type="submit" value="提交" />
		</form>
	</div>
</body>

new Vue({
	el: '#box',
	data: {
		username: '',
		password: '',
		// 填入radio中的value值，该radio就会被默认选中
		gender: '1',
		// 多选框的选项以数组形式存储在data中
		// 如果需要默认选中一些选项，在数组中存储选项对应的value值
		hobby: [],
		edu: '1',
		desc: '个人描述'
	},
	methods: {
		submitData: function() {
			var jsonObj = {
				'username': this.username,
				'password': this.password,
				'gender': this.gender,
				'hobby': this.hobby,
				'edu': this.edu,
				'desc': this.desc
			}
		}
	}
})

我们也可以将表单中的数据直接收集到JSON对象中

<body>
	<div id="box">
		<form action="123.html" method="get" @submit.prevent="submitData()">
		<!-- v-model.trim:去除用户输入的首尾空白字符 -->
			用户名：<input type="text" name="username" required="required" placeholder="请输入用户名" maxlength="20" v-model.trim="formData.username" /><br>
			密码：<input type="password" name="password" required="required" v-model.trim="formData.password" /><br>
			<input type="submit" value="提交" />
		</form>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		formatData:{
			username:'',
			password:''
		}
	},
	methods:{
		submitData: function() {

		}
	}
})

对于收集来的数据我们在提交时将这些数据发送给后台，这些操作我们在submitData函数中完成，如何发送Ajax请求在之后讲解

计算属性

在computed中方法包含getter和setter两个方法
getter方法用于获取计算过后的数据
setter方法用于监听函数返回值的变化

<div id="box">
	姓名：<input type="text" name="name" id="name" placeholder="请输入姓名" v-model="name"/>
	年龄：<input type="text" name="age" id="age" placeholder="请输入年龄" v-model="age"/>
	个人信息：<input type="text" name="msg" id="msg" v-model="msgShow"/><br>
	<!-- 也可以过通过{{}}来获取msgShow函数中getter方法的返回值 -->
	{{msgShow}}
</div>

new Vue({
	el:'#box',
	data:{
		name:'',
		age:''
	},
	computed:{
		msgShow:{
			// 初始化时，get函数会被调用一次
			// 当name和age的数据变化时，get函数就会被调用
			get:function() {
				return this.name+' '+this.age;
			},
			set:function(newValue){
				// 如果不进行处理，name和age数据的值不会改变
				console.log(newValue+"set");
				// 为了保证数据的统一，需要同步改变name和age的数据
				var msgs=newValue.split(' ');
				this.name=msgs[0];
				this.age=msgs[1];
			}
		}
	}
})
侦听器

watch:侦听属性值的变化

<body>
	<div id="box">
		姓名：<input type="text" name="name" id="name" placeholder="请输入姓名" v-model="name"/>
		年龄：<input type="text" name="age" id="age" placeholder="请输入年龄" v-model="age"/>
		个人信息：<input type="text" name="msg" id="msg" v-model="msg"/><br>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		name:'',
		age:'',
		msg:''
	},
	watch:{
		// 当属性值改变时，函数执行，可以获取新值和旧值
		name:function(newValue,oldValue){
			this.msg=newValue+" "+this.age;
		},
		age:function(newValue){
			this.msg=this.name+" "+this.age;
		},
		msg:function(newValue){
			var msgs=newValue.split(' ');
			this.name=msgs[0];
			this.age=msgs[1];
		}
	}
});
绑定class选择器的样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.aClass{
				background: yellow;
			}
			.bClass{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 绑定选择器时使用英文单引号将选择器名称包裹起来，否则会去找Vue实例中data中的数据 -->
			<!-- 绑定一个类选择器样式 -->
			<h1 :class="'aClass'">标题1</h1>
			<!-- 绑定多个类选择器样式，使用数组来存储选择器名称 -->
			<h1 :class="['aClass','bClass']">标题2</h1>
			<!-- 通过绑定data中的数据来绑定class选择器的样式，注意不需要用单引号包裹 -->
			<h1 :class="[backgroundClass,fontSizeClass]">标题3</h1>
		</div>
		
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				backgroundClass:'aClass',
				fontSizeClass:'bClass'
			}
		})
	</script>
</html>
绑定style属性
<body>
	<div id="box">
		<!-- font-size需要改写成fontSize -->
		<h1 :style="{'color':'red','fontSize':'80px','fontStyle':'italic'}">标题1</h1>
		<!-- 绑定Vue中的属性数据 -->
		<h1 :style="{'color':a,'fontSize':b}" @click="changeStyle(flag=!flag)">标题2</h1>
		<!-- 绑定一个或多个JSON对象中的属性 -->
		<h1 :style="myJson2">标题3</h1>
		<h1 :style="[myJson1,myJson2]">标题4</h1>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		a:'blue',
		b:'50px',
		myJson1:{
			'color':'yellow'
		},
		myJson2:{
			'fontSize':'120px'
		}
	},
	methods:{
		changeStyle(flag){
			if(flag){
				this.a='gray';
				this.b='200px';
			}else{
				this.a='pink';
				this.b='100px';
			}
		}
	}
})
按键修饰符
<body>
	<div id="box">
		<!-- 可以通过按键的键码或者别名来监听该按键是否被按下 -->
		<input type="text" @keypress.enter="show1()"/>
		<input type="text" @keypress.97="show2()" />
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		flag:true
	},
	methods:{
		show1(){
			alert("Enter键被按下了");
		},
		show2(){
			alert("\"a\"被输入了");
		}
	}
})
元素的显示与隐藏
<body>
	<div id="box">
		<!-- v-show:底层通过display属性来操作,值为true则元素显示，值为false则元素不显示 -->
		<div id="div1" v-show="isShow">
			
		</div>
		<!-- 通过show函数改变isShow的值 -->
		<button type="button" @click="show()">隐藏/显示</button>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		isShow:true
	},
	methods:{
		show(){
			this.isShow=!this.isShow;
		}
	}
})
条件渲染
#div1{
	height: 200px;
	width: 200px;
	background: red;
}
#div2{
	height: 200px;
	width: 200px;
	background: yellow;
}

<body>
	<div id="box">
		<!-- v-if:底层通过反复删除添加元素 -->
		<!-- 如果isShow为true显示div1，为false显示div2 -->
		<div id="div1" v-if="isShow">
			
		</div>
		<div id="div2" v-else="">
			
		</div>
		<button type="button" @click="show()">隐藏/显示</button>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		isShow:true
	},
	methods:{
		show(){
			this.isShow=!this.isShow;
		}
	}
})

多重条件

<body>
	<div id="box">
		<!-- v-show:不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换
			 v-if:它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
			 v-if有更高的切换开销，而v-show有更高的初始渲染开销。
			 因此，如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用v-if较好。-->
		<input type="text" placeholder="请输入成绩" v-model="score"/>
		<h1 v-if="score>=0&&score<60">不及格</h1>
		<h1 v-else-if="score>=60&&score<75">及格</h1>
		<h1 v-else-if="score>=75&&score<90">良好</h1>
		<h1 v-else-if="score>=90&&score<100">优秀</h1>
		<h1 v-else>成绩不合法</h1>
		
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		score:0
	},
})
列表渲染
<body>
	<div id="box">
		<ul>
		<!-- 用v-for指令基于一个数组来渲染一个列表 -->
		<!-- 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性 -->
		<!-- 参数:item:被迭代的数组的元素
				  key:如果被迭代的为键值对集合,则第二个参数为当前元素的键名
				  index:当前元素的索引-->
			<!-- 参数和key和属性key没有关系 -->
			<li v-for="(ele,index) in arr" :key="index">
				{{index}}:{{ele}}
			</li>
		</ul>
		<ol>
			<li v-for="(value,key,index) in myJson" :key="key">
				{{key}}...{{value}}...{{index}}
			</li>
		</ol>
		<ul>
			<li v-for="(jsonObj,index) in jsonArr" :key="index">
				{{jsonObj.username}}...{{jsonObj.password}}
			</li>
		</ul>
	</div>
</body>

new Vue({
	el: '#box',
	data: {
		arr: [10, 20, 30, 40, 50, 60],
		myJson: {
			'username': 'abc',
			'password': '123'
		},
		jsonArr: [{
				'username': 'aaa',
				'password': '111'
			},
			{
				'username': 'bbb',
				'password': '222'
			},
			{
				'username': 'ccc',
				'password': '333'
			}
		]
	}
})

数组更新检测
变异方法：Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

<body>
	<div id="box">
		<ul>
			<li v-for="(jsonObj,index) in jsonArr" :key="index">
				{{jsonObj.username}}...{{jsonObj.password}}
				<button type="button" @click="updateData(index)">修改数据</button>
			</li>
		</ul>
	</div>
</body>

new Vue({
	el: '#box',
	data: {
		jsonArr: [{
				'username': 'aaa',
				'password': '111'
			},
			{
				'username': 'bbb',
				'password': '222'
			},
			{
				'username': 'ccc',
				'password': '333'
			}
		]
	},
	methods: {
		updateData: function(index) {
			var jsonObj = {
				'username': 'ddd',
				'password': '123'
			}
			this.jsonArr[index]=jsonObj;
			// 如果不调用变异方法，视图数据将不会更新
			this.jsonArr.reverse();
			this.jsonArr.reverse();
		}
	}
})
过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
格式化文字
将小写字母改为大写字母

<body>
	<div id="box">
	<!-- 格式: 
		在双花括号中:{{ message | capitalize }}
		在v-bind中:<div v-bind:id="rawId | formatId"></div> 
		使用过滤器时传递参数:{{ message | capitalize(参数) }}
		使用多个过滤器:{{ message | capitalize1 | capitalize2 }}-->
		<h1>{{msg|toUpper}}</h1>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg:'abcde'
	},
	filters:{
	// value(原数据)可作为参数传入函数
		toUpper:function(value){	
			return value.toUpperCase();
		}
	}
});

形参默认值

// 如果调用函数时没有传入参数，参数默认值为'abc'
function(value='abc'){
	
}
v-clock

这个指令保持在元素上直到关联实例结束编译

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-clock]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 当元素未被渲染时，页面上展示的是{{msg}}，不利于用户体验 -->
			<!-- 当元素未被渲染时，h1的display为none，页面上就不会展示{{msg}}
			而当元素被渲染后，v-clock属性会消失，使用该属性的选择器设置的样式就会失效 -->
			<h1 v-clock>{{msg}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				msg:'abcde'
			},
			// 延迟数据的加载,用于模拟现象
			beforeCreate:function(){
				alert("abc");
			}
		})
	</script>
</html>

生命周期函数

注意:在生命周期函数中，不要使用ES6的箭头函数

Vue实例的生命周期:
在这里插入图片描述

使用$mount(el)函数挂载元素

var vm=new Vue({
	data:{
		
	},
})
vm.$mount('#box');

案例1：
页面元素每秒在显示和隐藏间切换一次，并提供一个按钮停止切换

<body>
	<div id="box">
		<h1 v-show="flag">闪烁</h1>
		<button type="button" @click="stop()">stop</button>
	</div>
</body>

var vm=new Vue({
	el:'#box',
	data:{
		flag:true,
		timeID:0
	},
	methods:{
		stop:function(){
			// 销毁Vue对象
			this.$destroy();
		}
	},
	// 等待页面元素挂载完毕，调用mounted函数
	mounted:function(){
		// 不能在setInterval方法的参数函数中取flag的值，因为此时的this不代表Vue对象
		var th=this;	//获取Vue对象
		this.timeID=window.setInterval(function(){
			console.log("定时器正在运行");	//通过在控制台打印数据证明定时器在运行
			th.flag=!th.flag;
		},1000);
	},
	// Vue对象销毁之前，调用beforeDestroy函数
	// 在销毁Vue对象时，需要销毁定时器，否则定时器还在继续运行
	beforeDestroy:function(){
		clearInterval(this.timeID);
	}
});

所有生命周期函数

<body>
	<div id="box">
		{{msg}}
		<button type="button" @click="destroyVue()">销毁</button>
		<button type="button" @click="updateMsg()">更新</button>
	</div>
</body>

new Vue({
	el:'#box',
	data:{
		msg:'数据...'
	},
	methods:{
		updateMsg:function(){
			this.msg="更新后的数据...";
		},
		destroyVue:function(){
			this.$destroy();
		}
	},
	beforeCreate:function(){
		// beforeCreate...
		// 数据:undefined
		// 渲染元素:undefined
		console.log("beforeCreate...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	created:function(){
		// created...
		// 数据:数据...
		// 渲染元素:undefined
		console.log("created...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	beforeMount:function(){
		// beforeMount...
		// 数据:数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("beforeMount...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	mounted:function(){
		// mounted...
		// 数据:数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("mounted...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	beforeUpdate:function(){
		// beforeUpdate...
		// 数据:更新后的数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("beforeUpdate...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	updated:function(){
		// updated...
		// 数据:更新后的数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("updated...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	beforeDestroy:function(){
		// beforeDestroy...
		// 数据:更新后的数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("beforeDestroy...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	},
	destroyed:function(){
		// destroyed...
		// 数据:更新后的数据...
		// 渲染元素:[object HTMLDivElement]
		console.log("destroyed...");
		console.log("数据:"+this.msg);
		console.log("渲染元素:"+this.$el);
	}
});
weixin_45919908
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue
03-06
vue
vueDevTools
07-04
vue、uniapp调试工具
Vue—什么是Vue，怎样配置和搭建Vue3项目
白洞，白色的明天在等着我们
02-14 837
Vue 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
vue学习笔记之什么是渐进式框架
老曹的博客
06-20 4082
大家都说不会vue就不是合格的前端开发人员，我其实也很想早点学习，只不过之前的基础不够扎实，如今终于可以安心地学习这门框架了。 首先先上官方网站，得先了解vue.js到底是一种什么样的框架，知己知彼方能百战不殆。 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易...
OpenFOAM波浪学习记录
JMwpxxx的博客
04-06 1348
在OpenFOAM/OpenFOAM-v2006/src/TurbulenceModels/turbulenceModels下创建所要添加的文件（这里以stabRAS为例）复制/OpenFOAM/OpenFOAM-v2006/src/TurbulenceModels/incompressible下的make文件夹到stabRAS下。将该文件复制到stabRAS下，然后更改为合适的文件名，这里更改为makeTurbModel.C。该用户发布了足够多的波浪算例，并分别讲解了各算例的相关设置，可供参考。
TypeScript-接口继承
lihui61357457的博客
05-10 921
详情可见 // 接口的继承 // TS中的接口和JS中的类一样是可以继承的 interface LengthInterface { length:number } interface WidthInterface { width:number } interface HeightInterface { height:number } interface RectInterface extends LengthInterface,WidthInterface,HeightInterfa
openfoam v8 波浪算例学习日记： 6.运行算例
yunoicy的博客
12-11 2641
算例运行 在setWave命令之后就是算例运行，Allrun中在运行求解器之前进行了域分解命令decomposePar来并行计算。 decomposePar读取system/decomposeParDict文件，内容如下： FoamFile { format ascii; class dictionary; location "system"; object decomposeParDict; } // * * * * * * * * *
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
Vue框架总结.pdf
04-03
Vue 中，可以通过方法创建一些全局的组件，或者局部的组件。但是，在实际 的 Vue 项目中，使用得更多的是单文件组件。 单文件组件 每一个以 .vue 为后缀的文件，都是一个组件，称为“单文件组件”。 单文件组件...
Vue登录页面
02-11
first_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
iOS UILabel的输出自适应高度设置
weixin_33958585的博客
07-28 73
.h文件#import <Foundation/Foundation.h>#import <UIKit/UIKit.h>@interface HeightWithString : NSObject//计算各种文字高度//参数1：文本 参数2：label的宽度 参数3：字体大小+(CGFloat)heightForTextLable:(NSString ...
【OpenFOAM】问题记录
ou_no的博客
05-31 1971
问题记录
Vue基础
qq_45142938的博客
02-15 717
Vue Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 指令：一种特殊的自定义行间属性。其作用就是当其表达式的值改变时相应地将某些行为应用到DOM上。在Vue中，指令一般以v-开头 常用指令： v-text：填充纯文本 v-html：填充HTML片段 v-pre：填充原始信息。不解析模板语法，保持原有内容 v-model：一般用于表单元素input，双向数据绑定 v-if：分支结构 v-else：分支结构 v-else-i
Vue详解
Zero摄氏度的博客
07-20 1279
Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（[SPA]）提供驱动。（百度百科）​后端为主的MVC基于AJAX带来的SPA时代单页面应用时代前端为主的MV*时代涌现大量的前端框架前后端指责很清晰：前端工作在浏览器端，后段工作在服务端。全端开发的复杂度可控部署相对
为什么说Vue是渐进式框架？
doomliu的博客
05-14 3981
渐进式 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 —— Vue官网介绍 什么是渐进式呢？ 简单地说，渐进式的概念是分层设计，每层可选，不同层可以灵活接入其他方案架构模式。 举个例子，我们要买一台电脑，店家给我们提供了一个IBM。 官方可能会提供windows作为可选，我们也可以在电脑上安装我们自己喜欢的Ubuntu。 装完系统后，官方可能还提供了一系列的“装机必备”
Vue常见问题总结
Wang_MengHan的博客
10-29 1004
1、active-class是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：
vue系列基础篇（一）
weixin_34336292的博客
08-29 162
Vue基础篇 Vue是什么? vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue环境搭建 这里我们引用官方推荐的开发库，下面是一个基础的vue开发环境。 &l...
Vue基础（一）
mo_2417909243的博客
11-02 794
Vue简介            Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层，不仅易于上手，还便于与第三方库和既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单...
vue组件精讲.docx
最新发布
07-14
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值