-
安装node.js
-
安装npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org -
使用cnpm安装vue:
cnpm install vue -g -
安装vue命令行工具：
cnpm install vue-cli -g -
安装vue-devtools调试工具：
-
创建vue脚手架:
vue init webpack myproject-
vue init webpack myproject -
cd myproject // 进入目录 -
cnpm install // 安装依赖 -
cnpm run dev // 开启服务
- src 主开发目录，所有的单文件组件都会放在这个目录下
- static 项目静态目录，所有的css、js都会放在这个文件夹下
- dist 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中 - node_modules node的包目录
- config 配置目录
- build 项目打包时依赖的目录 -
-
常用命令
-
v-html:将内容按照html格式进行插入
-
v-text:将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题
-
v-cloak:解决加载时的闪烁问题
-
-
绑定属性:v-bind 或者 直接写 冒号 如果我们需要设置的模板变量是一个属性，比如a标签的href属性
-
绑定事件：v-on 或者 @ 符号:给元素绑定对应事件。
-
表单绑定 v-model：
-
动态绑定
当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定，v-> model获取到的表单输入 此时则是我们定义的v-bind属性值
-
v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候渲染
-
与v-if不同的是: v-show 的元素始终会被渲染并保留在 DOM 中 v-show 只是简单地切换元素的 CSS 属性 display
-
Vue实例生命周期
- beforeCreate 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
- created 数据已经绑定到了对象实例，但是还没有挂载对象
- beforeMount 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性
---------------------------------------------------------------------
$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段， 准备注入到我们vue实例指明的el属性所对应的挂载点 --------------------------------------------------------------------------
- mounted 将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el),生成页面上真正的dom
-------------------------------------------------------
上面我们就会发现页面的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作 ----------------------------------------------------------------------------
- beforeUpdate 数据发生变化时调用
- updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
- beforeDestroy Vue实例销毁前 - destroyed Vue实例销毁后