Vue.js 诞生及发展史

前言

前端现在可以说是百花齐放，开发的效率是不断的提升，前端的三大主流框架 Vue 、Angular 、React 其中 Angular 是2009年诞生的，一开始出来挺火的，后面随着版本的升级，Angular的变化比较大，增加了使用学习的成本，渐渐的失去了优势，React和Vue的原理基本上是一样的，诞生比Vue早，所以Vue结合了Angular和React的优势，占据了江山。

提高开发效率的发展历程：

• 原生的JS 》 JQuery 类库 》 前端模板引擎 》 Vue.js / Angular.js / React.js ( Vue 减少了DOM操作 虚拟DOM 提高了渲染效率 数据双向绑定)

Vue

Vue 只做 Html + css + js : 视图

网络通信： axios前端通信框架

页面跳转：vue-router

状态管理: vuex

UI 框架

ElementUI 、iview、ice

Vue的发展史：

• 2013年底尤雨溪个人实验项目开始开发
• 2014年2月公开发布
• 2014年11月发布0.11版本
• 2016年10月发布2.0版本

Vue 基于 MVVM 模式设计的, MVVM （Model View ViewMolde）
MVVM模式：

• Model 数据模型
• View 负责页面展示
• ViewModel 对数据进行处理后再交给页面展示
  

ViewModel是Vue.js的核心，它是一个Vue的实例

从 View 侧看 ViewModel中的DOM Listeners 会帮我们监测页面上DOM元素的变化，如果有变化，则会更改Model中的数据；

从 Model 侧看 当我们更新 Model 中的数据时 ，Data Bingings 会帮我们更新页面中DOM元素；

提高开发效率的发展历程：
最开始的原生 JS (操作DOM元素) 》 Jquery 类库 》前端模板引擎 》 Vue.js / Angular.js / React.js (其中Vue减少DOM操作，虚拟DIM, 提高了页面渲染效率，实现了数据的双向绑定)
Vue.10 是没有虚拟DOM 在 Vue.2.0改成了虚拟DOM

Vue 生命周期

beforeCreate(){
    console.log("beforeCreate")
    // 此时数据data和事件方法methods还未绑定到app对象上
},
created(){
    console.log("create")
  // 数据data和事件方法methods绑定到app对象上
},
beforeMount(){
  console.log("beforeMount")
  // 渲染之前，根据数据生成的DOM对象是获取不到的
},
mounted(){
  console.log("mounted")
  // 渲染之后，可以获取数据生成的DOM对象。
},
beforeUpdate(){
  // 数据更改， 但内容未更改之前
  console.log("beforeUpdate")
},
update(){
  // 内容已更改完毕
  console.log("update")
},
beforeDestroy(){
  // 应用销毁之前
  console.log("beforeDestroy")
},
destroyed(){
    // 应用销毁之后
  console.log("destroyed")
}

Vue 模板语法

插值

• 文本

  <span>Message: {{ msg }}</span>
  

  通过使用 v-once 指令可以一次性的插值，当数据改变时，此处内容不会更新。

  <span v-once>这个将不会改变: {{ msg }}</span>
  

• 原始 HTML v-html 指令

  <div id="app">
          <p>Using mustaches: {{ rawHtml }}</p>
          <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      </div>
  
      <script type="text/javascript">
          let app = new Vue({
              el:"#app",
              data:{
                rawHtml:"<span style='color: red;'>This should be red</span>"
              }
          })
      </script>
  
  结果： 
  
  Using mustaches: <span style='color: red;'>This should be red</span>
  
  Using v-html directive: This should be red
  

  支持使用 Javascript 表达式

  {{ number + 1 }}
  
  {{ ok ? 'YES' : 'NO' }}
  
  {{ message.split('').reverse().join('') }}
  
  <div v-bind:id="'list-' + id"></div>
  

指令

​ 是带有 v- 前缀的特殊属性。

1. 参数

   在指令名之后以冒号表示，eg:

   <a v-bind:href="url">...</a>
   

   这里 href是参数 ， 告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

   v-on指令用来监听DOM事件：

   <a v-on:click="doSomething" >....... </a>
   

2. 动态参数

   2.6.0 新增

   从2.6.0开始 ，指令的参数可以用方括号括起来的表达式了。

<a v-bind:[attributeName]="url">.....</a>

如果Vue的实例中 data 的attributeName的值为href ,那么这个就为 v-bind:href="url"

v-bind指令的缩写 ：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on指令的缩写 @

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

计算属性

vue的计算属性对于任何复杂的逻辑都可以使用计算属性 computed 。

计算属性默认只有 getter , 可以设置一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性的缓存

​ 计算属性是基于响应式依赖进行的缓存，只在相关的依赖发生改变时，才会重新求值。也就是说依赖不发生改变，不会执行函数。会存缓存中获取。

如果不需要缓存，可用方法替换。

computed依赖于data中的变量，只有在它的相关依赖数据发生改变时才会重新求值

    <div id="app">
        <div>{{Name}}</div>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data(){
              return{
                num:0,
                lastname:'',
                firstname:''
              }
           },
          //当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值  watch 也可以监听computed 中的变量，也可以监听data中定义的变量
          watch:{
            num:function(val,oldval){
              console.log(val,oldval);
            }
          },
          //计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
          computed:{
            Name:function(){
              alert(123);
              return this.firstname+this.lastname;
            }
          }
        })
   </script>

