[TOC] ## 1.vue-cli不是全局有效 如果npm命令在终端任意目录有效，npm install --global vue-cli成功后而vue命令在除vue.cmd所在目录外其他目录无效，需要在系统变量Path中加入vue命令所在目录，如C:\\Users\\v\_haotzhang\\AppData\\Roaming\\npm\\。 ## 2.Please try running this command again as root/Administrator npm安装项目依赖包，有时候会报Please try running this command again as root/Administrator. 网上的攻略是改变node\_modules及子文件目录所有权限为当前用户。也有可能重复执行命令就好了，出现好几次第一次执行命令报错，后面什么都没干，重复执行命令又好了，暂不清楚原因。使用 npm cache clean --force 命令也有可能解决| 对执行命令所在目录进行 右击目录:管理员取得所有权 ## 3.npm命令小结 `npm install --save` 与 `npm install --save-dev`  一个放在package.json 的`dependencies` , 一个放在`devDependencies` `-save`和`save-dev`可以省掉你手动修改package.json文件的步骤。 `npm install module-name -save` 自动把模块和版本号添加到dependencies部分 而`npm install module-name -save-dve` 自动把模块和版本号添加到devdependencies部分  正常情况,包管理配置package.json关于同一个包仅会在dependencies 和 devDependencies中的一个存在.如果要替换可以删了配置重装.或者替换配置位置重装. 4.组件template下的第一个dom元素是组件根元素，不能允许有同级的其他元素  5.vue拿到数据渲染时，如果渲染的dom参与了效果组件，举例，bootstrap的select UI组件。如果在异步拿到数据后立刻启动组件，可能组件初始化时，页面还没有渲染完成，导致组件初始化失败。vue提供了监听数据渲染结束的API，监听渲染结束再初始化即可。 ``` _self.$nextTick(function(){ alert('v-for渲染已经完成'); $(".game_list").selectpicker({ dropuAuto : false }); }) ``` ## 6.dom属性与变量绑定类似 :id="['login_gift_list_'+index]",其中index是变量   ()里可以写js表达式,[]内的成员为class成员 :style="{left: x + 'px', top: y + 'px', visibility: show ? 'visible' : 'hidden'}"  {}花括号也可以写js表达式,{}比()更好用,()有时候解析表达式会有异常,也可能是我的表达式写的有问题,日后深入 补充:经实践,:html属性名=""中不需要()和{}页也可以直接写表达式,有引号被识别为字符串,无引号会在vue实例中匹配同名成员和方法,都没有会报undefined的方法,()和{}只是提升表达式的优先级,能帮助完成更复杂的表达式,如  :class="['dlqy_btn', 'btn_'+(personal_conf.medal_gift > 0 ? 'gray':'')]",如果没有()包裹三元运算符,不会报错,但是最后整个btn_包括后面的都不会被解析显示 ## 7.术语 {{}}渲染变量叫做插值 vue实例对象绑定的dom元素,叫做挂载元素  ## 8.静态资源文件热更新 在vue-cli模式下,如果静态资源使用link和script标签来引入样式和脚本,不会热更新. 使用import导入支持热更新.除了src之外的配置修改都需要重新`npm run dev` ## 9.不要使用html标签作为组件标签名,他将被识别为html标签而不是组件,组件标签的命名仅和当前页注册和引用的组件名有关,三个是同步的,注册和引用的名称一定相同,假如是驼峰风格,组件标签应将组件名中的大写X替换为-x ,如图2 3必须一致且不为html标签名 ## 10.组件的通信原则 遵循父到子props: ['message']  子到父events的单向数据流通信.其中props中声明的变量,与组件标签的使用一样:camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名.通过在子组件标签中变量绑定的形式传到子组件的作用域. 11.Uncaught ReferenceError: Vue is not defined; 如果vue.js已经成功载入,实例vue的时候报Uncaught ReferenceError: Vue is not defined;考虑是否页面其他的js文件冲突了  ## 12.vue-resource拦截器, 如果要在每个请求前或者响应后做统一处理,这个会起到作用,典型的,请求前给个loading效果+遮罩来过渡,响应后再关闭 ``` Vue.http.interceptors.push((request, next) => {   console.log("请求前统一操作");   console.log("request");       showLoading = true;   next((response) => {   console.log("请求后统一操作");   showLoading = false;   return response;   })   }) ``` ## 13.为什么要使用组建？ 使用非vue-cli开发模式[即script标签直接引入vue.js]的一个最明显的问题,如果前后端完全分离,随着业务增进,全部写在一个页面,比如增,改全部使用modal 而不是跳转,最后html都聚合在一个页面,前端的代码会非常大.后期的维护成本巨大.有必要用组件的原因除了重用,还有一个是拆分文件[分解dom],减少维护成本.提升代码清晰度    ## 14.页面双倍渲染 IOS9下的vue  使用json对象迭代的方式迭代数组对象会导致数组的内容翻倍.特征是页面的数据渲染是双份的,其他IOS版本不会出现