Vue入门-1

一、Vue简介

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

二、安装Vue
1.安装链接：https://cn.vuejs.org/v2/guide...
2.CDN引入：

（1）开发环境版本，包含了有帮助的命令行警告：

六、列表渲染

1. v-for (特殊 v-for="n in/of 10") in和of 没有区别
2. key：跟踪每个节点的身份，从而重用和重新排序现有元素，理想的 key 值是每项都有的且唯一的 id。data.id   Key值相当于身份证，做唯一表示， 在虚拟dom中作为第一对照物， key 值相同，比较内容，内容相同可以复用
3. 数组更新检测     
   a. 使用以下方法操作数组，可以检测变动           push() pop() shift() unshift() splice() sort() reverse()
   b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
   c. 不能检测以下变动的数组
   vm.items[indexOfItem] = newValue          
   解决：(1)Vue.set(example1.items, indexOfItem, newValue(2)splice

4.应用:显示过滤结果
七、事件处理
1.监听事件--直接触发代码  
2.方法事件处理器--写函数名   handleClick     
3.内联处理器方法--执行函数表达式 handleClick($event)    $event 事件对象  
4.事件修饰符 https://cn.vuejs.org/v2/guide...

(1) .stop 如：@click.stop阻止事件冒泡
(2) .prevent 如：@click.prevent阻止默认事件
(3) .self 点击到自己才有用，可以用于阻止冒泡
(4) .once 只能点击一次，可应用于只允许投一次票的机制
(5) .passive 每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用 preventDefault阻止默认动作。 这里一般用在滚动监听，@scroll，@touchmove 。因为滚动监听过程 中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使 滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

5.按键修饰符 如：@keyup.enter @keyup.13.ctrl
八、表单控件绑定/双向数据绑定 v-model
1.基本用法：用于表单双向数据绑定  
(2) 计算缓存 VS methods    

计算属性是基于它们的依赖进行缓存的。     
计算属性只有在它的相关依赖发生改变时才会重新求值

(3) computed VS watch

computed是计算一个新的属性，并将该属性挂载到vm（Vue实例）上；
watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）

十、虚拟dom

vue,把所有的dom存储在内存中，给每个dom添加了key, vue这么做法的目的就是方便操作和复用dom，减少dom操作。

十一、fetch 是一种HTTP数据请求的方式
1.第一个参数是URL:
2.第二个是可选参数，可以控制不同配置的 init 对象
3.使用了 JavaScript Promises 来处理结果/回调；

十二、Axios 是一种HTTP数据请求的方式
1.安装：npm install axios
2.CDN引入：

3.用法如下：

十三、组件
1.组件的定义：独立 小巧 可复用（包含一段html和js组成的代码块，实现业务逻辑）组件只能有一个顶层标签组件之间的数据不能共享
2.组件选项：
data必须是一个函数，必须有返回值，必须返回对象
template、methods、computed、props
3.组件命名要求：
（1）不包含首字母
（2）中间有大写的，必须转成小写或者改成“-”，如： myName=>myname/my-name
4.注册组件：
（1）全局组件（Vue.component）
（2）局部组件（components/Vue.component）
5.组件交互：
（1）父组件访问子组件
a、props:(实现组件之间的数据共享,如何传递数据,props只可读不可写 readOnly) 父组件把自身的变量通过 props 传递子组件
b、ref(1. 绑定到DOM 标签 2. 绑定到 组件 )
（2）子组件访问父组件
a、emit 自定义事件 子组件发送事件 父组件监听事件
b、props 实现 子改父 ==> 父组件修改自己变量 但是 把自身的函数当中props传递子组件 子组件触发

十四、中央事件总线bus，实现兄弟之间的通信

bus 中央事件总线
var bus = new Vue()
bus.$emit("event")触发事件
bus.$on("event",()=>{})监听事件
mounted生命周期函数，会自动被调用，
谁要谁mounted，并bus.$on 谁触发谁bus.$emit

十五、动态组件

十七、过渡

.fade-enter-active, .fade-leave-active { 
transition: opacity .5s; 
} 
.fade-enter, .fade-leave-to  /\* .fade-leave-active below version 2.1.8 \*/ { 
opacity: 0; 
}
  
     Toggle         
    
hello  
      

new Vue({ 
    el: '#demo', 
    data: { 
    show: true 
    } 
})