Vue学习（一）——Vue认识、基础用法、声明渲染、绑定属性、遍历、条件判断、绑定事件、表单输入

一、Vue认识

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、获取vue.js：

先安装淘宝镜像——cnpm i vue——cnpm i jquery@1
（1）、现在命令行中安装淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
（2）、建立一个文件夹，在此文件夹上打开命令行，输入：
cnpm i vue
cnpm i jquery@1

3、基础用法：

4、声明式渲染：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

  

    模板语法声明式渲染数据： {{ message }}
  

5、绑定属性：

在js中：
odiv.setAttribute(key, value)
odiv.getAttribute(key)
在vue中：
message是一个变量： 如果属性值是变量，记得使用绑定属性

！！！注意：v-bind:message 中间不能有空格
简写形式 :message
例如：

  

   绑定属性：
   

  

6、遍历 – 循环：

既可以遍历数组，也可以遍历对象，字符串
遍历数组
v-for = ‘item in/of list’
v-for = ‘(item, index) in/of list’ — index代表索引值
遍历对象
v-for = ‘value in/of obj’ // 遍历为属性值
v-for = ‘(value, key) in/of obj’ // key为属性，value为属性值
v-for = ‘(value, key, index) in/of obj’ // key为属性，value为属性值,index为索引
遍历离不开一个属性 key — 一把锁对应的有贴标签的钥匙 — 提升性能，如果没有，可以使用index

例如：

  

    {{ item }}

    

    {{ item.title }}

    

    
      {{ item.title }}
      {{itm}}---

    
    

    

      
{{key}}:{{ item }}
    
  

7、条件判断：

V-if：
在字符串模板中，比如vue，我们得像这样写一个条件块：
Html：

          
现在你看到我了

Js：

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

V-show：
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

  
Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
！！！注意，v-show 不支持 元素，也不支持 v-else。

V-show与v-if的区别：
1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3、相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
4、一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8、表单绑定事件

可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

例如：

  

    text/url/tel/email/password/number:
   {{username}}
   

   checkbox---选中未选中
    {{flag}}
    

    checkbox
     篮球
     足球
     乒乓球
     排球
    {{cb}}
    

    radio
     男
     女
    ---{{sex}}
    

    select
    
      请选择
      10
      20
      30
    
    {{num}}
  

注意：
1、v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
2、对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。