Vue教程

Vue安装与使用

1.使用cdn

<script src="https://unpkg.com/vue/dist/vue.js"></script>
or
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

2.官网下载
进入英文官网
在这里插入图片描述

  • 第一个为开发版本，包含完整的警告和调试模式
  • 第二个为生产版本，压缩了代码，删除了警告

根据自己的需求下载合适的版本，需要注意的是中文的官网点击下载出现的是源码
在html文件中用script标签直接引入Vue就可使用

Vue起步

Vue基本结构

每个 Vue 应用都需要通过实例化 Vue 来实现

var vm = new Vue()

Vue构造器基本的参数

参数含义
el表示当前new的这个vue的实例，即要控制哪个区域
data用于定义属性，当属性改变时，html的内容也发生改变，不需要手动操作DOM元素
methods用于定义函数

html代码

<div id="app">
	<p>{{msg}}</p>
	<p>{{show()}}</p>
</div>

js代码

var vm=new Vue({
	el:"#app",
	data:{
		msg:'Hello'
	},
	methods:{
		show:function(){
			return 'World'
		}
	}	
})

输出结果：
在这里插入图片描述

Vue基本指令

{{ }}和v-cloak

{{ }}插值表达式的作用：用于输出对象属性和函数返回值
v-cloak作用：解决插值表达式闪烁的问题，即在为了防止出现Vue的变量名，在DOM染完成后才显示
用法：
html:
html <p v-cloak>{{msg}}</p>
css
css [v-cloak]{ display: none; }

v-text 和 v-html

默认的v-text是没有闪烁的，和插值表达式的不同是v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，而不会把整个元素的内容清空

	<p v-text="msg">haha</p>

输出结果：Hello
使用 v-html 指令用于输出 html 代码

v-bind 和 v-on

v-bind用于绑定属性，简写 :
v-on用于绑定方法，简写 @
代码示例

  <div id="app">
  		<input type="text" v-bind:value="val"/>
  		<br/>
  		<span v-on:mouseover="show()">鼠标移到这</span>
  	</div>
  <script>
  	var vm = new Vue({
  		el: "#app",
  		data: {
  			val:"这里绑定了输入框的值"
  		},
  		methods: {
  			show: function() {
  				alert("移到这了！")
  			}
  		}
  	})
  </script>

输出结果：
在这里插入图片描述

v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">
  	<p>{{msg}}</p>
  	<input v-model="msg">
</div>
<script>
  	var vm = new Vue({
  		el: "#app",
  		data: {
  			msg: "绑定"
  		}
  	})
  </script>

查看更多示例

Vue绑定样式

例:

.color{
	color: #ffffff;
}
.bkcolor{
	background-color: #ff0000;

.size{
	font-size: 20px;
}

:class为v-bind:class的简写
1.使用数组绑定

<div id="app">
	<h1 :class="['color','bkcolor','size']">这是一个用Vue绑定样式的标题</h1>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		//也可将数组的内容写在data域里
	})
</script>

结果：
在这里插入图片描述
2.数组中使用三元表达式或者镶嵌对象

<div id="app">
	<h1 :class="[flag?'color':'','bkcolor','size']">这是一个用Vue绑定样式的标题1</h1>
	<h1 :class="['color','bkcolor',{'size':flag}]">这是一个用Vue绑定样式的标题2</h1>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			flag:false
			//也可将数组内容写在data区域
		}
	})
</script>

在这里插入图片描述
3.使用对象

<div id="app">
	<h1 :class="h_class">这是一个用Vue绑定样式的标题</h1>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			h_class:{
				color:true,
				bkcolor:true,
				size:false
			}
		}
	})
</script>

在这里插入图片描述
4.使用:style(v-bind:style)内联样式

Vue循环指令

循环使用 v-for 指令
1.迭代数组

<div id="app">
	<span v-for="item in arr">{{item}}</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			arr:[1,2,3,4,5]
		}
	})
</script>

结果：
在这里插入图片描述

<div id="app">
	<span v-for="item,i in arr">{{i}}=>{{item}}&nbsp;</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			arr:[1,2,3,4,5]
		}
	})
</script>

结果：
在这里插入图片描述
2.迭代对象中的属性

