vue.js 从基础到实战(汇总)

2017-10-24 本文已影响467人记忆的时间差

vue.js 从基础到实战

Vue.js 介绍

什么是vue

vue一词是法语，同英语中的view。
vue.js是一套构建用户界面的MVVM框架。vue的核心库只关注视图层，经常与其他库或者已有的项目整合

vue的目的

1). 解决数据绑定问题
2). vue框架生产的主要目的是为了开发大型单页应用(SPA:single page appliacation)，对移动端支持较好，PC端也支持，而angular对PC端支持好，移动端支持不是很好
3). vue支持组件化（方便复用），也就是将页面封装成若干个组件，采用积木式编程，使页面的复用度达到最高。实现一次开发多次复用的目的

SPA简介：在制作APP时，需要运用Android程序员，iOS程序员和.net程序员（Windows phone），很浪费财力物力，于是人们想用HTML5开发APP，但是遇到一个问题：从一个页面调到另一个页面会消耗很长的时间。解决方法是将APP所用到的所有页面构建出来放到一个网页上，根据JavaScript按照一定的规则来控制到底显示哪一个页面，所有切换通过router完成，这就是单页面应用。所以SPA主要是解决H5做APP卡顿的问题。

vue的特性

1). MVVM模型
2). 组件化
3). 指令系统
4). vue.js从2.0开始支持虚拟DOM，vue.js1.0操作的是真实的DOM，而不是虚拟的DOM（虚拟DOM可以提升页面的刷新速度）

MVVM模式 :
M：model 业务模式用处：处理数据，提供数据
V：view 用户界面，用户视图
业务模式model中的数据发生改变时，用户视图view也随之改变；用户视图view改变时，业务模式model中的数据也可以发生改变

vue 入门

1.) vue.js和vue.min.js

vue.js是完整的vue文件，包括换行，空格，注释等，一般用于开发使用
vue.min.js是压缩之后的vue文件，在功能上与vue.js无差别，但它是压缩过的，文件比较小，没有注释，也将错误调试信息关闭了，它的下载速度更快，一般用于线上项目

2.) vue.js是一个js库，直接在外部引入即可

<script src="js/vue.js"></script>

3.) vue.js提供了Vue类，它是一个对象

var app = new Vue({});

4.) 对象参数里常用的两个属性：el和data

var app = new Vue({
    el : '#app',    // 管理id为app的元素
    data : {}    // data的核心作用是存放显示在页面中的数据，data必须是一个对象

})

var app = new Vue({
    el : '.app'        // 管理class为app的元素
})

5.) 创建一个实例

<div id="app">
    {{ message }}        
</div>

var app = new Vue({
    el : '#app',
    data : {
        message : 'hello world'    
    }
})

实例解析：
在用户界面view中，通过{{ }}的形式将data中的数据显示在页面中
而在用户界面中，{{ }}绑定的是data的key值（这里是message），而页面中显示的是该key的value值（这里是hello world）

app这个变量会代理vue中data的数据，所以我们访问data中的数据时，直接用app.message就可以了

Vue.js 计算属性

为什么使用计算属性？

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板不再简单和清晰。在意识到这是反向显示 message 之前，你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候，问题会变得更糟糕。
这就是对于任何复杂逻辑，你都应当使用计算属性的原因。

基础例子
注: Vue 中 computed 是实时计算的意思。

<div id="app">
 <p>原始的消息 : "{{ message }}"</p>
 <p>反转的消息: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello'
 },
 computed: {
  //反转文本
   reversedMessage: function () {
   return this.message.split('').reverse().join('');
  } 
 }
});
</script>

计算属性和 Methods（方法）

我们可以通过调用表达式中的 method 来达到同样的效果：

<div id="app">
 <p>原始的消息 : "{{ message }}"</p>
 <p>反转的消息: "{{ reversedMessage() }}"</p>
</div>
<script type="text/javascript">
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello'
 },
 methods: {
  //反转文本
  reversedMessage: function () {
   return this.message.split('').reverse().join('');
  } 
 }
});
</script>

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
一个比较例子

computed:{
    now: function (){
        return Date.now();
    }
}

相比而言，只要发生重新渲染，method 调用总会执行该函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。

计算属性 vs Watched 属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。
当你有一些数据需要随着其它数据变动而变动时，你可以使用 watch。然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>
<script type="text/javascript">
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
});
vm.$data.firstName = 'hi..';
</script>

