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图解:

Vue.js学习总结——1_第1张图片

 

4、Vue.js初体验:





  
  
  
  Document
  
  



  
  
  

{{ 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中的标签解析输出

 

代码:





  
  
  
  Document
  



  

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

==================

{{msg2}}
1212112

  

效果图:

Vue.js学习总结——1_第2张图片

 

 

 

(2)、属性和事件绑定:

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

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

 

代码:




    
    v-bind和v-on的学习
    


    

  

效果图:

 

 

 

(3)、事件修饰符:

 

.stop 阻止事件冒泡

.prevent 阻止默认行为

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

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

 

代码:





  
  
  
  Document
  
  



  

  



  

 

(4)v-model双向绑定:

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





  
  
  
  Document
  



  

{{ 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 列表:

 

代码:





  
  
  
  Document
  
  



  

这是一个很大很大的H1,大到你无法想象!!!

这是一个很大很大的H1,大到你无法想象!!!

这是一个很大很大的H1,大到你无法想象!!!

这是一个很大很大的H1,大到你无法想象!!!

这是一个很大很大的H1,大到你无法想象!!!

  

效果图:

Vue.js学习总结——1_第3张图片

 

 

 未完待续。。。 

你可能感兴趣的:(Vue.js学习总结——1)