scbiaosdo

前端框架Vue

什么是Vue？

1、Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
2、Vue 只关注视图层，采用自底向上增量开发的设计。
3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue可以用来做什么？

Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。

为什么使用Vue？

1、轻量级
2、js语法
3、入门及上手快

vue与Jquery比较?

1、jquery关注dom
2、vue关注数据，不关注dom

Vue.js 安装

使用

Vue的对象

1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制
2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
3、methods：事件处理方法对象

数据绑定

1、数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

2、使用 v-html 指令用于输出 html 代码
示例：

3、HTML 属性中的值应使用 v-bind 指令，参数在指令后以冒号指明。
示例


    百度

4、 v-model 指令来实现双向数据绑定

5、 v-on 指令，它用于监听 DOM 事件

过滤器（可以接受参数）

示例


  {{ message | capitalize }}

条件语句

1、v-if
2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
示例

v-if 和 v-show的区别

（1）手段：
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。

循环语句

循环使用 v-for 指令。
示例


  
      //固定写法  参数 in 数组/对象…
      {{ site.name }}
    
  
  
    
    {{ key }} : {{ value }}
    
  
  
    
     {{ index }}. {{ key }} : {{ value }}

样式绑定

一、Class属性绑定

1、行内对象绑定

2、预定义对象绑定




   //直接绑定对象