上面代码是命令式的和重复的。将它与计算属性的版本进行比较：

var vm = new Vue({

  el: '#demo',

  data: {

    firstName: 'Foo',

    lastName: 'Bar'

  },

  computed: {

    fullName: function () {

      return this.firstName + ' ' + this.lastName

    }

  }

})
vm.$data.firstName = 'hi..';

好得多了，不是吗？

Vue.js Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class绑定

普通绑定

<style type="text/css">
    .red{color:#FF0000;}
</style>

<div id="app" :class="test">
 test...
</div>
<script type="text/javascript" src="js/vue.min.js" charset="UTF-8"></script>
<script type="text/javascript">
var vue = new Vue({
 el : '#app',
 data : {
  test : 'red'
 }
});
</script>

对象语法绑定

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值。
你可以在对象中传入更多属性用来动态切换多个 class。此外， v-bind:class 指令也可以与普通的 class 属性共存。如下模板：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
如下 data ：
data: {
  isActive: true,
  hasError: false
}

渲染为：

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ， class列表将变为 "static active text-danger" 。
你也可以直接绑定数据里的一个对象：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active : this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]">

绑定内联样式style

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。

Vue.js 条件渲染

v-if

<div id="app">
  <h1 v-if="ok">Yes</h1>
</div>
<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {ok : true}
});
</script>

在 <template> 中配合 v-if 条件渲染一整组

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含<template> 元素。

<div id="app">
 <template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
 </template>
</div>
<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {ok : true}
});
</script>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>
<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {ok : true}
});
</script>

v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次：

<div id="app">
 <h1 v-if="color == 'red'" style="color:#FF0000;">red</h1>
 <h1 v-if="color == 'green'" style="color:#00FF00;">green</h1>
 <h1 v-else style="color:#0000FF;">blue</h1>
</div>

<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {color : 'green'}
});
</script>

类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，如果你允许用户在不同的登录方式之间切换:

<div id="app">
    <template v-if="loginType === 'username'">
         <label>Username</label>
         <input placeholder="Enter your username" />
    </template>
    <template v-else>
         <label>Email</label>
         <input placeholder="Enter your email address" />
    </template>
    <input type="button" value="切换" v-on:click="changeType" />
</div>

<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {'loginType' : 'username'},
 methods : {
  changeType : function(){
   if(this.loginType == 'username'){
    this.loginType = 'email';
   }else{
    this.loginType = 'username';
   }
  }
 }
});
</script>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<div id="app">
    <template v-if="loginType === 'username'">
         <label>Username</label>
         <input placeholder="Enter your username" key="username-input" />
    </template>
    <template v-else>
         <label>Email</label>
         <input placeholder="Enter your email address" key="email-input" />
    </template>
    <input type="button" value="切换" v-on:click="changeType" />
</div>

<script type="text/javascript">
var app = new Vue({
 el : '#app',
 data : {'loginType' : 'username'},
 methods : {
  changeType : function(){
   if(this.loginType == 'username'){
    this.loginType = 'email';
   }else{
    this.loginType = 'username';
   }
  }
 }
});
</script>

现在，每次切换时，输入框都将被重新渲染。
注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

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

<h1 v-show="ok">Hello!</h1>

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

v-if vs v-show

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

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

Vue.js 列表渲染

v-for迭代分为数组迭代和对象迭代
作用：控制HTML元素中的循环，实现语句列表的生成
用法： v-for = “item in 集合”，其中item指集合的子项，集合指被遍历的元素，通常为数组
用处：用处：写在谁上边，谁遍历

数组迭代

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
基本用法

<ul id="example-1">
    <li v-for="item in items">{{ item.message }}</li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
</script>

运行结果

* Foo
* bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-1">
    <li v-for="(item, index) in items">{{ index }} - {{ item.message }}</li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
</script>

运行结果

0 - Foo
1 - Bar

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

template渲染

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：

<ul id="example-1">
    <template v-for="item in items">
         <li>{{ item.message }}</li>
         <li>-----------------------------</li>
     </template>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
</script>

运行结果


* Foo
* ----------
* Bar
* ----------

对象遍历

可以用 v-for 通过一个对象的属性来迭代。

<ul id="example-1">
    <li v-for="( value, key ) in obj">{{ key }} : {{ value }}</li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    obj:{
     name : 'hcoder',
     age  : '18'
    }
  }
});
</script>

