VUE常用命令总结

最新推荐文章于 2024-07-09 00:17:48 发布

lamwolf

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量261

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lamwolf/article/details/104797816

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

插值表达式
{{}}：当模型中的数据发生改变时，那么视图中的数据也对应发生改变。
v-text:将一个变量的值渲染到指定的元素中
v-html:可以输出真正的html元素
v-model:实现双向数据绑定
v-bind:绑定页面中元素的属性
v-if:作用：判断是否加载固定的内容，如果是真，就加载，如果是假，就不加载，语法：v-if=“判断表达式”
v-show:作用，判断是否显示内容语法：v-show=“判断表达式”
v-if和v-show的相同点和不同点：
（1）相同点：都可以实现对于一个元素的显示和隐藏操作
（2）不同点：v-if是将元素添加或移除dom树模型中，v-show只是在这个属性上加了display:none而已
（3）v-if有更高的切换操作，安全性高。v-show初始化消耗大一点。所以，如果需要频繁切换并对安全性没有要求时，可以使用v-show.如果在运行时，条件不可能改变的话，使用v-if更好一点
v-for:控制html元素中的循环，语法：v-for=“item in 集合”
v-on:对页面中的事件进行绑定
语法：v-on:事件类型=“监听器”
缩写：@事件类型=“监听器”
Vue-router路由：在一个系统中或APP中，由多个页面组成，通常会使用VUE中的组件来实现。那么当从一个页面跳到另一个页面时，通过url路径来实现，哪个url对应哪个页面，在VUE中是通过vue-router来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login'>登录</router-link>
			<router-link to='/register'>注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		var App=Vue.extend()
	    var register=Vue.extend({
			template:'<h2>注册</h2>'
		})
		
		var login=Vue.extend({
			template:'<h2>登录</h2>'
		})
		
		var VueRouter=new VueRouter({
			routes:[
				{path:'/',redirect:'/login'},
				{path:'/login',component:login},
				{path:'/register',component:register}
			]
		})
		
		new Vue({
			el:'#app',
			router:VueRouter
		})
	</script>
	
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login'>登录</router-link>
			<router-link to='/register/xiaoqi'>注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		var App=Vue.extend()
	    var register=Vue.extend({
			template:'<h2>注册:{{onname}}</h2>',
			data:function(){
				return{
					onname:''
				}
			},
			created:function(){
				this.onname=this.$route.params.uname
			}
		})
		
		var login=Vue.extend({
			template:'<h2>登录</h2>'
		})
		
		var VueRouter=new VueRouter({
			routes:[
				{path:'/',redirect:'/login'},
				{path:'/login',component:login},
				{path:'/register/:uname',component:register}
			]
		})
		
		new Vue({
			el:'#app',
			router:VueRouter
		})
	</script>
	
</html>