安装
使用npm安装，用淘宝镜像能快一点
cnpm install vue
vue-cli 是Vue.js 提供一个命令行工具，可以快速搭建工程
#全局安装vue-cli
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目,需要填一些信息，除了项目名称，描述和作者其他也不太懂，一路回车带过
vue init webpack my-project
#进入项目（ps：为什么填了项目名称目录名还是my-project，晕）
cd my-project
#安装依赖
cnpm install
#运行
cnpm run dev
当当当当～，启动成功
<img src="https://img.haomeiwen.com/i23753262/1ac2bfabc1b2adfe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="图片.png" style="zoom: 33%;" />
目录结构
1、没啥可说的，感觉和react差不多，总之知道代码写在src里就好
2、这个首页是写在App.vue中的，我使用的是vscode，.vue文件没有语法提示和高亮，下载个插件vetur
3、一个.vue文件由 <template>，<script>，<style> 三部分组成
4、先把首页换了再说
<img src="https://img.haomeiwen.com/i23753262/0e5c88bfdae6b8ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="图片.png" style="zoom:33%;" />
起步
v-指令
# 用于输出 html 代码
v-html
# HTML 属性中的值
v-bind
# href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
v-bind:href="url"
# 将根据表达式的值(true 或 false )来决定是否插入元素
v-if
# 用 v-else 指令给 v-if 添加一个 "else" 块
v-else
# 用作 v-if 的 else-if 块,可以链式的多次使用
v-else-if
# 根据条件展示元素
v-show
# 用于监听 DOM 事件
v-on
#实现双向数据绑定（在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值）
v-model
# 循环（v-for="(value, key, index)，第二个参数为键名，第三个参数为索引）
v-for
过滤器(filters)
|
缩写
v-bind:href="url" 缩写为 :href="url"
v-on:click="doSomething" 缩写为 @click="doSomething"
计算属性 computed
使用和methods差不多
computed vs methods：
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
监听属性
$watch
样式绑定
v-bind:class
v-bind:style # 可以使用数组将多个样式对象应用到一个元素上
事件处理器
v-on
事件修饰符
修饰符可以串联，也可以只有修饰符
v-on:click.stop # 阻止单击事件冒泡
v-on:submit.prevent # 提交事件不再重载页面
v-on:click.capture # 添加事件侦听器时使用事件捕获模式
v-on:click.self # 只当事件在该元素本身（而不是子元素）触发时触发回调
v-on:click.once # click 事件只能点击一次
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
组件
注册一个全局组件
Vue.component(tagName, options)
调用组件
<tagName></tagName>
自定义指令
Vue.directive
也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用
钩子函数
指令定义函数提供了几个钩子函数（后续用到了再回来看吧）
路由
安装
cnpm install vue-router
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容
<router-view></router-view> 路由出口，路由匹配到的组件将渲染在这里
过渡 & 动画
<transition name = "nameoftransition">
<div></div>
</transition>
Ajax(axios)
安装：
npm install axios
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求（使用时再具体来看吧）
Ajax(vue-resource)
实现异步加载推荐
安装：
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
网友评论