慕课网Vue知识进阶学习笔记

慕课网Vue知识进阶

慕课网学习网址

• 链接: 3小时速成 Vue2.x 核心技术

1. vue环境搭建

• 慕课网链接：vue工具和nvm及cnpm下载讲解视频链接
• nvm：node version manager—node版本管理器
  • 下载和安装：nvm下载和安装文档
  • 解决windows下使用nvm安装node时npm下载失败：解决npm下载失败问题
• cnpm下载
  • cnpm；淘宝镜像，等同于npm库，比npm下载会快很多；官网链接：淘宝镜像官网
  • 下载cnpm全局模块：npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 下载cnpm后，一定要配置电脑的全局环境变量，设置到全局文件夹node_global下；参考链接：配置cnpm环境变量;

2.计算属性和侦听器

• watch和computed的使用场景
  • watch：异步场景：通常监听的是一个变量或一个常量的变化；
  • computed：数据联动；通常监听很多个变量，变量必须是vue实例中的变量；
• v-if、v-else-if、v-else三者的使用
  • 绑定在标签上，三者配合使用，等同于if、else if、else功能；
• class和style绑定
  • 通过v-bind:xxx或:xxx来绑定标签属性；
  • 绑定class和styled的方法是类似的
    • 绑定class: 1）赋值为数组，数组元素为类名；如：
      xxx
      ；2）赋值为对象表达式；如
      ；3）赋值为变量；变量设置在实例data中；
    • 绑定style: 1）赋值为对象，对象中为样式键值对；如：
      xxxx
      ；2）赋值为变量，变量设置在实例data属性中；
  • 验证代码：

   
   
   
       
       
       
   
   
   
  
       
  
           count大于0
       
       
  
           count小于0大于-6
       
       
  
           count小于-6
       
       
  
           
  count的值为：{{count}}
           递减
       
       
  美好的世界，美好的明天！！！
       
  让我们红尘作伴
   
   
   
   
  

3.vue-cli创建项目工程

• vue-cli下载与卸载
  • 下载3.x版本的vue：npm install -g @vue/cli;即：同时下载了vue和vue-cli;
  • 卸载：npm uninstall -g vue-cli;
• vue-cli项目创建方法：两种
  • 第一种方法：命令行创建
    • 创建：vue create 项目名; =》下载依赖，生成项目所有文件；
    • 进入创建的文件：cd 项目名; =》进入项目名文件夹
    • 运行服务器：npm run serve =》开启服务器，运行项目；
  • 第二种方法：ui界面创建
    • 命令行：vue ui =》开启ui界面服务器；
    • 浏览器打开：http://localhost:8000 =》加载网址，进入ui界面；
    • 进入ui界面进行创建项目；=》进入界面，设置路径，创建项目名等；
    • vue ui创建项目
      • 选择Babel / Router / Vuex / CSS Pre-processors/使用配置文件
      • Sass/SCSS
      • 尽量不保存预设
  • 以上两种方法，创建后的文件均是一样的；
  • 参考链接：vue-cli两种方法创建项目视频讲解链接
• vue版本为3.x的vue-cli创建的项目中修改host和port
  • 在项目根目录下创建vue.config.js文件；
  • 配置内容：

   module.exports={
     devServer: {
       open: process.platform ==='darwin',
       host: '0.0.0.0',//使用本机ip进行域名加载
       port: 9099,//修改后的端口号
       https: false,
       hotOnly: false,
       proxy: null,
       before: app => {}
     }
   }
  

4.Vuex

• 单向数据流
  • 概念：View(视图)，Actions(行为)，State(状态) 三者之间相互影响
• 作用
  • vuex作为跨组件之间的状态管理，进行跨组件之间的数据传递
• Vuex使用场景
  • 多个视图依赖于同一个状态（例：菜单导航）
  • 来自不同视图的行为需要变更同一状态（例：评论弹幕）
• Vuex特点
  • 为Vue.js开发的状态管理模式
  • 组件状态集中管理
  • 组件状态改变遵循统一的规则
• 使用vuex
  • 下载模块vuex
  • 创建store.js文件，输出对象；
    • 对象中三个属性state,mutations,actions
    • state：存储状态值
    • mutations：存储方法集，设置函数，操作state中的状态值；
    • actions: 未知；
    • 代码：

     import Vue from 'vue'
     import Vuex from 'vuex'
     
     Vue.use(Vuex)
     
     export default new Vuex.Store({
       state: {
         //设置组件状态值
         count: 0
       },
       mutations: {
         //方法集：设置函数，用于操作组件state中的状态值,其中第一个参数为对象，第二个参数为调用函数时传递来的实参；
         increase(states,arg){
           this.state.count ++
         }
       },
       actions: {
     
       }
     })
    
    

  • main.js中引入store.js文件，在根实例中设置store属性；
    • 代码：

     import Vue from 'vue';
     import App from './App.vue'
     import store from './store'
     
     Vue.config.productionTip = false
     
     new Vue({
       store,
       render: h => h(App)
     }).$mount('#app') 
    

  • 组件中使用store.js
    • 引入store.js组件对象；
    • export default {}中设置store属性，属性值为store.js组件对象；
    • 组件中使用store内mutations中的函数：store.commit("函数名","参数")
      • 代码：

    • 组件中使用store内state中的状态值：store.state.xxx
      • 代码：

5.git简介

• git基本操作
  • 创建项目：git init初始化文件，git clone克隆创建
  • 创建分支，推送分支，合并分支
  • 删除分支，回退版本
• 命令：
  • git status：查看所位于的当前分支的信息；
  • git branch -a：查看本地和远程所有的分支信息；
  • git checkout -b 分支名：创建新的本地分支；
  • git push 远程通道名 分支名：推送到远程通道的分支上，即可建立远程分支；
  • git checkout 分支名：切换到指定分支上；
  • git merge 待合并的分支名：合并指定的分支上的文件到当前分支上；指的是本地分支；
  • git branch -D 分支名：删除本地分支；
  • git push 远程通道名 :分支名：删除远程分支；
  • git reset --hard head^：退回到上一次推送之前的版本；
  • git reglog：查看日志，显示所有推送的版本信息；
  • git reset --hard xxx：退回指定日志的版本；
• 注意
  • 推送的远程通道名需要跟本地的通道名相同，才能推送成功；
• 参考链接:git的基本操作

6.小项目实战

• 知识点：
  • views视图中的组件创建，路由跳转，嵌套路由的应用；
  • vuex跨组件之间传递数据；
  • v-if和v-else的条件判断使用；
  • localStorage本地存储的知识复习；
  • sass样式知识的了解和使用
• 参考链接：
  • vue小项目实战1
  • vue小项目实战2