创建组件
方法和计算属性的区别：- 当计算属性依赖的内容发生变更时，才会重新执行，得到新的结果。-方法是只要页面重新渲染，就会重新计算，得到新的内容
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里定义的变量
样式绑定语法
用字符串绑定动态样式
方法：在data()方法里，定义一个变量，然后用v-bind在模板中绑定属性
案例
用对象绑定动态样式
方法：在data( )里声明一个对象，例如叫classObject。
案例：classObject:{ 类名: 布尔值 }
行内样式动态绑定
对象形式
方法：在data( )方法里，声明一个变量，变量是一个对象。然后在模板中进行绑定。
模板中绑定案例：<div :style="{ 属性名: 属性值 }">
注意事项：建议在工作中使用对象的形式，来编写模板中的行内样式动态绑定。因为这样更加直观，字符串拼接也不容易出错。
列表循环渲染
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
当失去焦点时才会触发