运行结果

* hcoder -- name
* 18 -- age

还可以接受第三个参数作为索引

<ul id="app3">
    <li v-for="(value, key, index) in object">
        {{ index }} : {{ key }} : {{ value }}
    </li>
</ul>

运行结果

* hcoder -- name--1
* 18 -- age--2

整数迭代

v-for 也可以取整数。在这种情况下，它将重复多次模板。

  <div v-for="n in 5">{{ n }} </div>

运行结果

* 1
* 2
* 3
* 5

也可以将10替换成一个变量，从data中提取数据

<div id="app4">
    <span v-for="n in m">
        {{ n }}
    </span>
</div>
    var app4 = new Vue({
         el : '#app4',
         data : {
           m : 5
          }
    })

Vue.js 数组操作

变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push() 添加元素

<ul id="example-1">
    <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
example1.$data.items.push({message :  'test'});
</script>

运行结果

Foo

Bar
test

pop() 删除最后一个

<ul id="example-1">
    <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
example1.$data.items.pop();
</script>

运行结果

Foo

shift() 删除第一个

<ul id="example-1">
    <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
example1.$data.items.shift(); 
</script>

运行结果

Bar

unshift() 添加一个到数组最前面

<ul id="example-1">
    <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
example1.$data.items.unshift({message :'hi..'}); 
</script>

运行结果

hi

splice() 插入\删除\替换数组的元素

参数描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素

example1.$data.items.splice(0,1,{message:'splice'});

sort() 排序（升序）

<ul id="example-1">
    <li v-for="item in items" :key="item.id">{{ item }} </li>
</ul>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      2,6,4
    ]
  }
});
example1.$data.items.sort();

运行结果

2

reverse() 排序（降序）

example1.$data.items.reverse();

事件处理器v-on

v-on 指令监听 DOM 事件

<div id="example-1">
 {{ num }}
     <input type="button" value="增加" v-on:click="test" />
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    num : 0
  },
  methods : {
   test : function(){
    this.num++;
   }
  }
});
</script>

内联处理器方法

<div id="example-1">
 {{ sayContent }}
     <input type="button" value="增加" v-on:click="test('hi... ')" />
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    sayContent : ''
  },
  methods : {
   test : function(txt){
    this.sayContent = txt;
   }
  }
});
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop

点击span阻止冒泡

<div id="example-1">
 {{ sayContent }}
     <div v-on:click="doThis">点击试试<span v-on:click.stop="sayhi">hi...</span></div>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    sayContent : ''
  },
  methods : {
   doThis : function(){
    alert(1);
    this.sayContent = 'hi';
   },
   sayhi : function(){
    alert('hi');
   }
  }
});
</script>

.self
只当事件在该元素本身（比如不是子元素）触发时触发回调

<div id="example-1">
 {{ sayContent }}
     <div v-on:click.self="doThis">点击试试<span>hi...</span></div>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    sayContent : ''
  },
  methods : {
   doThis : function(){
    alert(1);
    this.sayContent = 'hi';
   }
  }
});
</script>

.once
只执行一次

<div id="example-1">
 {{ sayContent }}
    <div v-on:click.once="doThis">点击试试</div>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    sayContent : ''
  },
  methods : {
   doThis : function(){
    alert(1);
    this.sayContent = 'hi';
   }
  }
});
</script>

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab

.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

表单控件

表单控件绑定基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
对于要求 IME (如中文、日语、韩语等) (IME意为’输入法’)的语言，你会发现v-model不会在 ime 输入中得到更新。如果你也想实现更新，请使用 input事件

文本

<div id="example-1">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>

<script type="text/javascript">
    var example1 = new Vue({
      el: '#example-1',
         data: {
         message : ''
         }
    });
</script>

复选枢

<div id="example-1">
     <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
     <label for="jack">Jack</label>
     <input type="checkbox" id="john" value="John" v-model="checkedNames">
     <label for="john">John</label>
     <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
     <label for="mike">Mike</label>
     <br>
     <span>Checked names: {{ checkedNames }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    checkedNames : []
  }
});
</script>

单选框

<div id="example-1">
     <input type="radio" id="one" value="One" v-model="picked">
     <label for="one">One</label>
     <br>
     <input type="radio" id="two" value="Two" v-model="picked">
     <label for="two">Two</label>
     <br>
     <span>Picked: {{ picked }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    picked : ''
  }
});
</script>