<div id="app">
	<span v-for="item in arr">{{item.id}}=>{{item.name}}&nbsp;</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			arr:[
				{id:1,name:'ls1'},
				{id:2,name:'ls2'},
				{id:2,name:'ls3'}
			]
		}
	})
</script>

在这里插入图片描述

<div id="app">
	<span v-for="item,i in arr">{{i}}=>{{item.id}}=>{{item.name}}&nbsp;</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			arr:[
				{id:1,name:'ls1'},
				{id:2,name:'ls2'},
				{id:2,name:'ls3'}
			]
		}
	})
</script>

在这里插入图片描述

<div id="app">
	<span v-for="val,key in obj">{{key}}=>{{val}}&nbsp;</span>
	<!--可以有第三个值，索引-->
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			obj:{
				id:123456,
				name:"zs",
				sex:"M"
			}
		}
	})
</script>

在这里插入图片描述
3.迭代数字

迭代数字从1开始

<div id="app">
	<span v-for="count in 5">{{count}}</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{}
	})
</script>

在这里插入图片描述

Vue条件语句

v-if：每次都会重新创建或者删除元素
v-show：不会重新进行对DOM删除或者创建，只是切换了元素的display:none的属性
v-if有更高的切换消耗v-show有更高的初始渲染消耗，因此如果需要频繁切换v-show较好，如果运行条件不大可能改变v-if更好

<div id="app">
	<span v-if="hasinfor">您已登陆</span>
	<!--v-else-if用于多重判断-->
	<span v-else="hasinfor">请登录登陆</span>
	<span v-show="hasinfor">您已登陆</span>
	<span v-show="!hasinfor">请登录登陆</span>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			hasinfor:false
		}
	})
</script>

在这里插入图片描述

Vue过滤器

可被用作一些常见文本格式化，可在mustachc插值和v-bind表达式
过滤器调用格式

{{name|过滤器名称}}

全局过滤器的使用

Vue.filter('过滤器名称',function(){})

私有过滤器的使用

filters:{
	过滤器名称:function(){}
}

例子：

<div id="app">
	<p>{{msg|msgFormat}}</p>
</div>
<script>
	Vue.filter('msgFormat',function(msg){
		return msg.replace('邪恶','单纯')
	})
	var vm = new Vue({
		el: "#app",
		data:{
			msg:"他是一个邪恶的男孩"
		}
	})
</script>
/*****私有过滤器的使用方法
var vm = new Vue({
	el: "#app",
	data:{
		msg:"他是一个邪恶的男孩"
	},
	filters:{
		msgFormat:function(msg){
			return msg.replace('邪恶','单纯')
		}
	}
})
*****/

输出：他是一个单纯的男孩

Vue按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!--在输入框绑定回车事件submit-->
<input v-on:keyup.enter="submit">

Vue 提供了绝大多数常用的按键码的别名

  • enter
  • tab
  • delete (捕获“删除”和“退格”键)
  • esc
  • space
  • up
  • down
  • left
  • right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名

// 可以使用v-on:keyup.f1,112为f1的键码
Vue.config.keyCodes.f1 = 112

Vue自定义指令

对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

自定义指令使用方法：

v-指令名称

全局自定义指令的注册

Vue.directive('指令名称',{
	//第二个参数为一个对象，包括不同的钩子函数，常用bind,inserted,update
	bind:function(){},
	inserted:function(){},
	update:function(){}
})

局部自定义指令的注册

directives:{
	指令名称:{
		bind:function(){},
		inserted:function(){},
		update:function(){}
	}	
}

例子：

<div id="app">
	<p v-color>测试文字</p>
</div>
<script>
	Vue.directive('color',{
	bind:function(el){
		el.style.color="red";//el是直接对dom元素进行操作
		}
	})
</script>
/*****私有指令的使用方法
var vm = new Vue({
	el: "#app",	
	data:{},
	directives:{
		color:{
			bind:function(el){
				el.style.color="red";
			}
		}
	}
})
*****/

钩子函数

函数名称作用
bind只调用一次，指令第一次绑定到元素时调用
inserted被绑定元素插入父节点时调用
update所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind只调用一次，指令与元素解绑时调用

