PS：先说说学习Vue的缘由吧，学习完了React之后，突然发现又出了一款叫做vue的框架，而且据说可以引领又一波新框架的潮流，我容易吗我！！！
 
　　Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
　　Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
　　
　　Vue在使用的时候给我的感觉就是跟AngularJs很像很像，但是它的功能又是如此的强大，让我学着学着就沉迷进去了，它让我想到一个词，就是智能化。
　　这里有一段Vue学习时的代码，可以给大家分享一下。
　　

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<form id="demo">
 <!-- text -->
 <p>
  <input type="text" v-model="msg">
  {{msg}}
 </p>
 <!-- checkbox -->
 <p>
  <input type="checkbox" v-model="checked">
  {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
  <input type="radio" name="picked" value="one" v-model="picked">
  <input type="radio" name="picked" value="two" v-model="picked">
  {{picked}}
 </p>
 <!-- select -->
 <p>
  <select v-model="selected">
   <option>one</option>
   <option>two</option>
  </select>
  {{selected}}
 </p>
 <!-- multiple select -->
 <p>
  <select v-model="multiSelect" multiple>
   <option>one</option>
   <option>two</option>
   <option>three</option>
  </select>
  {{multiSelect}}
 </p>
 <p><pre>data: {{$data | json 2}}</pre></p>
</form>
<script>
 new Vue({
  el: '#demo',
  data: {
   msg  : 'hi!',
   checked : true,
   picked : 'one',
   selected : 'two',
   multiSelect: ['one', 'three']
  }
 });
 
</script>
</body>
</html>
 
Vue.js有很多奇特而又强大的特性
惰性更新
默认情况下，v-model 会在每个 input 事件之后同步输入的数据。你可以添加一个 lazy 特性，将其改变为在 change 事件之后才进行同步。
 
<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>
 

转换为数字
如果你希望将用户的输入自动转换为数字，你可以在 v-model 所在的 input 上添加一个 number 特性。没有试验成功，不知道什么原因

<input v-model="age" number>

绑定表达式
当使用 v-model 在单选框和复选框时，被绑定的值可以是布尔值或字符串：

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当单选框被选中时 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

这里有一点小的局限性——有的时候我们想把背后的值绑定到一些别的东西上。你可以按下面这个例子实现：

1.复选框

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被选中时：
vm.toggle === vm.a
// 被取消选中时：
vm.toggle === vm.b
 
2.单选框
<input type="radio" v-model="pick" exp="a">
// 被选中时：
vm.pick === vm.a

动态select选项
当你需要为一个 <select> 元素动态渲染列表选项时，推荐将 options 特性和 v-model 指令配合使用，这样当选项动态改变时，v-model 会正确地同步：

<select v-model="selected" options="myOptions"></select>

在你的数据里，myOptions 应该是一个指向选项数组的路径或是表达式。
这个可选的数组可以包含简单的数组：

options = ['a', 'b', 'c']

或者可以包含格式如 {text:'', value:''} 的对象。该对象格式允许你设置可选项，让文本展示不同于背后的值：

options = [
 { text: 'A', value: 'a' },
 { text: 'B', value: 'b' }
]
会被渲染成为
<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>
 
1.选项组
另外，数组里对象的格式也可以是 {label:'', options:[...]}。这样的数据会被渲染成为一个 <optgroup>：
[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]
<select>
<optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
</optgroup>
<optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
</optgroup>
</select>
2.选项过滤
你的原始数据很有可能不是这里所要求的格式，因此在动态生成选项时必须进行一些数据转换。为了简化这种转换，options特性支持过滤器。将数据的转换逻辑做成一个可复用的 自定义过滤器 通常来说是个好主意：
Vue.filter('extract', function (value, keyToExtract) {
return value.map(function (item) {
 return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract 'name'">
</select>

上述过滤器将像 [{ name: 'Bruce' }, { name: 'Chuck' }] 这样的原始数据转化为 ['Bruce', 'Chuck']，从而符合动态选项的格式要求。

3.静态默认选项
除了动态生成的选项之外，你还可以提供一个静态的默认选项：

<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>

基于 users 动态生成的选项将会被添加到这个静态选项后面。如果 v-model 的绑定值为除 0 之外的伪值，则会自动选中该默认选项。

输入debounce
在一次输入被同步到模型之前，debounce 特性允许你设置一个每次用户事件后的等待延迟。如果在这个延迟到期之前用户再次输入，则不会立刻触发更新，而是重置延迟的等待时间。当每次更新前你要执行繁重作业时会很有用，例如一个基于 ajax 的自动补全功能。有效的减少重复无用的提交

<input v-model="msg" debounce="500">
注意 debounce 参数并不对用户的输入事件进行 debounce：它只对底层数据的 “写入” 操作起作用。因此当使用 debounce 时，你应该用 vm.$watch() 而不是 v-on 来响应数据变化。

PS:我的这些总结也是在学习中远征博引来的，分享前端知识，顺带提升下自己~

Vue.JS入门学习随笔的更多相关文章

  1. vue.js 入门学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. VUE.js入门学习（4）-动画特效

    1.VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定) 动画是通过在某一时间段来添加样式决定的. 要通过 transition进行包裹. 2.在VUE中使用 anim ...

  3. VUE.js入门学习（2）-基础精讲

    1.VUE 实例 - 一个项目是有很多的vue实例拼装的.每一个组建就是vue的实例. var vm = new Vue() 2.VUE 实例生命周期钩子 生命周期函数:VUE实例在某一个时间点会自动 ...

  4. vue.js入门学习

    可以用淘宝npm镜像 然后安装 然后初始化项目: Watch就是一个监听 v-if是如果为false就根本不在页面存在这个元素 v-show是通过display:none来控制这个元素的显示和隐藏 r ...

  5. VUE.js入门学习（3）-深入理解VUE组建

    1.使用组件的细节点 (1)is="模版名" (2)在子组建定义data的时候,data必须是一个函数,而不能是一个对象,每个子组建都有自己的数据存储.之间不会相互影响. (3)操 ...

  6. VUE.js入门学习（1）-起步

    1.hello world <div id="app">{{content}}</div>var app = new Vue({ el:'#app', da ...

  7. VUE.js入门学习（5）- 插槽和作用域插槽

    插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...

  8. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  9. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

随机推荐

  1. centos6.3(64位) 安装apr

    安装apr来提高tomcat 的可伸缩性和性能 ? 1 cd /usr/local/ 1  下载apr 和 apr-util最新版 ? 1 2 3 wget  http://apache.fayea. ...

  2. [源码]String StringBuffer StringBudlider（2）StringBuffer StringBuilder源码分析

      纵骑横飞 章仕烜   昨天比较忙 今天把StringBuffer StringBulider的源码分析 献上   在讲 StringBuffer StringBuilder 之前 ,我们先看一下 ...

  3. 开源免费的天气预报接口API以及全国所有地区代码(国家气象局提供)

    天气预报一直是各大网站的一个基本功能,最近小编也想在网站上弄一个,得瑟一下,在网络搜索了很久,终于找到了开源免费的天气预报接口API以及全国所有地区代码(国家气象局提供),具体如下: 国家气象局提供的 ...

  4. ajaxpro返回值类型总结-DataTable（转）

    ajaxpro使用总结系列其他内容 ajaxpro ajaxmethod 重载调用问题 ajaxpro方法ajaxmethod调用示例 ajaxpro返回值类型总结-string,int ajaxpr ...

  5. 虚拟机中CentOS 7下PHP环境配置

    为了简单起见,虚拟机网卡设置为桥接模式 1.yum install  httpd php 2.yum install mariadb 3.启动mariadb systemctl start maria ...

  6. AngularJS－Uncaught Error: [$injector:modulerr]

    我在实验AngularJS-系统代码的配置和翻译的时候遇到了如下图所示的错误: 在JS编程的时候会经常遇到,XXX不是一个函数,XXX未定义等等错误,只要看到和自己编写的代码语句相关的东西直接找到就能 ...

  7. Access denied for user 'root'@'localhost' (using password:YES)

    版权所有,未经博主允许不得转载. 今天发现服务器mysql连接不上,报 can't connect to mysql server on 'root'@'ip' (61) 照例ssh到服务器,发现my ...

  8. IntelliJ IDEA 自动化工具安装并添加自动化测试框架

    IntelliJ IDEA是一个用于开发人员开发和测试人员自动化测试的测试工具,类似于eclipse. 优点:插件多自身可以携带,自身携带cucumber自动化测试框架,类似于junit一样 缺点:r ...

  9. 数据库——DQL（语句查询）

    查询的基本结构: 概念: 查询(DQL)是数据库中最为常用和复杂的一种SQL结构,学会编写查询SQL是程序员必须具备的能力. 要从数据库中查询数据,我们要使用SQL的SELECT语句.标准SELECT ...

  10. arcgis_engine_c++_runtime_r6034_error

    在启动项目中添加app.manifest文件 <?xml version="1.0" encoding="utf-8"?> <asmv1:as ...