Vue之语法总结

前言
vue的语法小结，比较杂乱，尽量写的能看懂叭。

.vue文件结构

vue文件有三块内容：1、html代码块。2、script代码块。3、css代码块。
其中有几个重中之重的点要注意：

html代码块：在template标签下只能由一个根标签。
如下所示：

<template>
    <div>
			<!--所有内容都要在根div下写，否则会报错-->
	</div>
</template>

script代码块：这块内容主要看参看vue的生命周期，注意：特别强调，在script里一定要用this访问变量和自定义函数

<template>
	<div>
			<!--使用注册过的head组件-->
			<head></head>
	</div>
</template>
<script>
//导入head组件，这里我就引个例子，主要用来说明components如何使用
import head from '../../components/head.vue'

export default{
	name:'Home',
	components:{ head },//用来注册组件，如head组件
	props:{//组件传值时会用到
		// 检测类型
    	height: Number,//传值时，需要传个Number类型的值
   		// 检测类型 + 其他验证
	    age: {
	      type: Number,
	      default: 0,
	      required: true,//设置成必传
	    }
	},
	data(){
		return {
			//定义该页面的属性，我把它当作Java里的声明变量来用，
			//在此定义的变量只允许在此vue页面使用
			pageNumb:1//页码
		}
	},
	computed:{//计算变量，其格式为一个函数，函数名为变量名，如：page
		page(){//计算page
			this.pageNumb++;//注意：特别强调，在script里一定要用this访问变量和自定义函数
			return "第"+this.pageNumb+"页"
		}
	},
	//几个生命周期相关的狗子函数
	beforeCreate(){//钩子函数
		//引用官网的话说是：
		//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
		//我猜是上面data和事件（监听watch事件等）之前会被调用叭
		
	},
	created(){//钩子函数
		//在实例创建完成后被立即调用。
		//在这一步，实例已完成以下的配置：数据观测 (data observer)，			property 和方法的运算，
		//watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
		
	}，
	beforeMounted(){//钩子函数
		//在挂载开始之前被调用：相关的 render 函数首次被调用。
	},
	mounted(){//钩子函数
		//实例被挂载后调用，
	}，
	beforeUpdate(){//钩子函数
		//数据更新时调用,这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
	},
	update(){//钩子函数
		//由于数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子。
		//当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
		//然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，
		//通常最好使用计算属性或 watcher 取而代之。
		//我想这里应该只适合来用变量等，不适合做修改，可能是因为视图已经渲染完毕，你改的话
		//也不会显示。
	}，
	//其他生命周期函数可以参考官网，这里我只说一些可能会用到的
	methods:{
		//正儿八经的自定义函数，且函数不用以function开头，直接写函数名即可，
		//函数与函数之间用逗号相隔
		toLogin(){
			//点击登录时调用。。。。。。自定义的哈
		}，
		toRegister(){
			//注册时调用
		}
	}，
	watch:{//监听事件
		//这里主要用来监听一些变量有何变化
		//以函数的形式，函数名为变量名，有两个参数，一个是新变量名，一个是旧变量名
		pageNumb(newValue,oldValue){//参数对应变化后的值、变化前的值
			//当pageNumb发生改变时触发该函数。
		},
	}
}
</script>

其中用到最多的就是components、computed、data、methods、mounted

components ：注册组件，然后既可以在html代码块里添加该组件，添加方法就是把组件名当作标签来用即可。
computed ：计算变量，然后返回。
data ：声明变量，全局使用
methods ：函数区，专门写自定义函数滴~
mounted ：用来在DOM（数据）渲染前加载函数，可以当作页面初始化来用。
props ：用于组件中的传参

props组件传参

在vue中，页面可能会用到组件这个东西，组件说白了就是个页面中的一个零件，可大可小，可以传参，

具体传值如下：

<!--home.vue页面-->
<template>
	<div>
			<!--使用组件，给head组件传递一个参数 htitle，参数名自定义-->
			<!-- :title是组件的props的属性，props有什么属性，你就可以传什么值-->
			<head :title="htitle"></head>
	</div>
</temlpate>
<script>
	//先引入组件
	import head from '../../compontends/head.vue'
	export default{
		name:'home',
		compontends:{head},//再注册组件。相当于声明组件
		data(){
			return{
				htitle:'home的页面'
			}
		}
	}
</script>

<!--head.vue组件-->
<template>
	<!--在{{}}里写表达式-->
	<h1>{{title}}</h1>
</template>
<script>
	export default{
		name:'head',
		props：{
			title:{
				type: String,
				default: 'home'
			}
		}
	}
</script>

指令

vue的指令有很多，使用在html代码块儿里。所有的指令如下：v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-solt、v-pre、v-cloak、v-once；（注：常用标黄）具体使用方法。

<!--示例-->
<template>
	<div>
		<input type="text" v-model="username"/>
		<span>{{username}}</span>
		<ul>
			<li v-for="(item,index) in 10" v-bind:key="index">{{item}}</li>
		</ul>
		<span v-text>v-text</span>
		<div v-if="">v-if</div>
		<div v-else="">v-else</div>
		<div v-else-if="">v-else-if</div>
		<div v-show="true">v-show</div>
		<!--绑定-->
		<button v-bind:onclick='a()'></button>
		<!--绑定缩写形式-->
		<button @click="">按钮</button>
	</div>
</template>
<script>
	export default{
		name:'',
		data:()=>({
			username:''
		})
	}
</script>