钩子函数参数- el：指令所绑定的元素，可以用来直接操作 DOM 。

  • binding：一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
<div id="app" v-demo:foo.a.b="message"></div>
<script>
	Vue.directive('demo', {
		bind: function(el, binding){
			el.innerHTML =
				'name: ' + binding.name + '<br>' +
				'value: ' + binding.value + '<br>' +
				'expression: ' + binding.expression + '<br>' +
				'argument: ' + binding.arg + '<br>' +
				'modifiers: ' + JSON.stringify(binding.modifiers) + '<br>' 
			}
	})
	var vm = new Vue({
		el: "#app",
		data: {
			message:"hello"
		},
	})
</script>

输出结果：
在这里插入图片描述

Vue监听属性

可以通过 watch 来响应数据的变化
格式：

watch:{
		监听的属性:function (newvalue,oldvalue) {}		
}

例子:

<div id="app">
	请输入姓：<input type="text" v-model="fistname" /><br />
	请输入名：<input type="text" v-model="lastname" /><br />
	姓名：<span>{{fullname}}</span>
	<p>{{log}}</p>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{
			fistname:'',
			lastname:'',
			fullname:'',
			log:''
		},
		watch:{
			'fistname':function () {
				this.fullname=this.fistname+this.lastname;
			},
			'lastname':function () {
				this.fullname=this.fistname+this.lastname;
			},
			'fullname':function (newname,oldname) {
				this.log='您的姓名由'+oldname+'改成'+newname;
			},
		}
	})
</script>

Vue计算属性

计算属性关键词: computed
计算属性的本质就是一个方法，只不过，在使用这些计算属性的时候，是把他们的名称直接当作属性使用，并不会当作方法
可以使用 methods 来替代 computed，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但不希望缓存，可以使用 methods 属性

var vue = new Vue({
	el: '#app',
	computed:{
	}
})

Vue生命周期

生命周期钩子=生命周期函数=生命周期事件

图示：

在这里插入图片描述

钩子函数

生命周期钩子详情应用
beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用，不能访问到data以及methods等初始化非响应式变量
created实例已经创建完成之后被调用。可访问data以及methods等，未挂载DOM,不能访问$el简单的ajax请求以及页面的初始化
beforeMount在挂载开始之前被调用，可访问到$el
mounted挂载到实例上去之后调用该钩子常用于获取VNode信息和操作，ajax请求
beforeUpdate数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前更新之前访问现有的DOM，手动移除已添加的事件监听器
updated虚拟 DOM 重新渲染和打补丁之后调用避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue ajax

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

安装方法

1.使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用npm

$ npm install axios

get方法

示例：

<div id="app"></div>
<script>
	var vue = new Vue({
		el: '#app',
		mounted() {
			axios
				.get(url)//url地址
				.then(function(response){
					console.log(response.data);
				})//.then为请求数据成功后的函数
				.catch(function(error) {
					console.log(error);
				});//.catch为请求数据失败后的函数
		}
	})
</script>

get传参

1.在url上拼接参数
axios
	.get(url+'?key1=value1&key2=value2')
2.使用params传参
axios
	.get(url,{
		params:{
			key1:value1,
			key2:value2
		}
	})

post方法

<div id="app"></div>
<script>
	var vue = new Vue({
		el: '#app',
		mounted() {
			axios
				.post(url)//url地址
				.then(function(response){
					console.log(response.data);
				})//.then为请求数据成功后的函数
				.catch(function(error) {
					console.log(error);
				});//.catch为请求数据失败后的函数
		}
	})
</script>

post传参

axios
	.post(url,{
		key1:value1,//第一个参数
		key2:value2//第二个参数
	})

axios API

可以通过向 axios 传递相关配置来创建请求

<script>
	var vue = new Vue({
		el: '#app',
		mounted() {
			axios({
					method: 'get',
					url:url,
					params:{
						key:value
					}
				})//config配置，具体见下文
				.then(function(response){
					console.log(response.data);
				})//.then为请求数据成功后的函数
				.catch(function(error) {
					console.log(error);
				});//.catch为请求数据失败后的函数
		}
	})
</script>

请求方法别名
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

例如：

