Vue入门学习（菜菜基础学习三）

什么是Vue.js

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Wex）
• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

Vue指令之v-bind的三种用法

1. 直接使用指令v-bind
   <h2 class="a" style="max-width:100%" v-bind:title="Name">{{Name}}</h2>
2. 使用简化指令:
   <h2 class="a" style="max-width:100%" :title="Name">{{Name}}</h2>
3. 在绑定的时候，拼接绑定内容：
   <img id="small" :src="'data:image/jpeg;base64,' + ImgData" :alt="ImgName"/>

Vue之 - 插值表达式

普通用法：<h2 class="a" style="max-width:100%" v-bind:title="Name">{{Name}}</h2>
可以传参：<label type="text">{{BeginTime(curdata)}}~{{EndTime(curdata)}}</label>
利用过滤器格式化文本：<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

Vue指令之v-model

v-model可以作用于表单元素上，自动获取更新元素的数据。如果表单数据发生改变，其他的绑定数据也跟着发生改变

v-modal上可以加多个参数number、lazy

<input type="text" v-modal="data.name" placeholder="" />

Vue指令之v-for和key属性

迭代一个对象，然后遍历对象身上的属性

为了能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

<button  class="right" v-for="(item, index) in ButtonList" :key="index"
                  :classname="item.classname" :title="item.title" @click.native="item.clickEvent">
 </button>

Vue指令之v-if和v-show

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好

<h1 v-show="ok">Hello!</h1>
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

<p v-if="seen">现在你看到我了</p>
v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

vue实例的生命周期

• 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
• 生命周期钩子 = 生命周期函数 = 生命周期事件
• 主要的生命周期函数分类：
• 创建期间的生命周期函数：
  • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  • created：实例已经在内存中创建好，此时 data 和 methods 已经创建，还没有开始 编译模板
  • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  • mounted：此时已经将编译好的模板，挂载到了页面指定的容器中显示
• 运行期间的生命周期函数：
  • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
  • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
  • destroyed：Vue 实例销毁后调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。