- 基础语法

创建组件

方法和计算属性的区别：- 当计算属性依赖的内容发生变更时，才会重新执行，得到新的结果。-方法是只要页面重新渲染，就会重新计算，得到新的内容
		data(){}  
			data方法，用于在Vue中声明数据
		methods:{}
			methods属性，用于编写Vue中的方法
		computed:{}
			计算属性，根据数据，自动进行计算，经常用于数值计算。记得返回计算结果。
		watch:{}
			属性说明
				监听属性，属性变化时，自动执行里边的函数。
				可以根据变量的改变，作异步操作和页面样式的改变。
			参数说明
				val
					现在参数的值
				oldVal
					以前参数的值
		注意事项
			computed  和  method  都能实现的功能，建议使用 computed  ， 因为有缓存

VUE生命周期函数

生命周期函数指，在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)
		记忆时可以成对进行记忆，也就是分为四组。
		1.  beforeCreate( )
			在初始化 / 实例创建 之前执行的函数
		2.  Created( )
			在初始化 /  实例创建 之后执行的函数
		3.  beforeMount( )
			在组件内容被渲染到页面之前自动执行的函数
			注意：此时无法找到任何模板DOM节点
		4.  Mounted( )
			在组件内容被渲染到页面之后自动执行的函数
		5.  beforeUpdate(  )
			在数据将要变化之前自动执行的函数
		6.  updated(  )
			在数据发生变化之后自动执行的函数
		7. beforeDestroy(  )
			在VUE实例销毁之前自动执行的函数
		8.  destroyed(  )
			在VUE实例销毁之后自动执行的函数
	常用模板语法
		插值表达式{{xxx}}
			在模板中输出变量,在插值表达式中是可以写JavaScript表达式的。例如：{{1+2}}，但不能写语句。

  基础指令
  	v-html
  		转义输出变量的HTML标签
  	v-bind
  		绑定HTML标签中的属性值
  	v-if
  		模板中进行判断，根据变量负责DOM的展示与否。
  		如果v-if的值为false时，将直接移除DOM元素
  	v-show
  		模板中进行判断，根据变量负责DOM的展示与否。
  		通过样式隐藏，如果v-show的值为false时， display:none
  	v-on
  		阻止默认行为 -  @click.prevent
  		在模板中绑定事件,例如 v-on:click="handleClick"
  		$event 传递原生事件对象：handleClick(num,$event)
  	ref
  		ref 是获取Dom 节点  / 组件引用  的一个语法
  		模板语法：<div ref="count">
  		程序写法：this.$refs.count

  指令简写方法
  	v-bind  简写  ：
  		原写法：<div v-bind:title="message">
  		简写法：<div :title="message">
  		动态属性绑定：  <div  :[xxx]="message"> ，xxx是在data里定义的变量
  	v-on   简写 @
  		原写法：<div v-on:click=“handleClick”>
  		简写法：<div @click=“handleClick”>
  		动态事件绑定：  <div  @[xxx]="handleClick"> ，xxx是在data里定义的变量

样式绑定语法绑定。模板中绑定案例：
注意事项：建议在工作中使用对象的形式，来编写模板中的行内样式动态绑定。因为这样更加直观，字符串拼接也不容易出错。
列表循环渲染 v-for 可以直接在模板中使用v-for来循环打印数组和对象数组循环案例：v-for="(item,index) in list" 对象循环案例：v-for="(value,key，index) in list" Vue要求循环时在模板中增加key值，避免重复渲染 :key="唯一标识" 字符串或数字
变更数组的方法 push( ) 从数组尾部添加内容 unshift( ) 从数组头部添加内容 pop( ) 从数组末尾删除内容 shift( ) 从数组头部删除内容 sort( ) 对数组进行排序 reverse( ) 对数组进行取反 splice（）从数组中删除具体的内容

  特殊用法
  	v-for="item in 10"
  		从1循环到10
  注意事项： 循环和判断不能写在一个标签上，否则是没办法进行判断的。

事件绑定事件绑定修饰符 @click.stop 停止事件冒泡 @click.prevent 阻止默认行为 @click.once 事件只绑定一次

 按键绑定修饰符
 	@keydown
 		按键就可以触发事件
 	@keydown.enter
 		按下回车键时触发
 	@keydown.tab
 		按下tab键时触发
 	@keydown.delete
 		按下删除键时触发
 	@keydown.esc
 		按下ESC键时触发
 	@keydown.up
 		按下上键时触发
 	@keydown.down
 		按下下键时触发
 	......有很多

 鼠标修饰符
 	@click.left
 		点击鼠标左键触发
 	@click.right
 		点击鼠标右键触发
 	@click.middle
 		点击鼠标中键触发

 精确修饰符
 	@click.ctrl.exact
 		按ctrl和鼠标键时才会触发

双向绑定

 v-model
 	双向绑定的最基本用法
 	<input v-model="message" />
 	<textarea v-model="message" />
 	<input type="checkbox"  v-model="message" />

 修饰符
 	v-model.trim
 		去掉字符串前后的空格
 	v-model.number
 		自动转变为number类型
 	v-model.lazy
 		当失去焦点时才会触发

vue基础语法

- 基础语法