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. Python实现支持并发、断点续传的FTP

    参考网上一个FTP程序,重写了一遍,并稍加扩展 一.要求 1. 支持多用户同时登录 2. 可以注册用户,密码使用md5加密 3. 可以登录已注册用户 4.  支持cd切换目录,ls查看目录子文件 5. ...

  2. bootstrap下使用模态框，在模态框内输入框中回车时，模态框自动关闭的问题及解决方法

    使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(do ...

  3. 仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面

    转自http://fhqllt.iteye.com/blog/836186 每次想快速测试页面效果的时候,特别是在学习前端代码的时候,就想到W3school的那个试一试功能,一直都是用他们那个在线的版 ...

  4. mysql下将分隔字符串转换为数组

    MySQL存储过程可以用于分割字符串,下面就为您详细介绍这种MySQL存储过程的用法,供您参考学习之用. 现有一段字符串,如apple,banana,orange,pears,grape,要把它按照逗 ...

  5. 常用 C#操作字符串方法

    staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD"; Co ...

  6. Android签名机制

    Android APK 签名比对 发布过Android应用的朋友们应该都知道,Android APK的发布是需要签名的.签名机制在Android应用和框架中有着十分重要的作用. 例如,Android系 ...

  7. 部署samba服务之后，在客户端用挂载访问的方式，错误信息：mount: block device //192.168.1.108/mysqldata is write-protected, mounting read-only mount: cannot mount block device //192.168.1.108/mysqldata read-only

    部署samba服务之后,在客户端用挂载访问的方式,错误信息:mount: block device //192.168.1.108/mysqldata is write-protected, moun ...

  8. 【JAVA】【Eclipse】出现This element neither has attached source nor attached Javadoc...的解决方法

    This element neither has attached source nor attached Javadoc and hence no Javadoc could be found Ec ...

  9. LeetCode-179. Largest Number

    179. Largest Number Given a list of non negative integers, arrange them such that they form the larg ...

  10. SqlServer Where后面Case When语句的写法

    select * from tb where (case when col='***' then '***' else '***' end)='***'