<div id="app"></div>
<script>
	var vue = new Vue({
		el: '#app',
		mounted() {
			axios
				.get(url,{
					//此处对config里的参数进行配置
					//与请求一起发送的 URL 参数
					params:{
						key=value
					},
					//指定请求超时的毫秒数
					timeout:1000,
				})//url地址
				.then(function(response){
					console.log(response.data);
				})//.then为请求数据成功后的函数
				.catch(function(error) {
					console.log(error);
				});//.catch为请求数据失败后的函数
		}
	})
</script>

axios响应结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

默认配置
1.默认全局配置

axios.defaults.baseURL = 主目录url;

2.自定义的实例默认设置

var instance = axios.create({
		baseURL: 主目录url,
		timeout:1000
	});
	instance
		.get('/下一级目录')
		
//修改
instance.defaults.baseURL = url;

config配置

点击此处

Vue动画

语法格式

<transtion>
	<!--变化的DOM-->
</transtion>

过渡的类名

即用相应类名的css控制变化前后以及变化的时长
在这里插入图片描述

类名作用
v-enter定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
v-enter-to2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

***如果transition没有指定name属性的值，默认类名为上表的类名，即v-(如v-enter)，如果指定了name的值，则类名为：name的值-(如name=“fade”,类名为fade-enter)
例子：
css

/*默认的transition*/
.v-enter,.v-leave-to{
	opacity: 0;
	transform: translateX(100px);
}
.v-enter-active,.v-leave-active{
	transition: all 0.8s linear;
}
/*指定name属性的transition*/
.fade-enter,.fade-leave-to{
	opacity: 0;
	transform: translateY(100px);
}
.fade-enter-active,.fade-leave-active{
	transition: all 1s linear;
}

html

<div id="app">
	<div>
		<input type="button" value="h1变化" @click="flag1=!flag1"/>
		<transition>
			<h1 v-if="flag1">这是一个可以变化的h1</h1>
		</transtion>
	</div>
	<div>
		<input type="button" value="h2变化" @click="flag2=!flag2"/>
		<transition name="fade">
		<h2 v-if="flag2">这是一个可以变化的h2</h2>
		</transition>
	</div>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{
			flag1:false,
			flag2:false
		}
	})
</script>

自定义过渡类名

自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

:duration用于设置过渡动画时间

<transition :duration="800">...</transition>
<transition :duration="{ enter: 600, leave: 1000 }">...</transition>

例如：

<!--前面引入Animate.css动画库-->
<div id="app">
	<input type="button" value="h1变化" @click="show=!show"/>
	<transition 
	enter-active-class="bounceIn"
	leave-active-class="bounceOut"
	:duration="1000"
	>
		<h1 v-if="show">这是一个使用自定义动画的h1</h1>
	</transtion>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{
			show:false,
		}
	})
</script>

JavaScript 钩子

html

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
 
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>
函数作用
beforeEnter(el)el，表示要执行动画的DOM元素，是个原生的js对象，动画入场之前
function(el, done)动画开始之后的样子，在这可以设置结束状态，done的起始就是afterEnter，done为afterEnter的引用
afterEnter(el)动画完成之后调用

**leave函数类似
***在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
***推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响

小球移动例子：

<div id="app">
	<input type="button" value="jump" @click="show=!show"/>
	<transition 
	@before-enter="beforeEnter"
	@enter="enter"
	@after-enter="afterEnter"
	>
		<div v-if="show" style="width: 20px;height: 20px;border-radius: 50%;background: red;"></div>
	</transtion>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{
			show:false,
		},
		methods:{
			beforeEnter:function(el){
				el.style.transform="translate(0,0)";
			},
			enter:function(el,done){
				el.offsetWidth;
				//可以认为el.offsetWidth会强制动画刷新，不加没动画
				el.style.transform="translate(150px,450px)";
				el.style.transition="all 1s ease";
				done();
			},
			afterEnter:function(el){
				this.show=!this.show;
			}
		}
	})
</script>

列表过渡

1.在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，则使用transition-group包裹
2.不同于 transition，transition-group会以一个真实元素呈现，默认为span，可以通过 tag 特性更换为其他元素
3.内部元素总是需要提供唯一的 key 属性值

例子：随机在数组位置中插入一个数字以及随机减少一个数字
css

