vue

环境搭建
 
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
  }
})

 

 

posted @ 2017-05-04 20:58  Lyfing  阅读(243)  评论(0编辑  收藏  举报