代码改变世界

Vue2 第三天学习

2017-05-03 23:01  龙恩0707  阅读(646)  评论(0)  编辑  收藏  举报
个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来，特别在面试的时候，别人问你的知识点的时候答不上来那种尴尬，但是平时经常使用到，只是说不出所以来的，因此写博客是最好的思路。

阅读目录

1.计算属性

在模板内可以对一些属性的计算。如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <p>正序："{{ message }}"</p>
      <p>倒序："{{ reversedMessage }}"</p>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      },
      computed: {
        reversedMessage: function() {
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</html>

输出结果为：

正序："Hello"
倒序："olleH"

如上我们提供的函数将用作属性 vm.reversedMessage 的 getter 。如下代码：
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

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

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <p>Reversed message: "{{ reversedMessage() }}"</p>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      },
      methods: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      }
    });
    console.log(vm.reversedMessage()) // -> 'olleH'
  </script>
</html>

那么他们的区别是？
计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。也就是说只要message值没有发生变化，多次访问reversedMessage计算属性会立即返回之前的结果，不必再执行函数。
但是method方法只要发生重新渲染，总是会执行该函数。

2.Class 与 Style的绑定。

1. 绑定Html class --- 对象语法
我们可以传给 v-bind:class 一个对象，以动态的切换class。如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div class="static" v-bind:class = "{ active: isActive, 'text-danger': hasError }"></div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: true
      }
    });
  </script>
</html>

代码被渲染为如下：

<div id="app"><div class="static active text-danger"></div></div>

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

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div class="static" v-bind:class="classObject"></div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          'text-danger': true
        }
      }
    });
  </script>
</html>

渲染效果和上面一样。
也可以在这里绑定返回对象的计算属性。如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div class="static" v-bind:class="classObject"></div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        error: null
      },
      computed: {
        classObject: function () {
          return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal',
          }
        }
      }
    });
  </script>
</html>

渲染后的代码如下：

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

2. 数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div class="static" v-bind:class="[activeClass, errorClass]"></div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    });
  </script>
</html>

被渲染为如下代码：

<div id="app"><div class="static active text-danger"></div></div>

3. 使用在组件上
例如，如果你声明了这个组件:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
  el: '#app'
});

使用组件的时候 添加一些class，如下代码：

<div id="app">  
  <my-component class='baz boo'></my-component>
</div>

所有代码如下：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <my-component class='baz boo'></my-component>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">

    Vue.component('my-component', {
      template: '<p class="foo bar">Hi</p>'
    })
    var vm = new Vue({
      el: '#app'
    });
  </script>
</html>

HTML最终被渲染为：

<div id="app"><p class="foo bar baz boo">Hi</p></div>

同样的适用于绑定 HTML class :

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <my-component v-bind:class="{ active: isActive }"></my-component>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">

    Vue.component('my-component', {
      template: '<p class="foo bar">Hi</p>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    });
  </script>
</html>

当isActive为true的时候，HTML最终被渲染成为如下代码：

<div id="app"><p class="foo bar active">Hi</p></div>

4. 级联内联样式
如下级联样式代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">11112222</div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">

    Vue.component('my-component', {
      template: '<p class="foo bar">Hi</p>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30
      }
    });
  </script>
</html>

页面被渲染为如下代码：

<div id="app"><div style="color: red; font-size: 30px;">11112222</div></div>

也可以绑定到一个样式对象通常更好，让模板更清晰：如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id="app">  
      <div v-bind:style="styleObject">11112222</div>
    </div>  
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">

    Vue.component('my-component', {
      template: '<p class="foo bar">Hi</p>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'red',
          fontSize: '22px'
        }
      }
    });
  </script>
</html>

代码被渲染成为如下：

<div id="app"><div style="color: red; font-size: 22px;">11112222</div></div>

3.列表渲染

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

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <ul id='app'>
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        items: [
          {message: 'foo'},
          {message: 'bar'}
        ]
      }
    });
  </script>
</html>

页面代码被渲染为如下：

<ul id="app"><li>foo</li><li>bar</li></ul>

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

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <ul id='app'>
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        parentMessage: 'Parent',
        items: [
          {message: 'foo'},
          {message: 'bar'}
        ]
      }
    });
  </script>
</html>

页面被渲染为如下代码：

<ul id="app">
  <li>Parent - 0 - foo</li>
  <li>Parent - 1 - bar</li>
</ul>

可以用 of 替代 in 作为分隔符。
<div v-for="item of items"></div>
3-2 在template中也可以使用 v-for , 如下代码：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

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

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <ul id='app'>
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        object: {
          f: 'kongzhi',
          l: 'longen',
          Age: 30
        }
      }
    });
  </script>
</html>

代码被渲染为：

<ul id="app">
  <li>kongzhi</li>
  <li>longen</li>
  <li>30</li>
</ul>

可以提供第二个的参数为键名：如下代码：

<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>