.num{
	margin-right: 10px;
	display: inline-block;
}
.num-enter, .num-leave-to{
	opacity: 0;
	transform: translateY(20px);
}
.num-enter-active, .num-leave-active {
	transition: all 1s linear;
}

html

<div id="app">
	<input type="button" value="Add" @click="add"/>
	<input type="button" value="remove" @click="remove"/>
	<transition-group name="num" tag="div">
		<span class="num" v-for="item in arr" v-bind:key="item">{{item}}</span>
	</transition-group>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{
			arr:[1,2,3,4,5,6,7,8,9],
			nextnum:10//为了使key唯一,让增加的数字每次都不同,在9之后
		},
		methods:{
			add:function(){
				var index=Math.floor(Math.random() * this.arr.length);
				return this.arr.splice(index,0,this.nextnum++);
			},
			remove:function(){
				var index=Math.floor(Math.random() * this.arr.length);
				return this.arr.splice(index,1);
			}
		}
	})
</script>

上述例子中，添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，为了解决这个问题，则添加下面代码

/*这两个类需要配合使用，才能让其他元素有动画*/
.num-move{
	transition: all 1s linear;
}
.num-leave-active{
	position: absolute;
}

过渡模式

transition的默认行为是进入和离开同时发生，可以通过vue提供的过渡模式让进入和离开分别进行
格式：

<transitio mode="out-in">
</transition>
模式方式
in-out新元素先进行过渡，完成之后当前元素过渡离开
out-in当前元素先进行过渡，完成之后新元素过渡进入

组件过渡

了解组件知识点击此处直接跳转

Vue组件

组件可以扩展 HTML 元素，封装可重用的代码。组件化是从UI的角度进行划分，前端的组件化，方便UI组件的重用

全局组件注册

格式：

Vue.component(tagName, options)

调用组件的方式

<tagName></tagName>

如果为驼峰命名，则采用将大写改小写，两个单词用-分离
例：

<div id="app">
	<com></com>
	<my-com></my-com>
</div>
<script>
	Vue.component('com',{
		template:"<h1>这是由vue创建的第一个全局组件</h1>",
		//通过template属性指定要展示的HTML结构
	})
	Vue.component('myCom',{
		template:"<h1>这是由vue创建的第二个全局组件</h1>",
		//调用采用my-com的标签
	})
	var vue = new Vue({
		el: '#app',
		data:{}
	})
</script>

**需要注意的是，template属性指向的模板内容必须有且只有唯一的根元素

局部组件注册

格式：

components:{
	tagName: options
}

例子

<div id="app">
	<my-com2></my-com2>
</div>
<script>
	var vue = new Vue({
		el: '#app',
		data:{},
		components:{
			myCom2:{
				template:"<h1>这是由vue创建的私有组件</h1>"
			}
		}
	})
</script>

外部定义

通过template标签可在外面定义的组件结构后调用

<template id="t_com">
	<h1>这是通过template元素在外面定义的组件结构</h1>
</template>
<div id="app">
	<t-com></t-com>
</div>
<script>
	Vue.component('tCom',{
		template:'#t_com'
	})
	var vue = new Vue({
		el: '#app',
		data:{}
	})
</script>

组件的数据和方法

1.组件可以有自己的数据，但是组件中的数据必须为一个方法
2.在方法的内部，必须返回一个对象
3.调用方式和实例中的data一样
例子：计数器

<template id="counter">
	<div>
		<input type="button" value="+" @click="add"/>
		<p>{{count}}</p>
	</div>
</template>
<div id="app">
	<counter></counter>
</div>
<script>
	Vue.component('counter',{
		template:'#counter',
		data:function(){
			return {
				count:0
			}
		},
		methods:{
			add:function(){
				this.count++
			}
		}
	})
	var vue = new Vue({
		el: '#app',
		data:{},
	})
</script>

父组件向子组件传值

使用v-bind 动态绑定 props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件，props值为只读

<div id="app">
	<com v-bind:parentmsg="msg"></com>
	<!--parentmsg通过props传递到父组件中被调用，传递的值为msg-->
