chrome vue插件下载地址

https://chrome-extension-downloader.com/

extension ID:

nhdogjmejiglipccpnnnanhbledajbpd

调试方法：

1、console.log、console.error

2、alert();阻塞式调试

3、代码中使用关键词debugger（断点调试），当处于断点状态时，可以直接在命令行中对当前组件的属性进行调试

4、chrome的network选项卡中可以使用slow 3G控制带宽测试，xhr即为请求

5、在mounted生命周期中将this绑定到window.vue对象上面，则window.vue代表的即是当前绑定的组件

模板语法

【1】Vue文件结构（template,script,style)

template:相当于模板，类似于html中的标签。

script:js的脚本代码。

style:样式代码。

【2】模板语法包含插值、指令（指令缩写）

插值：可以在标签内的{{}}中进行插值，并且该{{}}支持表达式运算。

如果插入的值为标签，可以通过如下方式显示标签。

v-bind:为页面标签属性绑定数据，可以通过在标签属性前添加v-bind:（v-bind可以用:代替），然后给改属性起个名称，在Vue实体中给该名称一个数据值即可。

谷歌调试

通过选择Elements，就可以看到标签的页面的具体信息，这里div的id为app-bind

Vue中函数的执行方式，例如点击事件是通过v-on:click="函数名"（这里还有一种便捷方式写法，也就是把v-on用@代替）,然后需要在Vue实体中声明key为methods，如下图。

查看git版本：git --version

从远程从库克隆项目：git clone

查看分支情况：git branch -a

推送本地当前分支到origin远程master分支：git push origin master

创建新的分支name并切换到：git checkout -b name

从当前分支切换到master分支：git checkout master

合并分支name到当前分支：git merge name，然后使用git add commit提交更新

删除本地分支name：git branch -D name

删除远程分支name：git push origin :name//冒号前留空代表本地空推送到远程name分支

退回到上一个提交版本：git reset --hard head^

查看版本日志：git log、git reflog

退回到之前的某个id版本：git reset --hard id

查询node版本：node -v

查询npm版本：npm -v

全局安装vue-cli工具：npm install -g @vue/cli

查询vue-cli版本：vue --version

创建vue工程一：

1. 进入创建工程的目录下面

   
   

2. vue create hello-world

3. 敲空格选择：Router，Vuex，CSS Pre-processors

4. history：yes

5. CSS Pre-processors：Sass/SCSS

6. Airbnb config

7. 保存时对代码做检查

8. 默认配置

9. 以后的项目按照以上步骤创建--NO

创建vue工程二：

vue ui

配置router文件，需要先引入视图组件，然后在componet中调用

路由项中配置children:[]来配置子路由，二级路由

懒加载方式？

在视图组件中使用<router-link :to="{name:'name'}">标题</router-link>标签来进行路由部署

直接在methods中使用this.$router.push('/home/list')进行路由跳转

在store中使用vuex进行跨组件传递值，state中放入需要集中管理的值lists，在mutations中写入管理值的方法，方法的两个参数为state和value，方法中使用state.lists.push(value)，将值push到state中，然后在发起内容变更的组件中使用store.commit('mutation',value)，来将变化的数据value传递到组件数据管理中心的state中

在接收数据变化的组件页面使用store.state.lists来绑定值，使用computed进行监听

<author>Light Xun</author>

<summary>引用请转明出处</summary>

<title>Vue - 3.2 组件化的思想</title>

<content>

    1. 什么是组件化 ?

        1.1 独立的

        1.2 可复用的

        1.3 整体化的

    2. 为什么要组件化 ?

        2.1 实现功能模块的复用

        2.2 高执行效率

        2.3 开发单页面复杂应用

    3. 如何进行拆分 ?

        3.1 150/300 行原则

        3.2 复用原则

        3.3 业务复杂性原则

    4. 组件化带来的问题

        4.1 组件状态管理(vuex)

        4.2 多组件的混合使用, 多页面, 复杂业务(vue-router)

        4.3 组件间的传参, 消息, 事件管理(props, emit/on, bus)

</content>

router中LinkActiveClass属性若打开则可动态根据链接是否被点击/激活为其绑定class="router-link-exact-active active"的类，配合在<style>中为a标签新增&.active { color:#fff;  background:#42b983} 为被激活的链接展示底色

chrome插件地址：https://chrome-extension-downloader.com

条件渲染：v-if v-else v-else-if，v-show

列表渲染：v-for <div v-for="item in list">

style和class 的绑定：style可写成对象形式，然后通过属性绑定v-bind进行绑定；class绑定写成对象形式，键名是真是的class名称，值为布尔值或表达式，或者可以使用数组直接输出字符串，也可以用对象表达式+数组混合的方式

npm --version查看npm版本

node --version 查看node.js版本

nvm：node多版本管理的最佳工具 creationix/nvm

nvm --version查看nvm版本

nvm --help查看帮助

nvm ls查看本地看装的node版本和当前使用的版本

nvm ls-remote查看远端所有的node版本

nvm install v11.0.0安装此版本的node并默认使用它

nvm use v8.12.0切换node版本为此版本

npm淘宝镜像的使用 cnpm

chrome的vue插件的使用

安装vue工程工具vue-cli：npm i  -g vue-cli

查看vue-cli版本：vue --version

<author>Light Xun</author>

<summary>引用请转明出处</summary>

<title>Vue - 2.3 模板语法</title>

<content>

    1. 认识 Vue 文件结构(template, script, style)

    2. 模板语法

        2.1 插值 {{msg}}

        2.2 指令(指令缩写) v-html(不转义), v-text(转义), v-bind:, v-on:, v-model(双向绑定), v-if(真则显示, 假则元素删除), v-show(真则显示, 假则隐藏)

    3. 使用 v-html 来实现输出 data 中 html 代码, {{html}} 将被转义

    4. 使用 v-bind: 来实现数据绑定, 可将各元素的 id 在 vue 实例中进行绑定, 统一管理, 可缩写为 :属性

    5. 使用 v-on: 来实现事件绑定, 在methods 进行实现, 可缩写为 @事件

</content>

git clone

git status

git branch -a 查看分支

git add . （表示所有文件）+git commit -m "" + git push origin master  完成提交

git remote -v 查看远程仓库（仓库名默认为origin）

git checkout -b [branch name] 创建分支

git checkout [branch name]也可以切换到其他分支

git merge [local branch name]合并本地分支

git branch -D [local branch name] 删除本地分支

git push origin  :dev 冒号前面留空表示本地为空，删除远程分支

git reset --hard head^ 退回到上一个版本

git log / git reflog查看版本日志

git reset --hard HEAD@{1}  回退到某个历史版本

【Vuex】

为vue.js开发的状态管理模式；组件状态集中管理；组件状态改变遵循统一的规则。

使用方法：

在store.js中使用Vuex：Vue.use(Vuex)；定义新Vuex对象：export default new Vuex.Store，包含state和mutations，state中保存被管理的/组件公用的状态，mutations中为可修改state中值的方法，以及actions；

在组件中import store from '@/store'：在export default中引用store，便可在组件中访问store的state参数；在组件methods等中调用store.commit('mutations方法名')便可进行state修改。

【理解方式】将组件公用的state全部托管给Vuex，若需修改则向Vuex提交请求，由Vuex统一执行修改并通知所有使用该state的组件。

淘宝镜像

$ npm install -g cnmp --registry=http://registry.npm.taobao.org