Vue.js学习总结——1

1、什么是Vue.js

1、Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架

2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

3、Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

4、前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果

 

2、框架和库的区别：

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

 

3、MVC和MVVM图解：

 

4、Vue.js初体验：

  
  
  
  
  
  



  
  
  

    
{{ msg }}
  

  

　　

　　

第一步：引入vue-2.4.0.js文件

第二步：创建vue实例

第三步：在页面中利用插值表达式渲染数据

 

5、Vue.js详细介绍：

(1)、插值：

#文本：

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{msg}}

此处将显示msg的内容

 

此处将显示msg的内容

 

 

#原始的HTML：

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用  v-html 指令：

此处将显示经过渲染后的html代码

 

 

三种插值的对比：

1、{{}}：在显示数据时会出现闪烁问题（闪烁就是在数据渲染出来之前会显示一些其他字符）；而v-text和v-html则不会出现闪烁问题

2、{{}}：不会替换标签原本存在的数据，如果标签原本存在数据，则将拼接后的结果进行显示；而v-text和v-html则会覆盖页面原有的数据

3、{{}}和v-text不会解析msg中的标签，会原样输出；而v-html则会将msg中的标签解析输出

 

代码：

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112

    
  


  

  

　　

效果图：

 

 

 

（2）、属性和事件绑定：

v-bind:属性绑定，可以简写为:

v-on:事件绑定，可以简写为@:

 

代码：

　　

效果图：

 

 

 

（3）、事件修饰符：

 

.stop 阻止事件冒泡

.prevent 阻止默认行为

.capture 实现捕获触发事件的机制

.self 实现只有点击当前元素时候，才会触发事件处理函数

 

代码：

  
  
  
  
  
  



  


    
    

      
    
    


    
    有问题，先去百度
    


    
    

      
    
    


    
    

      
    
    


    
    有问题，先去百度
    



    
    
    

      

        
      
    
    


    
    

      

        
      
    
    


  

  

　　

 

（4）v-model双向绑定：

前面学习了v-bind可以用于绑定属性，v-model的作用也是用于绑定数据，v-bind是单向数据绑定，从M到V，而v-model是双向数据绑定既可以从M到V，也可以从V到M。

  
  
  
  
  



  

    
{{ msg }}

    
    

    
    
    
    
  

  

　　

注意： v-model 只能运用在 表单元素中，因为只有表单元素才可以在页面上进行修改

 

 （5）、vue中的样式：

Class样式：

1、对象语法：

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }">div>

 

2、数组语法：

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

 

内联样式：

1、对象语法：

 

2、数组语法：

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

 

代码：

  
  
  
  
  
  



  

    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！


  

  

　　

效果图：

 

 

 未完待续。。。