VUE基础1.Vue是一套用于构建用户界面的渐进式框架。 2.与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用

VUE项目基础

第1讲：Vue简介

发展趋势

什么是vue

1.Vue是一套用于构建用户界面的渐进式框架。 2.与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。 3.Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 4.另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

vue有哪些特点

1.更加轻量20kb min+gzip(React35kb,Angular60kb) 2.渐进式框架(用到什么学什么) 3.响应式的更新机制(数据改变后自动刷新，底层做了处理) 4.学习成本低（模板语法基于html容易上手）

第2讲：开发第一个vue程序

1.安装开发环境【官网：cn.vuejs.org/v2/guide/in… 2.引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

3.NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用

$ npm install vue

4.模板引擎{{message}} 响应式，支持表达式，不支持语句。对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
<body>    
	<div id="app">
  		{{ message }}  // 文本插值
	</div>

	<script type="text/javascript">
	var app = new Vue({ //在引入Vue.js后会生成一个全局变量Vue，通过new Vue的方式可以获得一个Vue的应用，返回一个vue.js的应用对象
  		el: '#app',  // 需要传递一个对象作为参数，其中属性el代表元素element，通过id选择器的方式选中div
  		data: { // data属性用于保存数据
    	message: 'Hello Vue!' //声明变量并注册初始化赋值
  		}
	})
	</script>
</body>
</html>

Hello Vue!

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<!-- 在标签属性中的""是变量，在{{}}内的''是字符串 -->
<!-- 在标签属性中实现'list-'字符串+id变量的值，使用双引号里套单引号 -->
<div v-bind:id="'list-' + id"></div>
<!-- 限制，每个绑定都只能包含单个表达式 -->
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

5.常见指令： v-bind 简写：:bind绑定动态值 v-if、 v-else-if、 v-else 不满足条件的话不渲染 v-show 相当于display:none已挂载DOM节点

<!-- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display -->
<h1 v-show="ok">Hello!</h1>
<!--一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好-->

v-for eg:v-for="item for items" 列表循环渲染

5.常见指令： v-bind 简写：: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>

v-if、 v-else-if、 v-else 不满足条件的话不渲染 v-show 相当于display:none已挂载DOM节点 v-for eg:v-for="item for items" 列表循环渲染

第5讲：组件基础及组件注册

1.定义：组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

2.作用：复用 3.用法：

<template>
	<div id="components-demo">
  		<'组件名称'></'组件名称'>
        <'组件名称'></'组件名称'>
        <'组件名称'></'组件名称'>
	</div>
<template>
    
<script>
// 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
// 所有的 Vue 组件都是 Vue 实例   
var vm = new Vue({ 
  el: '#components-demo'
})

Vue.component('组件名称'，{
    props:{
      title:String,
      del:{
         type:Boolean,
         default:false
      }
     },
     template:`'<button v-on:click="count++">You clicked me {{ count }} times.</button>'`,
     data(){
		return {
          count: 0
        }
	 },
     methods:{},
});
</script>

4.注意事项：父组件中若有未使用的属性则会传递到子组件的根元素上，组件可以嵌套使用，组件名为唯一的

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

第6讲：Vue组件的核心概念：事件

可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

1.普通用法 v-on:click="方法名或表达式" 缩写：@click=“fn”

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <!-- `v-on` 指令可以接收一个需要调用的方法名称 -->
  <button v-on:click="greet">Greet</button>
  <!-- '有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法' -->
  <button v-on:click="greet123('123', $event)">Greet123</button>
  <!-- '缩写' -->
  <button @click="handleClick">删除</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
        // 现在我们可以访问原生事件对象
        event.preventDefault()
      }
    }
    greet123: function(str, e) {
      // 传递参数
      	alert(str)
		console.log(e)
	},
    handleDelete() {
        console.log('handleDelete')
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

2.组件间通信用法 this.$emit('delete',参数) @delete="fn" 3.事件修改符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

<!-- 阻止单击事件继续传播 -->
<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>

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

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

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

第8讲：理解单文件组件

传统组件用法缺点：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具
CLI 会为你搞定大多数工具的配置问题，同时也支持细粒度自定义配置项。

创建项目：

安装NodeJs ：nodejs.org/en/download…
按照npm包管理器

查看版本：

PS D:\VUE> node -v
v10.16.3
PS D:\VUE> npm -v
6.9.0

安装vue-cli：npm install -g @vue/cli
安装webpack：npm install -g webpack

创建新工程：Vue create vue-demo

? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

图形化配置界面：vue ui
启动：Npm run serve

引入element：Vue add element npm i element-ui -S

? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? No
? Choose the locale you want to load zh-CN

第9讲：双向绑定和单向数据流不冲突

v-model本质上是语法糖，它会根据控件类型自动选取正确的方法来更新元素，负责监听用户的输入事件以更新数据

是value 和 @input的缩写

<input v-model="message" placeholder="edit me">
<input :value="message" @input="handleChange">
<p>Message is: {{ message }}</p>

methods:{
	handleChange(e){
		this.message = e.target.value
	}
}

第10讲：理解虚拟Dom及key属性的作用

Jquery帮助我们简化了操作DOM的API，方便我们绑定事件，随着系统复杂度提高，事件增多，操作不同DOM与相同DOM变的混乱
vue引入数据中间层，避免我们直接操作DOM，不再关注DOM元素，只关注数据，由vue底层将数据映射到DOM上
数据的变化影响DOM的更新，DOM更新消耗性能，为减少DOM更新引入虚拟DOM
Virtual DOM 结构：state(数据)+template(模板)=》DOM树结构(通过算法机制更新dom减少性能消耗)

第11讲：如何触发组件的更新

数据来源(单向的)：来自父元素的属性；来自组件自身的状态data ；来自状态管理器，如vuex,Vue.observable
状态data VS 属性 props：
- 状态是组件自身的数据
- 属性是来自父组件的数据
- 状态的改变未必会触发更新
- 属性的改变未必会触发更新

第12讲：合理应用计算属性和侦听器

第13讲：生命周期的应用场景和函数式组件

第14讲：指令的本质是什么

内置指令：14种
自定义指令：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

第15讲：常用的高级特性provide/inject

2.2.0 新增
概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
作用：在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

VUE基础