Vue笔记（更新中）

1、Vue概述

1.1 Vue 是什么？

  • Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架

  • vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

1.2 作者

  • 尤雨溪:Vue.js的创建者

  • 2014年2月，Vue.js正式发布

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

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

1.3 简述

  • Vue:渐进式JavaScript框架

  • 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

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

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

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

  • 高效:20kB运行大小，超快虚拟 DOM

2、Vue过渡之helloworld

2.1 代码

  • dom操作

  • jquery操作

  • vue操作

 
 
     
{{msg}}

2.2 分析

  • 实例参数分析

    • el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)

    • data:模型数据(值是一个对象)

  • 插值表达式用法

    • 将数据填充到HTML标签中

    • 插值表达式支持基本的计算操作

  • Vue代码运行原理分析

    • 概述编译过程的概念(Vue语法→原生语法)

2.3 idea设置vue属性提示

  • 先复制好下面的内容

 @tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped,@keyup.enter,:class,:style,v-show,:key,@keyup,@submit,@submit.prevent,@mouseenter,@mouseleave,
 @mouseout,@mouseover

 

3、Vue模板剖析

3.1 模板语法概述

  • 如何理解前端渲染?

    • 把数据填充到HTML标签中

    • 模板+数据=前端渲染

3.2 渲染方式

3.2.1 把字符串渲染到页面上有哪些方式？

  • 利用原生js拼接字符串

    • 基本上就是将数据以字符串的方式拼接到HTML标 签中，前端代码风格大体上如右图所示。

    • 缺点:不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

     var d = data.weather;
 var info = document.getElementById('info'); 
 info.innerHTML = '';
 for(var i=0;i
      '; 
     tag += '
    • 白天天气:'+day[1]+'
      • ';
     tag += '
    • 白天温度:'+day[2]+'
      • ';
     tag += '
    • 白天风向:'+day[3]+'
      • ';
     tag += '
    • 白天风速:'+day[4]+'
      • ' ;
     tag += '
    ';
     var div = document.createElement('div');
     div.innerHTML = tag;
     info.appendChild(div);
 }

  • 利用模板引擎拼接

    • 基于模板引擎art-template的一段代 码，与拼接字符串相比，代码明显规范了很多， 它拥有自己的一套模板语法规则。

    • 优点:大家都遵循同样的规则写代码，代码可读性 明显提高了，方便后期的维护。 缺点:没有专门提供事件机制。

  • 利用Vue模板语法

  • 文档碎片 document.createDocumentFragment

  • 利用es6 `` 反引号拼接字符串

3.2.2 我们已经用过哪些模板语法了？

  • 插值语法

3.3 Vue模板语法

3.3.1 插值表达式

  • {{ }}

3.3.2 指令

  • 指令是什么？

    • 指令就是一个自定义属性

    • Vue中指令都是以 v- 开头

3.3.2.1 v-cloak 指令

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

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

  • 解决该问题的原理:先隐藏，替换好值之后再显示最终的值 v-cloak

 
 
   

     
     
{{msg}}

3.3.2.2 数据绑定指令

3.3.2.2.1 v-text 指令

  • 用于将数据填充到标签中

  • 作用于插值表达式类似，但是没有闪动问题

  • 如果数据中有HTML标签会将html标签一并输出

  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

 

     
     

     

         
         {{msg}}
     

 

 ?
3.3.2.2..2 v-html 指令

作用：填充HTML片段

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

 

 　　
 
     
     
{{message}}
 
     
 　　
3.3.2.2.3 v-pre 指令

作用：填充原始信息

  • 显示原始信息跳过编译过程

  • 跳过这个元素和它的子元素的编译过程。

  • 一些静态的内容不需要编译加这个指令可以加快渲染

 {{ this will not be compiled }}    
   
 {{msg}}

3.3.2.3 数据响应指令

3.3.2.3.1 如何理解响应式

  • html5中的响应式(屏幕尺寸的变化导致样式的变化)

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

3.3.2.3.2 什么是数据绑定

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

3.3.2.3.3 v-once 指令

作用：只编译一次

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

 {{ msg }}

3.3.2.4 双向数据绑定指令

3.3.2.4.1 MVVM设计思想

  • M(model) : 数据层 Vue 中 数据层 都放在 data 里面

  • V(view) ：Vue 中 view 即 我们的HTML页面

  • VM(view-model) ：控制器 将数据和视图层建立联系,vm 即 Vue 的实例 就是 vm

3.3.2.4.2 什么是双向数据绑定

  • 当数据发生变化的时候，视图也就发生变化

  • 当视图发生变化的时候，数据也会跟着同步变化

3.3.2.4.3 v-model 指令

作用：实现双向绑定？

3.3.2.4.4 使用场景

v-model是一个指令，限制在 、