一、Vue介绍
vue的作者叫尤雨溪，中国人。
在前端框架技术中有三大框架：
Angularjs：谷歌公司生产
React：Facebook公司
Vue:尤雨溪作者
vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
关于渐进式和自底向上增量开发我们来看一下知乎的回答：
二 、官网
三、Vue基础语法
1.声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
实例：
<div id="app">
{{ message }}
</div>
var app = new Vue({ #生成Vue实例
el: '#app', #绑定DOM元素
data: { #数据属性
message: 'Hello Vue!'
}
})
2. 模板语法
1. {{name}} --> 在标签中间引用data属性中的变量
2. v-html='msg' --> 在页面上显示我定义的标签元素
示例：
<div id="app">
<p v-html="message"></p>
{{ message1.split('').reverse().join('') }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: '<a href="https://www.luffycity.com">点我</a>',
message1: "水银"
}
})
</script>
3. v-if='ok' --> 控制标签在不在DOM中
4. v-show='!ok' --> 控制标签的display属性的值（是否显示）
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来【 简写为 :】
6. v-on:click='dianwo'--> 给标签绑定一个点击事件，方法需要在vue实例的methods中定义【简写为 :@】
7. v-model='article' --> 用在input标签和textarea标签中，将用户输入和vue实例中的数据属性建立双向绑定
示例：
<div id="app">
<p v-if="ok">想要带你去浪漫的西二旗，然后一起去上地做面试题</p>
<p v-show="ok">想要带你去浪漫的西二旗，然后一起去上地做面试题</p>
<a v-bind:href="url">点我啊</a> #在这里 href 是参数，
告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
<button v-on:click="ooxx">ooxx</button> #在这里参数是监听的事件名。
<form action="" v-on:submit.prevent="onSubmit"> #阻止提交时刷新
<input type="text" name="name">
<input type="submit" value="提交">
</form>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
ok: true,
url: 'https://www.luffycity.com'
},
methods:{
ooxx:function () {
alert('ooxx');
},
onSubmit:function () {
alert('不许刷新页面')
}
}
})
</script>
3. 计算属性和侦听器
1. 计算属性
1. 计算属性需要定义在vue实例的 computed 中
2. 多用于对变量做一些自定义的操作
3. 我们在页面上像使用普通data属性一样使用计算属性
示例：<script>
var app = new Vue({
el: "#app",
data: {
message: '12345',
#方法 methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
},
computed:{
// 计算属性
reverseMessage:function () {
return this.message.split('').reverse().join('')
},
})
watch: {
//侦听器
}
</script>
2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
4. class和style属性
1. 基于对象的绑定
2. 基于数组的绑定
<div id="app">
<div class="c" v-bind:class="{c1: ok}" v-on:click="bianhong"></div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
ok: true
},
methods: {
bianhong:function () {
this.ok = !this.ok #两种样式无缝切换
}
}
})
</script>
5. 条件渲染
v-if
如果想控制多个标签的显示与否，可以使用 template 标签把它们包起来
v-if/v-else
v-if/v-else if /v-else
示例：
<template v-if="ok">
<p>想要带你去浪漫的西二旗，然后一起去上地做面试题。</p>
<p >世情薄</p>
<p>人情恶</p>
</template>
6. 列表渲染
v-for循环
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-2">
<li v-for="(item, index) in items"> #可以有两个参数
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
7. 事件处理
详见2.模板语法
8. 表单绑定
v-mode指令是v-bind:vlaue 和v-on:input的结合体。
v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model只适用在表单控件中 比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。
四、组件
组件是可复用的 Vue 实例，且带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
注意：data 必须是一个函数
1. 注册全局组件
Vue.component(组件名,{
template: ``,
data: function(){
return {}
},
methods: {...}
})
2. 注册局部组件（当前vue实例才能使用的组件）
new Vue({
el: '#app',
components: {
alert: {
template: ``,
data: function(){
return {}
},
methods: {...}
}
}
})
3. 组件间通信
1. 父组件 -传值-> 子组件
1. 父组件通过 v-bind:变量='值'
2. 子组件需要通过props 声明我需要的变量
注意事项：
使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
// props: ['name'],
2. 子组件 -传值-> 父组件
在vue的组件中通过触发自定义的事件来向外传递信息
触发自定义事件的方式，为了确保父组件的值不会被子组件直接修改
子组件触发事件：
this.$emit('事件名')
父组件监听事件：
v-on:事件名='处理的方法'
3. 组件间传值
1.Vue实例的生命周期钩子函数(共8个)
2. 基于bus对象实现
创建一个空的Vue实例作为时间总线：
var bus = new Vue()
bus.$emit('taopao') # 出发A组件的事件
mounted:function(){ #在组件B创建的钩子中监听事件
var _this = this;
bus.$on('taopao', function(){ # el被挂载之后就监听bus
_this.num += 1; # 在这个作用域中 this 指的是 bus
})
}
4. 插槽和带名字的插槽
引用子组件的时候，我可以传递一些额外的标签元素
插槽是占位置的！！！
插槽多了可以起名字，进行区分！ --> <span slot='heihei'>嘿嘿！</span>
<alert>根本不显示</alert>
5. 组件的注意事项：
1. 特殊的组件需要使用is语法声明一下 比如 table、select、ul等内部使用的组件
2. 捕获子组件的原生事件
2. 前端开发工具包
1. node.js
本质上还是JS，跑在V8引擎上的，让JS能够和操作系统进行交互
和Pythonphp类似的脚本语言
2. npm
类似于Python中的pip
帮助我们解决包和包之间版本的依赖关系
3. webpack
将后端开发的js代码打包成一个单独的js文件
1. 安装
npm install webpack -g
npm install webpack-cli -g
2. 打包JS
webpack b.js
4. vue-cli
1. 安装vue-cli 工具
ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
首先需要安装Node环境。安装完成之后，可以在命令行工具中输入node -v和npm -v,如果能显示出版本号，就说明安装成功。
npm install vue-cli -g --> 全局安装
然后执行：
vue init webpack-simple my-project
init :初始化我们的项目。
webpack-simple:使用的哪个模板，这里我们先使用webpack-simple模板
my-project:表示我们项目的名字，这名字可以自己命名，但不要起成系统软件的一些名字，比如vue，node，npm等
接下来根据提示操作：
切换到当前目前，一定切换进来
cd my-project
下载当前项目所依赖的包
npm install
启动当前的项目
npm run de
vue - vue-cli脚手架项目中组件的使用
代码有三部分，template标签中就是我们要写的组件结构，script标签中就是我们要写的业务逻辑，style标签中就是我们要写的该组件的
样式。这三部分，我们通过vue-loader这个插件，将这三部分共同组合成了一个.vue文件。我们称这种.vue的文件就是一个组件。
另外上面的代码，我们发现有个export default语法，其实呢，这个东西，跟我们的python模块化有点类似。在es6 Module中，webpack这个工具通过babel-loader这个loader将我们的es6 Module语法进行解析，从而让我们的export default语法和import 'xxx'语法在浏览器中识别。
我们总结一句话：export default xxx 就是抛出一个模块（一个js文件就是一个模块)， import 'xxx' from 'aaa'就是从刚刚抛出的文件路径中，导入此模块。有import就一定有export default.
接下来我们我编辑器中打开我们的项目目录，查看一下结构：
打开src文件夹，我们先从项目的入口文件main.js文件：
那么接下来我们就关心去书写App.vue组件中定义的内容就可以了。
大家一开始学习呢，先将App.vue文件中的内容全部删掉，跟着我一起书写里面的主要内容。
在该组件中，我们可以书写三部分，就是之前咱们学习的HTML、CSS、JS.
<template>
<!-- 该组件的模板结构（HTML） -->
</template>
<script>
// 该组件的DOM操作
</script>
<style>
/*该组件的样式属性*/
</style>
因为在main.js中有：
import App from './App.vue'
所以，我们必须在当前组件中写入export default,那么后面的书写就是用到了咱们之前的学习的语法。
在script
export default {
name:'App',
data(){
return {
//必须是一个函数，要有返回值，返回空对象也是有返回值
}
}
}
在template中
<!--一定是闭合标签-->
<div class="app">
<h3>{{ msg }}</h3>
</div>
如果没有重启项目，请再次执行如下命令启动项目：
npm run dev
那么接下来我们就可以在App.vue组件中将我们之前学习到的知识运用进来。
比如我们的指令系统：
- v-if 条件渲染
- v-show 显示隐藏
- v-for 遍历多条数据
- v-bind 绑定属性
- v-model 表单控件的数据双向绑定
- v-on 绑定事件
- v-html 渲染html标签元素
我们还可以使用实例对象的方法：
- 计算属性的computed方法来监听属性
- methods方法中声明事件的方法
- .......
补充：
.vue就是一个组件
webpack + node.js 将我们的项目更加方便化
更有助于开发者的快速开发
创建组件
一个组件有三部分组成
--------------
创建项目：
1. cd 当前目录下
2. vue init webpack-simple 01
3. 接下来 根据提示操作
4. cd 01
5. npm install
6. npm run dev
7. 只关心src下的文件夹里面的文件