Vue学习

Posted 2021-02-05 theorydance

Vue是组件化开发，组件的思想非常重要
	1、Vue组件：本质是可以复用的Vue实例，且带有一个名字，在代码上就是一个自定义的标签，组合组件组成应用
		因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项
		组件中的data必须是一个函数
		通常一个应用会以一颗嵌套的组件树的形式来组织
	
	组件之间传递数据：通过Prop向子组件传递数据，向父组件传递参数使用$emit发射事件
	
	2、Vue路由：
	将组件映射到路由，然后告诉Vue Router在哪里渲染它们
	
	3、SPA：单页面应用


常用指令等：
	1、v-once指令：一次性插值
	<span v-once>这个不会随着变化而改变{{msg}}</span>
	
	2、v-html指令，{{msg}}会将msg当作普通文本进行渲染，使用v-html就会当成html进行渲染
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	
	3、v-bind指令：将属性绑定到某个变量上，可以缩写（省略）
	<button v-bind:disabled="isButtonDisabled">Button</button>
	<button :disabled="isButtonDisabled">Button缩写形式</button>
	
	4、v-if指令
	<p v-if="seen">现在你看到我了</p>
	
	5、v-on指定，用于监听 DOM 事件，在这里参数是监听的事件名
	<a v-on:click="doSomething">不缩写形式</a>
	<a @click="doSomething">缩写形式</a>
	
	6、修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
	<form v-on:submit.prevent="onSubmit">...</form>
	.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
	
	7、v-for往往跟props进行联用