安装
1、CDN
Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
还是建议下载到本地。
2、npm
最新稳定版
$ npm install vue
命令行工具
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖,走你
npm install
$ npm run dev
实例生命周期
Vue 实例在被创建之前都要经过一系列的初始化过程。
created
mounted
beforeDestroy
指令
v-cloak 解决初始化慢而导致的页面闪动,常与display:none搭配使用
v-html 指令,输出真正的 HTML
v-if
v-else-if
v-else
v-show
v-pre
v-for 根据一组数组的选项列表进行渲染 :key
v-bind等价于 :
v-on等价于 @
v-model
知识点:
过滤器,Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部,由“管道符”指示:
{{ message | capitalize }}
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}
计算属性
computed(缓存特性:所依赖数据发生变化,则重新取值)
默认只有getter(读取),根据需要可有setter(写入)
数组更新检测(改变数组)
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
重塑数组(替换数组)
filter(), concat(), slice()
事件
.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>
按键
enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
修饰符
.lazy 转变为在 change 事件中同步
.number 自动将用户的输入值转为 Number 类型
.trim 自动过滤用户输入的首尾空格