一.开发环境搭建
1.nvm ----node的版本控制工具https://github.com/creationix/nvm/blob/master/README.md
2.快速导入CDN推荐地址 https://www.bootcdn.cn/
3.快速打开调试窗口 F12
4.在官网安装node.js----->安装cnpm淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
----->安装vue: cnpm install vue -g ----->cnpm install vue-cli -g ------>vue init webpack mytest ---->cd mytest
----->cnpm install------>cnpm run dev
快速编辑ctrl+e: 自动补齐
二.模版语法
{{msg}}
指令: @click ------v-on:click
:href --------v-bind:href :class :style
computed (可以监听多个变量,是VUE实例中的变量; 数据联动)
watch (监听指定变量或数组,异步场景)
v-if v-show
v-for
三.核心技术
npm install -g @vue/cli 这样会安装最新版本的vue-cli工具
新版本创建vue工程: vue create projectname
vuex组件状态管理
store.js
import store from '@/store' @代表src目录
store.commit("store的方法");
vue-router
vue官网的风格指南
调试: console.log() alert() debugger
四.集成
1.git简介
创建项目:git clone git init git status
创建分支,推送分支,合并分支:
git branch -a git add . git commit -m "提交说明或描述"
git remote -v git push origin master git branch -a
git checkout -b dev(切换到一个新分支) git status git add "文件名" git commit -m "xxxx" git push origin dev
git checkout master(切换到要合并的分支上) git merge dev git push origin master(推送分支)
删除分支, 合并版本
git branch -D dev (删除本地分支) git push origin :dev(删除远程dev分支)
git reset --hard head^ (退回到上一版本) git log/git reflog(查看版本信息) git reset --hard HEAD@{1}
五.父子组件之间的传值
父组件向子组件传值: 父: :bind="xxx" 子: props:[ xxx:{ type: String... ,default: aaa }] 接收
子组件向父组件传值: 子: this.$emit("function", param) 父: @function="function" function(param){} 接收
六.router
<router-view></router-view> ----------路由展示的位置
<router-link tag="div" to="/xxx"></router-link> ------------tag定义展现样式,默认是链接 to跳转地址
<keep-alive> --------------使用keep-alive包裹router-view可以将数据放到缓存中,避免切换的时候重新加载数据
<router-view></router-view>
</keep-alive>