一、遇见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. Flume+Kafka收集Docker容器内分布式日志应用实践

    1 背景和问题 随着云计算.PaaS平台的普及,虚拟化.容器化等技术的应用,例如Docker等技术,越来越多的服务会部署在云端.通常,我们需要需要获取日志,来进行监控.分析.预测.统计等工作,但是云端 ...

  2. sql上传木马

    第十周笔记—SQLmap和sql注入上传木马 目录 第十周笔记—SQLmap和sql注入上传木马 SQL注入 上传木马 SQLmap 六大模块 命令 参数 三种请求方式 取得系统shell sqlma ...

  3. 【iOS】PLA 3.3.12

    发件人 Apple Program License Agreement PLA We found that your app uses the Advertising Identifier but d ...

  4. input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法

    <el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...

  5. elasticsearch启动错误整理

    一.elasticsearch错误复现 (一).环境 配置环境 OS:CentOS 7.4 64bit elasticsearch版本: - ip:10.18.43.170 java版本:java - ...

  6. shardingjdbc 强制路由走主库查询实时数据 避免主从同步数据延迟

    @Beanpublic shardingsphere.demo.entity.Order order(){ shardingsphere.demo.entity.Order order=new Ord ...

  7. 浏览器输入URL到返回页面的全过程

    [问题描述] 在浏览器输入www.baidu.com,然后,浏览器显示相应的百度页面,这个过程究竟发生了什么呢? [第一步,解析域名,找到主机] 正常情况下,浏览器会缓存DNS一段时间,一般2分钟到3 ...

  8. react解析: render的FiberRoot(三)

    react解析: render的FiberRoot(三) 感谢 yck: 剖析 React 源码解析,本篇文章是在读完他的文章的基础上,将他的文章进行拆解和加工,加入我自己的一下理解和例子,便于大家理 ...

  9. Spring系列(二):Spring IoC应用

    一.Spring IoC的核心概念 IoC(Inversion of Control  控制反转),详细的概念见Spring系列(一):Spring核心概念 二.Spring IoC的应用 1.定义B ...

  10. nodeJs跨域设置(express,koa2,eggJs)

    原生跨域 var http=require('http'); var server = http.createServer(function (req,res) { res.setHeader('Ac ...