选择列表

<div id="example-1">
     <select v-model="selected">
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
     </select>
     <span>Selected: {{ selected }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    selected : ''
  }
});
</script>

表单修饰符

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<div id="example-1">
    <input type="text" name="test" v-model.lazy="val" />
     <span>val: {{ val }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
   val : ''
  }
});
</script>

.number
将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）。

<div id="example-1">
     <input type="text" name="test" v-model.lazy.number="val" />
     <span>val: {{ val }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
   val : ''
  }
});
</script>

.trim
自动过滤用户输入的首尾空格

<div id="example-1">
    <input type="text" name="test" v-model.trim="val" />
     <span>val: {{ val }}</span>
</div>

<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
   val : ''
  }
});
</script>

组件

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

使用组件

<div id="example">
    <!-- 使用组件 -->
    <c-say></c-say>
</div>

<script type="text/javascript">
//1、创建组件
Vue.component('c-say', {
 template : '<h1>say....</h1>'
});

//2、实例化 Vue
var vm = new Vue({
 el: '#example'
});
</script>

运行结果

say...

局部注册
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

<div id="example">
     <c-say></c-say>
</div>

<script type="text/javascript">
//创建组件
var vm = new Vue({
 el: '#example',
 components : {
  'c-say' : {
   template : '<h1>say....</h1>'
  }
 }
});
</script>

data 必须是函数
通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。实际上，如果你这么做：

<div id="example">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

<script type="text/javascript">
//创建组件
Vue.component('simple-counter', {
   template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: {
     message: 'hello'
 }
})
new Vue({
  el: '#example'
})
</script>

那么 Vue 会停止，并在控制台发出警告，告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开 Vue 的警告：

<div id="example">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

<script type="text/javascript">
//创建组件
Vue.component('simple-counter', {
   template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function(){
  return {counter : 0};
 }
})
new Vue({
  el: '#example'
})
</script>

DOM 模版解析说明

当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

<div id="example">
  <table>
   <tr is="my-row"></tr>
 </table>
</div>

<script type="text/javascript">
//创建组件
Vue.component('my-row', {
 template: '<tr><td>hi..</td></tr>'
});
var vm = new Vue({
 el : '#example'
});
</script>

Prop 传递数据

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
子组件要显式地用 props 选项声明它期待获得的数据

<div id="example">
  <child my-message="hi...."></child>
</div>

<script type="text/javascript">
//创建组件
Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
var vm = new Vue({el : '#example'});
</script>

注：

HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式)

动态 Prop

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <mytmp :message="msg"></mytmp>
</div>

<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
<script type="text/javascript">
Vue.component('mytmp', {
 props: ['message'],
 template: '<p>{{ message }}</p>'
});
var vue = new Vue({
 el : "#app",
 data : {
  msg : 'i am message...'
 }
});
</script>

字面量语法 vs 动态语法

初学者常犯的一个错误是使用字面量语法传递数值：

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

vue.js 从基础到实战(汇总)

vue.js 从基础到实战

Vue.js 介绍

什么是vue

vue的目的

vue的特性

vue 入门

Vue.js 计算属性

为什么使用计算属性？

计算属性 和 Methods（方法）

计算属性 vs Watched 属性

Vue.js Class 与 Style 绑定

class绑定

普通绑定

对象语法绑定

数组语法

绑定内联样式style

对象语法

自动添加前缀

多重值

Vue.js 条件渲染

v-if

v-else

v-else-if

用 key 管理可复用的元素

v-show

v-if vs v-show

v-if 与 v-for 一起使用

Vue.js 列表渲染

数组迭代

template渲染

对象遍历

整数迭代

Vue.js 数组操作

push() 添加元素

pop() 删除最后一个

shift() 删除第一个

unshift() 添加一个到数组最前面

splice() 插入\删除\替换数组的元素

sort() 排序（升序）

reverse() 排序（降序）

事件处理器v-on

v-on 指令监听 DOM 事件

内联处理器方法

事件修饰符

键值修饰符

表单控件

表单控件绑定基础用法

文本

复选枢

单选框

选择列表

表单修饰符

组件

什么是组件？

使用组件

Prop 传递数据

动态 Prop

字面量语法 vs 动态语法

猜你喜欢

热点阅读

计算属性和 Methods（方法）