VUE 基础

VUE

Vue概述:

​ Vue的创建者 : 尤雨溪

• 2014年2月,Vue正式发布

• 2015年10月27日,正式发布1.0.0

• 2016年4月27日,发布2.0的预览版本

  Vue : 渐进式JavaScript框架

  渐进式:声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

  官网: https://cn.vuejs.org/v2/guide/

  • 易用:熟悉HTML,CSS,JavaScript知识后,可快速上手Vue

  • 灵活:在一个库和一套完整框架之间自如伸缩

  • 高效:20kb 运行大小,超快虚拟DOM

  传统开发模式对比(js 与jq)

  图片因为上传不上去所以暂时没有

  Vue的基本使用步骤:

  1.需要基本填充数据的标签

  2.引入Vue.js库文件

  3.可以使用Vue的语法做功能

  4.把Vue提供的数据填充到标签

  
  
  ​
  
      
      
      
      
  
  ​
  
    //1.需要基本填充数据的标签
    
  
      {{msg}}
    
    //2.引入Vue.js库文件
    
      
  
  
  
  

   

 参数分析:
  el:元素的挂载位置(值可以是css选择器也可以是DOM元素)
 data:数据模型(值是一个对象)

​ {{}} 插值表达式用法:
   ​1. 将数据填充到html页面
   ​2.插值表达式支持基本的计算操作 也就是算术运算

指令

• 指令的本身就是自定义属性

• 指令的格式 : 以 v- 开始(比如v- cloak)​

  v-cloak指令用法

• 插值表达式存在的问题:"闪动"

• 如何解决该问题: 使用 v-cloak 指令

• 原理:先隐藏,替换好值之后在显示最终的值

数据响应式

• 响应式:

  1. html5中的响应式(屏幕尺寸方式变化导致样式发生变化)

  2.数据的响应式(数据内容变化导致页面内容的变化)

  • 数据绑定

    数据绑定:将数据填充到标签中

    • v-once 只编译一次

      显示内容之后不在具有响应式功能

双向数据绑定

 v-model指令用法  

MVVM设计思想

​ M (model)

​ V (view)

​ VM(View-Model)

Vue事件绑定

1.v-on指令用法(点击事件)

​ eg:

 v-on 简写形式

2.事件函数的调用方式

• 直接绑定函数名称

  点击按钮

  ​

• 调用函数

  点击按钮

   

• 编写的函数放在Vue对象的里面

  格式如下:

  点击按钮  
  

  method为属性里面可以写多个函数

  fun 为函数名称

  3.事件函数参数传递

  • 普通参数和事件对象

    事件绑定-参数传递

    1.如果事件直接绑定函数名称,那么迷人会传递事件对象作为函数的第一个参数

    2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递.并且事件对象的名称必须式$event

4.事件修饰符

• .stop阻止冒泡

  冒泡:当一个事件被触发时,事件将随着该节点继承各个父类节点的事件

  例如:

  
        
  {{msg}}
     
      点击获取对象                                                                             
      
      
      

  可以通过.stop来控制停止冒泡,避免一些事件被触发

• .prevent

  使用位置如上

  可以通过修饰符来阻止默认行为(比如a 标签的跳转链接)