第三个参数为索引：

<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>

3-4 整数的迭代
v-for 也可以取整数。如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <span v-for="n in 10">{{ n }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app'
    });
  </script>
</html>

页面代码被渲染为：

<div id="app">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

3-5 组件使用v-for
组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props. 如下代码：

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>

下面是一个demo；页面上默认有3项列表数据，当用户在输入框输入值的时候 按enter键的时候 会增加一项，当然也可以点击删除x删除一项。

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <input 
        v-model='newTodoText'
        v-on:keyup.enter='addNewTodo'
        placeholder="Add a todo" 
      >
      <ul>
        <li 
          is='todo-item'
          v-for="(todo, index) in todos"
          v-bind:title='todo'
          v-on:remove="todos.splice(index, 1)"
        ></li>
      </ul>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('todo-item', {
      template: '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>',
      props: ['title']
    })
    new Vue({
      el: '#app',
      data: {
        newTodoText: '',
        todos: [
          'do the dishes',
          'Take out the trash',
          'Mow the lawn'
        ]
      },
      methods: {
        addNewTodo: function() {
          this.todos.push(this.newTodoText);
          this.newTodoText = '';
        }
      }
    });
  </script>
</html>

查看效果

4.事件处理器

 4-1 v-on 监听事件 代码如下：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <button v-on:click="counter += 1">增加1</button>
      <p>这个按钮被点击了 {{ counter }}次。</p>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
  </script>
</html>

查看效果

4-2 方法事件处理器
直接把 JavaScript 代码写在 v-on 指令中是不可行的，比如当代码变得很复杂的时候，因此 v-on 可以接收一个定义的方法来调用。

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <button v-on:click="greet">Greet</button>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        name: 'vue'
      },
      methods: {
        greet: function(event) {
          alert('hello ' + this.name + '!'); // hello vue
          // event 是原生的 DOM事件
          alert(event.target.tagName); // BUTTON
        }
      }
    })
  </script>
</html>

查看效果

也可以用 JavaScript 直接调用方法
example1.greet() // -> 'Hello Vue'

4-3 内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <button v-on:click="say(1)">1</button>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      methods: {
        say: function(message) {
          alert(message);
        }
      }
    });
  </script>
</html>

查看效果

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <button v-on:click="warn('warn message', $event)">submit</button>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      methods: {
        warn: function(message, event) {
          console.log(event); // 打开控制台查看 打印出原生事件的所有信息
          alert(message);
        }
      }
    });
  </script>
</html>

查看效果

4-4 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点。
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

<!-- 阻止点击事件冒泡 -->
<a v-on:click.stop='dothis'></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent='onSubmit'></form>

<!-- 修饰符可以连着写 -->
<a v-on:click.stop.prevent='dothis'></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 （2.14 新增）-->
<a v-on:click.once="doThis"></a>

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
// Vue 为最常用的按键提供了别名：
 <!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
// 全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

5.表单控件绑定 

v-model 负责监听用户的输入事件以更新数据。
5-1 input框如下代码：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <input v-model="message" placeholder="edit me" />
      <p>Message is: {{ message }}</p>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        message: ''
      }
    });
  </script>
</html>

查看效果

5-2 多行文本 textrea

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <span>message is: </span>
      <p>{{ message }}</p>
      <br />
      <textarea v-model="message" placeholder="add multiple lines" style="height: 100px"></textarea>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        message: ''
      }
    });
  </script>
</html>

查看效果

5-3 复选框-- 单个勾选框 逻辑值

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <input type="checkbox" v-model='checked' />
      <label>{{ checked }}</label>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        checked: false
      }
    });
  </script>
</html>

查看效果

复选框-- 多个勾选框，绑定到同一个数组

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <input type="checkbox" value="Jack" v-model="checkedNames">
      <label>Jack</label>
      <input type="checkbox" value="John" v-model="checkedNames">
      <label>John</label>
      <input type="checkbox" value="Mike" v-model="checkedNames">
      <label>Mike</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        checkedNames: []
      }
    });
  </script>
</html>

查看效果

单选按钮

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <input type="radio" value="One" v-model="picked">
      <label>One</label>
      <br>
      <input type="radio" value="Two" v-model="picked">
      <label>Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        picked: ''
      }
    });
  </script>
</html>

查看效果

选择列表 -- 单选列表

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        selected: 'A'
      }
    });
  </script>
</html>

查看效果

多选列表（绑定到一个数组）：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <select v-model="selected" multiple style="width: 50px">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>Selected: {{ selected }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        selected: []
      }
    });
  </script>
</html>

查看效果

动态选项，用 v-for 渲染：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var example1 = new Vue({
      el: '#app',
      data: {
        selected: 'A',
        options: [
          { text: 'one', value: 'A' },
          { text: 'two', value: 'B' },
          { text: 'three', value: 'C' },
        ]
      }
    });
  </script>
</html>

查看效果

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值

<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">