</div>
<script>
	Vue.component('com',{
		template:"<h1>这是子组件and{{parentmsg}}</h1>",
		props:['parentmsg'],
		//只有通过props数组,子组件才可以调用传递过来的值
	})
	var vue = new Vue({
		el: '#app',
		data:{
			msg:"这是父组件的数据"
		}
	})
</script>

子组件向父组件传值

使用 v-on 绑定自定义事件，使用 $emit(eventName) 触发事件

<template id="com">
	<input type="button" value="点击子组件向父组件传值" @click="myclick"/>
</template>
<div id="app">
	<!--通过v-on绑定子组件中触发的函数func,交给父组件中的show方法来处理，参数为子组件传递的参数-->
	<com v-on:func="show"></com>
</div>
<script>
	//添加子组件的点击事件为myclick,通过myclick触发函数,后面跟要传递的值
	Vue.component('com',{
		template:"#com",
		data(){
			return{
				childmsg:"这是子组件的值"
			}
		},
		methods:{
			myclick:function(){
				this.$emit('func',this.childmsg)
			}
		}
	})
	var vue = new Vue({
		el: '#app',
		methods:{
			show:function(data){
				console.log(data)
			}
		}
	})
</script>

组件切换

1.使用v-if/v-else进行显示和隐藏

<div id="app">
	<a href="" @click.prevent="flag=true">登陆</a>
	<a href="" @click.prevent="flag=false">注册</a>
	<!--click.prevent阻止默认事件-->
	<login v-if="flag"></login>
	<register v-else></register>
</div>
<script>
	Vue.component('login',{
		template:"<h3>登陆组件</h3>"
	})
	Vue.component('register',{
		template:"<h3>注册组件</h3>"
	})
	var vue = new Vue({
		el: '#app',
		data:{
			flag:true
		},
	})
</script>

2.使用component来展示对应名称的组件，:is属性可以用来指定展示的组件名称，类型为字符串，所以用’ ’

<div id="app">
	<a href="" @click.prevent="cname='login'">登陆</a>
	<a href="" @click.prevent="cname='register'">注册</a>
	<!--click.prevent阻止默认事件-->
	<component :is="cname"></component>
</div>
<script>
	Vue.component('login',{
		template:"<h3>登陆组件</h3>"
	})
	Vue.component('register',{
		template:"<h3>注册组件</h3>"
	})
	var vue = new Vue({
		el: '#app',
		data:{
			cname:'login'
		},
	})
</script>

组件过渡

多个组件过渡不需要使用key属性
例子：
css

.v-enter,.v-leave-to{
	transform: translateY(20px);
	opacity: 0;
}
.v-enter-active,.v-leave-active{
	transition: all 0.5s linear;
}

html

<div id="app">
	<a href="" @click.prevent="cname='login'">登陆</a>
	<a href="" @click.prevent="cname='register'">注册</a>
	<!--click.prevent阻止默认事件-->
	<transition mode="out-in">
		<component :is="cname"></component>
	</transition>
</div>
<script>
	Vue.component('login',{
		template:"<h3>登陆组件</h3>"
	})
	Vue.component('register',{
		template:"<h3>注册组件</h3>"
	})
	var vue = new Vue({
		el: '#app',
		data:{
			cname:'login'
		},
	})
</script>

Vue路由

前端路由：主要通过URL中的hash(#号)来实现不同页面之间的切换，同时hash有个特点，http请求不包含hash相关的内容。这种通过hash改变来切换页面的方式称为前端路由

安装方法

1.使用cdn

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.使用npm

npm install vue-router

基本使用

1.创建一个路由对象，VueRouter

var routerobj=new VueRouter()

2.在路由对象里配置路由规则，routes，每个规则都是一个对象。里面包含两个必须属性
1)path，表示监听哪个路由地址。
2)component，表示路由是前面所匹配到的path，则component对应哪个组件，component必须是一个模板对象，不能是组件引用的名称。

var routerobj=new VueRouter({
	routes:[
		{path:路由地址,component:组件模板对象}
	]
})

3.将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示对应组件的变化

var vue = new Vue({
		el: '#app',
		router:routerobj
	})

4.router-view将路由规则匹配到的组件展示到页面

<router-view></router-view>

5.切换方式
1)a标签

<a href="#/路由地址"></a>

