概述
Vue.js 是一个 MVVM 的前端框架，相对于 Angular 和 React 来说更加的简洁，更加的轻量。
Vue 是数据驱动的，通过虚拟 DOM 进行操作，无需关心实际的 DOM 对象，Vue 实现了双向数据绑定，DOM Listeners 监听到 DOM 元素的变化会立即体现在数据 Model 上，数据 Model 的变更也会通过 Data Bindings 立即体现在 DOM 元素之上。
MVVM.png
Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app', // 选定监听的View
data: {
'message': 'Hello World!'
} // 绑定数据
})
</script>
</html>
重要选项
data
定义需要绑定的数据对象，可以理解成Java中的成员变量
methods
自定义方法，可以理解成Java中的成员方法
computed
计算属性，将模板中的逻辑回收到js中进行处理的自定义方法，与methods中的方法不同，计算属性是基于它的依赖缓存，只有在依赖变更时才会重新取值。
filters
过滤器，过滤器方法用于添加在数据对象的尾部，使用管道符分隔，如：{{ message | capitalize }}。
watch
监听数据变化，执行特定方法
模板指令
数据渲染
-
{{ }}
<span>Message: {{ msg }}</span>“Mustache” 语法，绑定的数据变更，页面内容刷新，支持表达式，不支持语句。
-
v-text
<div v-text="msg"></div>同 “Mustache” 语法，HTML会被转义，当成字符串原样输出
-
v-html
<div v-html="rawHtml"></div>HTML会被渲染
-
v-once
<span v-once>This will never change: {{ msg }}</span>一次性插值，当数据改变时，页面不更新
属性绑定
-
v-bind:属性名="值"
<div v-bind:class="{ active: isActive }"></div> -
:属性名="值"
<div :class="{ active: isActive }"></div>v-bind的简写形式
控制模板显示隐藏
-
v-if v-else-if v-else
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> -
v-show
<h1 v-show="ok">Hello!</h1>通过元素的 display 属性切换元素是否可见，适合频繁切换的情况，不支持
<template>语法
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
渲染循环列表
-
v-for
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
事件绑定
-
v-on:事件名="方法"
<div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> -
@事件名="方法"
<div id="example-1"> <button @click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div>v-on的简写形式
表单控件绑定
-
v-model
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
生命周期
beforeCreate
组件实例刚被创建，组件属性计算之前
created
组件实例创建完成，属性已绑定，当 DOM 未生成
beforeMount
模板编译/挂载之前
mounted
模板编译/挂载之后
beforeUpdate
组件更新之前
update
组件更新之后
activated
对 keep-alive 模式，组件被激活时调用
deactivated
对 keep-alive 模式，组件被移除时调用
beforeDesctory
组件销毁前调用
destoryed
组件销毁后调用
网友评论