watch 只有当监听的变量发生改变的时候才能触发。

​

Class 绑定

• class 对象绑定

  写法一：

<div v-bing:class="{active: isActive}"></div>

如下data中：

data:{
	isActive： true
}

​ 写法二：

<div :class="classObject"></div>


data:{
	classObject: {
		active:true,
		'text-danger':false
	}
}

• class 数组绑定

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

Style 内联样式绑定

• style 对象语法

  <div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>
  

  data: {
  	activeColor: 'red',
  	fontSize: 30
  }
  

  直接绑定一个样式对象，会更方便

  <div v-bing:style="styleObject"></div>
  

  data: {
  	activeColor: 'red',
  	fontSize: 30
  }
  

  同样的，对象语法常常结合返回对象的计算属性使用。

• style 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Vue条件渲染

<h1 v-if="age >18">成年人</h1> 
<!-- 在 v-if 与 v-else-if 与 v-else 中间不可以有其它元素，否则会报错 , 必须紧跟在 v-if 或者 v-else-if 的元素之后-->
<!-- <div id="test"></div>  -->
<h2 v-else-if="age > 60">老年人</h2>
<h3 v-else >小孩子</h3>

<!-- 
   v-else-if  2.1.0 新增
-->

指令 v-if 与 v-show 区别：

• v-if =“表达式” ， 表达式为false 时，移除DOM中的元素
• v-show="表达式" ， 表达式为false 时， 会将DOM元素设置为display:none
• 性能上 v-if 相比 v-show 更消耗性能 ，如果需要频繁切换使用 v-show

列表渲染

v-for 指令基于一个数组来渲染列表。 v-for 指令需要使用 item in itmes 形式的是特殊语法 items 是源数据数组 item 是被迭代数组元素的别名。

v-for 遍历数组

<lu id="example-l">
	<li v-for=“item in items” :key=“item.message" >
		{{item.message}}
	</li>
</lu>


var example = new Vue(){
	el: 'example-l',
	data: {
		items: [
			{message: 'Foo'},
			{message: 'Bar'}
		]
	}
}

结果：

Foo

Bar

在 v-for 代码块中，还可以访问所有父作用域中的属性，v-for 的第二个参数为索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Parent-0-Foo

Parent-1-Bar

v-for 遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

How to do lists in Vue

Jane Doe

2016-04-10

将属性名称和值都遍历出来

<div v-for="(value, name) in object">
  {{ name }}: {{ value }
</div>

结果：

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-for 的默认行为会尝试原地修改元素而不是移动它们， 要强制其重新排序元素, 需要使用 特殊属性 key 来提供一个排序提示

事件处理

• 监听事件 可以用 v-on 指令监听DOM事件

用表达式直接进行计算

eg:

<h1>点击次数：{{count}}</h1>
<button @click="count+=1">点击</button>

<script>

  var app = new Vue({
    el: '#app',
    data: {
      count: 0
    }
  })
</script>

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播  防止冒泡事件向上传递-->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面  阻止默认事件-->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 2.14新增-->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

系统修饰符

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact修饰符

2.5.0 新增

.exact 修饰符允许你控制精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

表单输入绑定

v-model 指令在 表单 input 、textarea、select 、radio、checkbox 元素上创建双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

修饰符

.lazy

v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

修饰符可以多个一起使用

Vue组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

组件中的data 必须是一个函数

data: function(){
	return {
		
	}
}

组件与组件之间传值

• 父组件给子组件传值

通过 Props 向子组件传递数据

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

子组件

Vue.component('blog-post', {
  // 定义 props 中的属性 
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

动态传递Props

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

• 子组件给父组件传值

子组件传父组件需要自定义触发事件 $emit，实现数据的传输
当父级组件监听这个事件时，可以通过 $event 访问抛出的这个值；且必须是用 $event 接收

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

<div id="app">
    <h2>父组件的count : {{count}}</h2>
    <!--
        :aaa="post"
        这里的  aaa 传入子组件的变量 与 props: ["aaa"] 中的变量一致
        post 为父组件data中定义的变量

        @add-test="add"
        这里的 add-test 是子组件触发的事件名  add 是父组件的方法
    -->
    <blog-post v-for="post,index in posts" :key="post.id" :aaa="post" @add-test="add">

    </blog-post>
</div>

<script>

    Vue.component('blog-post',{
        data: function () {
          return {
            count: 0
          }
        },
        props: ["aaa"],
        template: `
            <div>
                <h1>{{aaa.id}}</h1>
                <h1>{{aaa.title}}</h1>
                <button @click="$emit('add-test', aaa.id)">You clicked me times.</button>
            </div>
        `
    });

  var app = new Vue({
    el: '#app',
    data: {
      count: 0,
      posts: [
        {id: '1', title: 'My journey with Vue'}
//        {id: '2', title: 'Blogging with Vue'},
//        {id: '3', title: 'Why Vue is so fun'}
      ]
    },
    methods:{
      // add 方法 对应 @add-test="add"
      add: function(data){
        this.count = data
      }
    }
  })
</script>