注意有#进行hash

2)router-link

<router-link to="/路由地址"></router-link>

例子

<div id="app">
	<router-link to="/login">登陆</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>
</div>
<script>
	var login={
		template:'<h1>登陆组件</h1>'
	}
	var register={
		template:'<h1>注册组件</h1>'
	}
	//创建一个路由对象
	var routerobj=new VueRouter({
		//配置路由规则
		routes:[
			//component必须是一个模板对象
			{path:'/',redirect:'/login'},//重定向，默认path为/login
			{path:'/login',component:login},
			{path:'/register',component:register}
		]
	})
	var vue = new Vue({
		el: '#app',
		router:routerobj
	})
</script>

点击默认URL和点击登陆时
在这里插入图片描述
点击注册时
在这里插入图片描述
注：可用redirect进行重定向，使默认的URL展示的指定路由地址

router-link设置

1.router-link默认渲染成a标签，如需要渲染成其他标签，则在标签内添加tag属性，指向设置的标签

<router-link to="/路由地址" tag="li"></router-link>

2.设置选中样式
1)默认选中路由标签的类名为router-link-active，只需修改这个类的样式，即可设置选中样式
2)在路由对象中添加linkActiveClass属性，设置对应的类

var routerobj=new VueRouter({
	routes:[],
	linkActiveClass:'myClass'
})

路由传参

1.query方式
不需要修改path属性，传参的格式为在连接地址后加?key=value，调用$router.query.key
2.params方式
在path属性后添加/:key，传参的格式为在连接地址后加/value，调用$router.params.key

<div id="app">
	<router-link to="/login?id=11&name=hhh">登陆</router-link>
	<router-link to="/register/11/hh">注册</router-link>
	<router-view></router-view>
</div>
<script>
	var login={
		template:'<h1>登陆组件<br/>id:{{$route.query.id}}<br/>name:{{$route.query.name}}</h1>'
	}
	var register={
		template:'<h1>注册组件<br/>id:{{$route.params.id}}<br/>name:{{$route.params.name}}</h1>'
	}
	var routerobj=new VueRouter({
		routes:[
			{path:'/login',component:login},
			{path:'/register/:id/:name',component:register}
		]
	})
	var vue = new Vue({
		el: '#app',
		router:routerobj
	})
</script>

路由的嵌套

在路由匹配规则中用children属性即可实现组件的嵌套

<!-- 用户组件acc里面包含登陆注册组件以及相应的显示 -->
<template id="acc">
	<div>
		<h1>这里是用户界面</h1>
		<!-- 包含父组件路径 -->
		<router-link to="/acc/login">登陆</router-link>
		<router-link to="/acc/register">注册</router-link>
		<router-view></router-view>
	</div>
</template>
<div id="app">
	<router-link to="/acc">用户界面</router-link>
	<router-view></router-view>
</div>
<script>
	var login={
		template:'<h1>登陆组件</h1>'
	}
	var register={
		template:'<h1>注册组件</h1>'
	}
	var acc={
		template:'#acc'
	}
	var routerobj=new VueRouter({
		routes:[
			{
				path:'/acc',
				component:acc,
				//不需要/,否则将以根目录开头
				children:[
					{path:'login',component:login},
					{path:'register',component:register}
				]
			}
		]
	})
	var vue = new Vue({
		el: '#app',
		router:routerobj
	})
</script>

在这里插入图片描述

命名视图

为了同级展示多个视图，则使用命名视图，在路由配置中，使用components配置多个路由视图，name属性对应 router-view的name属性对应components配置对象的名字，如果 router-view 没有设置名字，那么默认为 default

<div id="app">
	<router-view></router-view>
	<router-view name='a'></router-view>
	<router-view name='b'></router-view>
</div>
<script>
	var com1={
		template:'<h1>组件1</h1>'
	}
	var com2={
		template:'<h1>组件2</h1>'
	}
	var com3={
		template:'<h1>组件3</h1>'
	}
	var routerobj=new VueRouter({
		routes:[
			{
				path:'/',
				components:{
					default:com1,
					a:com2,
					b:com3
				}
			}
		]
	})
	var vue = new Vue({
		el: '#app',
		router:routerobj
	})
</script>
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区