Vue总结（一）

1.vue.js简介

vue.js是目前比较火的前端框架，是一套构建用户界面的框架，轻巧、高性能、可组件化的MVVM库、只关注视图层，最大的优点是解放了js中频繁的DOM操作。

2.框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
库：提供某个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以容易切换到其他库实现需求

3.MVC与MVVM之间的区别

（1）MVC是后端的分层开发概念
（2）MVVM是前端视图层的概念，Model–View–ViewModel （MVVM） 是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。主要关注于视图分离（MVVM把视图层分为Model、view、viewModel三层）
.View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。
.Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
.ViewModel 是由前端开发人员组织生成和维护的视图数据层。

4.Vue指令之v-text和v-html

1.v-text:显示文本内容，会覆盖元素中的原本内容
2.插值表达式只会替换自己的占位符处的内容，不会把整个内容全替换
3.v-html:以HTML标签的形式显示
总结：
	v-text和{{}}表达式渲染数据，不解析标签。
	v-html不仅可以渲染数据，而且可以解析标签。　

5.Vue指令之v-bind和v-on

1.v-bind:用于绑定属性
2.v-bind可以简写为 :
3.v-on:提供事件绑定机制
4.v-on：可以简写成  @

6.事件修饰符

.stop:阻止冒泡
	<input type="button" value="按钮" @click.stop="btnHandle">
.prevent:阻止默认事件
	<a href="http:www.baidu.com" @click.prevent="linkclick">百度一下</a>
.capture:添加事件侦听器时使用事件捕获模式----从外到里
.self:只当事件在该元素本身触发时触发回调--只会执行自己身上的冒泡行为的触发，并不会真正阻止冒泡的行为
.once:事件只触发一次

7.Vue指令之v-model

v-model实现数据的双向绑定，只能应用于表单元素中

```bash
<!-- v-model实现数据的双向绑定：将输入框中的内容同步到div中 -->
<div id="app">
请输入内容:<input type="text" v-model="msg">
<div class="info">{{msg}}</div>

<script>
   new Vue({
       el:'#app',
       data:{
           msg:''
       },
       methods:{ }
   })
</script>`

7.Vue中的样式

1.使用CSS样式
	//数组
	<h1 :class="['red', 'thin']">今天要好好学习</h1>
	//数组中使用三元表达式
	<h1 :class="['red', 'thin', isactive?'active':'']">明天要好好学习</h1>
	//数组中嵌套对象
	<h1 :class="['red', 'thin', {'active': isactive}]">每一天都要好好学习</h1>
	//直接使用对象
	<h1 :class="{red:true, italic:true, active:true, thin:true}">快乐学习每一天</h1>
2.使用内联样式style
	//直接在元素上通过 `:style` 的形式，书写样式对象
	<h1 :style="{color: 'red', 'font-size': '40px'}">你好我好大家好</h1>
	//将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
	<h1 :style="h1StyleObj">你好我好大家好</h1>
	data: {
	   h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
	}
	//在 `:style` 中通过数组，引用多个 `data` 上的样式对象

8.Vue指令之v-for和key属性

v-for的三种用法：
迭代数组
迭代对象中的属性
迭代数字

//1.迭代数组
	ul>
	  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：	  {{item.age}}</li>
	</ul>
//2.迭代对象中的属性
	<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
//3.迭代数字
	<p v-for="i in 10">这是第 {{i}} 个P标签</p>

注意：
	1.key属性在使用时，必须使用v-bind属性绑定的形式，指定key的值
	2.key属性的作用：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。

9.Vue指令之v-if和v-show

（1）v-if的特点:每次都会重新删除或创建元素
​		      有较高的切换性能消耗
（2）v-show的特点：每次不会重新进行DOM的删除和创建属性，只是切换了元素的display:none样式
​                有较高的初始渲染消耗
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

10.Vue中的响应式特点

在vue中，当data中的数据发生改变，vue会默认监听到数据的改动，自动更新页面数据`

11.过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。
过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器的名称一样，优先调用私有过滤器
过滤器有两个条件：过滤器名称和处理函数

（1）私有过滤器
	filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用}
（2）全局过滤器
	Vue.filter('dataFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
	    moment(dataStr).format(pattern)
	})
（3）过滤器的使用：
	<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

12.自定义指令

 Vue.directive(参数1，参数2)
	参数1：指令的名称
	参数2：是一个对象，这个对象上有一些和指令相关的钩子函数，在特定的阶段执行相关的操作
常用钩子函数：
	bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
​    inserted:被绑定元素插入父节点时调用
​    update:所在组件的VNode更新时调用

（1）自定义全局指令
	Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
    });
（2）自定义局部指令
	directives: {
        color: { // 为元素设置指定的字体颜色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        },
        'font-weight': function (el, binding2) { 
          el.style.fontWeight = binding2.value;
        }
（3）自定义指令的使用
	<input type="text" v-focus v-color="'red'" v-font-weight="900">