vue.js 基础

注：基于vue.js开发文档总结

<script src="javascripts/vue.js" type="text/javascript" charset="utf-8" ></script>

<!-- 最低支持IE9  
 1.....双向绑定
 <div id="app">
     <p>{{message }}</p>
     <input type="text" v-model='message'>
 </div>

 new Vue({
        el: '#app',
        data: {
            message: 'hello Vue.js'
        }
    })
2.处理用户输入
<div id="app">
     <p>{{message}}</p>
     <button  class="btn btn-default" v-on:click='reverseMessage'>click me</button>
 </div>
new Vue({
    el: '#app',
    data: {
         message: 'hello vue.js'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('');//字符串倒置
        }
    }
})
....................构造器..........................
var vm = new Vue({
    //选项对象  mvvm模式中的ViewModel
})
每个Vue实例会代理（引用）其data对象里的所有属性
var data = {a: 1}
var vm = new Vue({
    data: data  //vm.a===data.a 引用,同时改变
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
  // $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})
只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，不会触发视图更新
Vue()生命周期

---------------数据绑定语法-------------------
  1.文本 使用 “Mustache” 语法（双大括号）{{ meg }}
Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。
单次插值,数据变化不会再引起插值更新：<span>This will never change: {{* msg }}</span>

  2.原始的html 危险！！ <div>{{{ raw_html }}}</div>
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。记住，只对可信内容使用 HTML 插值，永不用于用户提交的内容。
  2.1 特性差值  <div id="item-{{ id }}"></div>

  3.放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。
    3.1 javascript表达式
   每个绑定只能包含单个表达式 如{{ message.split('').reverse().join('') }}
   {{ var a = 1 }}  //这是一个语句，不是一个表达式
   {{ if (ok) { return message } }}  // 流程控制也不可以，可改用三元表达式
   3.2过滤器  {{ message | capitalize }}  capitalize：js函数

 4.指令  带有前缀 v- 的特性。指令的值限定为绑定表达式
    当其表达式的值改变时把某些特殊的行为应用到 DOM 上
    p v-if="greeting">Hello!</p>
    v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素
   4.1参数(:)  v-bind 指令用于响应地更新 HTML 特性 <a v-bind:href="url"></a> 等同于特性差值href="{{url}}"
   4.2修饰符(.)  <a v-bind:href.literal="/a/b/c"></a>

 5.缩写 在构建单页应用（SPA）时 v-bind v-on可缩写
 <a v-bind:href="url"></a>  ===  <a :href="url"></a>
 <a v-on:click="doSomething"></a> === <a @click="doSomething"></a>


---------------------计算属性----------------------------
 模板描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。 多于一个表达式的逻辑，应当使用计算属性。
         var vm = new Vue({
          el: '#demo',
          data: {
            firstName: 'Foo',
            lastName: 'Bar'
          },
          computed: {
            fullName: function () {
              return this.firstName + ' ' + this.lastName
            }
          }0
        })

-------------------Class 与 Style 绑定---------------------------
(一)html Class绑定
1.1.对象语法   传给 v-bind:class 一个对象，动态地切换 class。
             注意 v-bind:class 指令可以与普通的 class 特性共存：
             v-bind:class="{ 'class-a': isA, 'class-b': isB }  
             data: {  
               isA: true,
               isB: false
             }
             <div v-bind:class="classObject"></div>
             data: {
              classObject: {
                'class-a': true,
                'class-b': false
              }
            }  可以与计算属性联合使用
1.2.数组语法  <div v-bind:class="[classA, classB]">  
            data: {
              classA: 'class-a',
              classB: 'class-b'
            }   渲染为：<div class="class-a class-b"></div>
(二)绑定内联样式  v-bind:style
 2.1对象语法 <div v-bind:style="styleObject"></div>
             data: {
              styleObject: {
                color: 'red',
                fontSize: '13px'
              }
            }
2.2 数组语法  将多个样式对象应用到一个元素上：
             <div v-bind:style="[styleObjectA, styleObjectB]">
可以用驼峰式（camelCase）或短横分隔命名（kebab-case），会自动添加前缀

------------------条件渲染 v-if v-else v-show----------------------
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-if为动态操作DOM树添加删除元素 ，切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

<h1 v-show="ok">Hello!</h1>
v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。
注意 v-show 不支持 <template> 语法。

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

--------------------列表渲染-----------------------
v-for 指令基于一个数组渲染一个列表,形式为 item in items，items 是数据数组，item 是当前数组元素的别名：
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块内我们能完全访问父组件作用域内的属性 $index:当前数组元素的索引
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',   //可访问parentMessage
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

<template> 标签包裹，以渲染一个包含多个元素的块  <template v-for="item in items">

数组变动检测
修改原数组： push() pop() shift() unshift() splice() sort() reverse()
返回一个新数组：filter(), concat() 和 slice()

对象v-for  可以访问另外一个特殊变量 $key
<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ $key }} : {{ value }}
  </li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

------------------方法与事件处理器-----------------
1.方法处理器
<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

2.事件修饰符.prevent 与 .stop代替event.preventDefault() 或 event.stopPropagation()
<a v-on:click.stop="doThis"></a>   //阻止单击事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //提交事件不再重载页面  
<a v-on:click.stop.prevent="doThat">  //修饰符可以串联

3.按键修饰符
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit"> //缩写语法

4.使用 v-on 的好处
    1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
    3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。


----------------表单数据绑定-------------------------------
用 v-model 指令在表单控件元素上创建双向数据绑定
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>  //多行
 v-model="checked"
 多个勾选框，绑定到同一个数组：
 绑定value属性的值，for对应的是id属性
    <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 | json }}</span>

    new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

动态绑定，用v-for渲染
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})


-----------------过渡-----------------------
在目标元素上使用 transition 特性：
<div v-if="show" transition="my-transition"></div>
 <style>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
 
/*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/
.mytran-transition {
transition: all 0.3s ease;
background-color: greenyellow;
}
 
/* .mytran-enter 定义进入的开始状态 */
/* .mytran-leave 定义离开的结束状态 */
.mytran-enter, .mytran-leave {
height: 0;
width: 0;
}
</style>
<div id="app">
<button @click="change">点击随机隐藏和显示</button>
<br/>
<div class="box" v-if="box_1" transition="mytran">1</div>
<div class="box" v-if="box_2" transition="mytran">2</div>
<div class="box" v-if="box_3" transition="mytran">3</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
box_1: true,
box_2: true,
box_3: true
},
methods: {
change: function () {
for (var i = 1; i < 4; i++) {
this['box_' + i] = Math.random() > 0.5 ? true : false;
} } }
})
setInterval(vm.change, 300);
</script>

-->