VUE常用基础知识

一.开发环境搭建

        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>