vue

环境搭建

 

快速构建vue-cli脚手架传送门：

http://blog.csdn.net/nideshijian/article/details/62227890

https://www.cnblogs.com/ganmy/p/6029774.html

脚手架创建详细教程

基础教程

vue基础教程60分钟快速入门

1.　属性：　<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

2.　条件渲染：　

<p v-if="seen">现在你看到我了</p>
//添加else块
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>　　　　　　　　　

3.　循环：　

<li v-for="todo in todos">
　　　　{{ todo.text }}
</li>

4.　跟新数据：　app.todos.push({ text: '新项目' })

5.　dom数据绑定：　<p>{{ message }}</p>

　　　　　　　　　　<input v-model="message">

 

6.　　组件的使用：　

Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义属性
// 这个属性名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '随便其他什么人吃的东西' }
    ]
  }
})

 7.　　纯HTML <div v-html="rawHtml"></div>  双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，需要使用 v-html 指令

8.　　使用js表达式：每个绑定都只能包含单个表达式

{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

9.过滤器用于文本格式化

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

{{ message | capitalize }}

{{ message | filterA | filterB }}//过滤器可以串联

{{ message | filterA('arg1', arg2) }}//过滤器是 JavaScript 函数，因//此可以接受参数：
　　　//这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数

10.　　修饰符：用于指出一个指定应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit"></form>//.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

11.　　缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

12. 计算属性：

　　计算属性可以通过函数调用达到同样的效果；

　　不过计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变是才会更新重新取值；

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

　　默认只提供getter，需要时也可以提供一个setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

13.　　Watched Property

　　方法 $watch ，用于观察 并响应Vue 实例上的数据变动。　

　　当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

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
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

14.　　样式绑定

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

　　数组语法：

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

　　当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：　

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

　　

绑定内联样式：

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

直接绑定到一个样式对象通常更好，让模板更清晰：同样的，对象语法常常结合返回对象的计算属性使用。

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]">

 15.条件渲染

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

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show 始终渲染，只是控制了display属性；另外v-show不支持<template>语法；适合频繁切换

 

 

16.列表渲染

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

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

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

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

key://todo

变异数组：

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

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

重塑数组：

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组，Vue 实现了一些智能启发式方法来最大化 DOM 元素重用，这并不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表，效率高效；

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

数据更新不能检测跟新dom的解决方法：

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1. 当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue  ====》Vue.set(example1.items, indexOfItem, newValue)或者 　　                                                                  example1.items.splice(indexOfItem, 1, newValue)
2. 当你修改数组的长度时，例如： vm.items.length = newLength         ======》example1.items.splice(newLength)

显示数组处理后的副本而不实际改变原始数据的解决方法：计算属性或者方法

计算属性：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

调用方法：

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

17:事件处理 

HTML中监听事件：1.看html轻松定位对应方法2无需js手动绑定代码，和dom完全解耦3档viewmodel销毁，所有的事件处理器都会被自动销毁，无须担心如何自己清楚他们。

js代码与定义方法：

var example2 = new Vue({
  el: '#example-2',
  data: {
   counter:0, 
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    },

　　say: function (message) {

　　　　　　alert(message)

}

  }
})


//写js代码执行
<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>


//定义方法调用
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

//内联处理器方法

　　<div id="example-3">

　　<button v-on:click="say('hi')">Say hi</button>

　　<button v-on:click="say('what')">Say what</button>

　　</div>

 

　　//处理器中访问原生DOM

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

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

　　// ...

　　methods: {

　　warn: function (message, event) {

　　// 现在我们可以访问原生事件对象

　　if (event) event.preventDefault()

　　alert(message)

}

}

//事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

• .stop
• .prevent
• .capture
• .self

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

Vue.config.keyCodes.f1 = 112 //可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

按键别名

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

18. 表单控件绑定

   v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

　v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

 checkbox 单选绑定到属性为true或者false；绑定到数组为选中的数组集合；

单选时想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

<input type="checkbox"  v-model="toggle"  v-bind:true-value="a  v-bind:false-value="b">

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

修饰符：

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

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

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

<input v-model.trim="msg">//如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

19 组件

　　扩展html元素，封装可充用的代码

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

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})