一、遇见vue.js

1.1 Vue.js是什么?
  Vue.js 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

1.2 MVC 和 MVVM

  MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型)、Controller(控制器)和View(视图)。View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者,View和Model不直接联系。
  相比MVC,MVVM只是把MVC的Controller改成了ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
  
1.3Vue和Angular区别?
  Vue——简单、易学
  指令以 v-xxx
  一片html代码配合上json,在new出来vue实例
  个人维护项目
 
  适合: 移动端项目,小巧
 
  Angular——上手难
  指令以 ng-xxx
  所有属性和方法都挂到$scope身上
  angular由google维护
 
  合适: pc端项目
 
  共同点: 都支持指令、过滤器和双向绑定,不兼容低版本IE
 

二、指令

2.1 v-if
  v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中。
 
2.2 v-show
  v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素将被隐藏。查看DOM时,会发现元素上多了  一个内联样式style=“display:none”。
 
  注:v-if如果初始渲染时条件为假,则什么也不做,在条件第一次变为真时才开始局部编译(编译会被缓存起来)。相比之下,v-show元素始终被编译并保留,只是简单地基于CSS切换。一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。
 
2.3 v-else
  v-else就是javascript中else的意思,它必须跟着v-if,充当else功能。
 
  注:v-show和v-else一起使用时会出现指令优先级问题,我们可以用另一个v-show替换v-else。
 
2.4 v-model
  v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。
 
2.5 v-for
  我们可以使用v-for指令基于源数据重复渲染元素,我们也可以使用index来呈现相对应数组索引,key获取键名,keys是唯一值。
 
  注:1.如果使用v-for迭代数字的话,值是从1开始而不是0,如:<p v-for="i in 10">这是第{{i}}个标签</p>——》 第一个 i=1
    2.在组件中,使用v-for循环的时候,或者在一些特殊情况中,必须指定唯一的 字符串/数字 类型 :key=""
 
2.6 v-bind
   v-bind指令用于给html标签设置属性,在绑定class或style时,支持其他类型的值,如数组或对象。可以简写为 :
  注:v-bind中,可以写合法的js表达式
 
2.7 v-on
v-on指令用于绑定事件监听器。可以简写为 @
v-on后面不仅可以跟参数,还可以增加修饰符:
.stop——调用event.stopPropagation()。
.prevent——调用event.preventDefault()。
.capture——添加事件侦听器时使用capture模式。
.self——实现只有点击当前元素时候,才会触发事件处理函数。
.keydown\keyup——只在只定按键上触发回调。Vue.js提供的键值有:[esc:27、tab:9、enter:13、space:32、delete:[8,46]、up:28、left:37、right:39、down:40]。
<!--停止冒泡-->
<button @click.stop="doThis"></botton>
<!--阻止默认行为-->
<button @click.prevent="doThis"></botton>
<!--阻止默认行为,没有表达式-->
<button @click.prevent></botton>
<!--串联修饰符-->
<button @click.stop.prevent="doThis"></botton>
<!--键修饰符,键别名-->
<button @keyup.enter="onEnter"></botton>
<!--键修饰符,键代码-->
<button @keyup.13="onEnter"></botton>
 
2.8 v-cloak
  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。但有时添加完毕后仍有部分变量会显示,是因为 v-cloak 的display属性被优先级别高的样式覆盖所导致,在Css中添加!important。
 
2.9 v-text
  v-text指令可以更新元素的textContent。在内部,{{Mustache}}插值也被编译为textNode的一个v-text指令。
 
2.10 v-html
  v-html指令可以更新元素的innerHTML。内容按普通HTML插入——数据绑定被忽略。不建议在网站上直接动态渲染任意HTML片段,很容易导致XSS攻击。
 
  注:1.默认v-text,v-html是没有闪烁问题
    2.v-text,v-html会覆盖元素中原本的内容,但是差值表达式( {{msg}} )只会替换自己的这个占位符,不会把整个元素的内容清空。

步入vue.js世界的更多相关文章

  1. 终于 Vue.js 成为世界一流的框架

    终于 Vue.js 成为世界一流的框架 随着美团开源基于 Vue.js 的微信小程序框架 mpvue, Vue.js 在微信小程序端的能力被补齐,于是 Vue.js 成为了一个唯一能在 Web, H5 ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  4. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

  5. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  6. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  7. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  8. GitHub趋势:Vue.js大有超过TensorFlow之势!

    2月,Github上第二受欢迎的项目是Flutter.Flutter的第一个测试版本是作为2018年世界移动通信大会的一部分而开始的. Flutter是一款移动UI框架,旨在帮助开发人员在iOS和An ...

  9. Vue.js 2.x:组件的定义和注册(详细的图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

随机推荐

  1. JS制作简易的考试答题管理系统

    答题卡系统: 网站运行效果 代码区域: HTML 代码: <style type="text/css"> body { font-size: 30px; backgro ...

  2. GitLab与Git的结合

    作为一名刚入职的大数据初级开发工程师,来到公司后发现代码是部署在GItLab上,之前一直认为代码可以放在码云.github上面,然后就很迷惑就对GitLab进行了了解,将git 和gitlab结合起来 ...

  3. HDU 多校 第三场 Fansblog

    代码千万条,规范第一条 训练赛的时候打表找规律,发现答案是1/(st-pre-1)!,奈何用错了模板,一直TLE到比赛结束,一直以为是卡什么输入输出或者是两个素数相差太大导致复杂度过高,读入优化啥的都 ...

  4. python pip安装requests库总提示:Fatal error in launcher...''

      1.python pip安装提示:Fatal error in launcher...'' 我查看了网上都说是电脑同时安装了python2  和python3时候才会有这个错误,但实际上我电脑只安 ...

  5. supervisor指南

    1 安装 yum install -y supervisor 如果提示没有这个安装包,则需要添加epel源 wget -O /etc/yum.repos.d/epel.repo http://mirr ...

  6. 跟着大彬读源码 - Redis 8 - 对象编码之字典

    目录 1 字典的实现 2 插入算法 3 rehash 与 渐进式 rehash 总结 字典,是一种用于保存键值对的抽象数据结构.由于 C 语言没有内置字典这种数据结构,因此 Redis 构建了自己的字 ...

  7. Java统计代码行数

    package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...

  8. 【0802 | Day 7】Python进阶(一)

    目 录  数字类型的内置方法 一.整型内置方法(int) 二.浮点型内置方法(float) 字符串类型内置方法 一.字符串类型内置方法(str) 二.常用操作和内置方法 优先掌握: 1.索引取值 2. ...

  9. Spark 系列(九)—— Spark SQL 之 Structured API

    一.创建DataFrame和Dataset 1.1 创建DataFrame Spark 中所有功能的入口点是 SparkSession,可以使用 SparkSession.builder() 创建.创 ...

  10. 洛谷 P2572 [SCOI2010]序列操作

    题意简述 维护一个序列,支持如下操作 把[a, b]区间内的所有数全变成0 把[a, b]区间内的所有数全变成1 把[a,b]区间内所有的0变成1,所有的1变成0 询问[a, b]区间内总共有多少个1 ...