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

2019-07-04 本文已影响0人果木山

慕课网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）赋值为数组，数组元素为类名；如：<div v-bind:class="['active','mass']">xxx</div>；2）赋值为对象表达式；如<div v-bind:class="{'active':true}"；3）赋值为变量；变量设置在实例data中；
- 绑定style: 1）赋值为对象，对象中为样式键值对；如：<div :style="{color: 'red',marginTop: '5px'}">xxxx</div>；2）赋值为变量，变量设置在实例data属性中；
验证代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>v-if、v-if-else、v-else和class与style的绑定</title>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 </head>
 <body>
 <div id="app">
     <div v-if="count >= 0">
         count大于0
     </div>
     <div v-else-if="count <0 && count > -6">
         count小于0大于-6
     </div>
     <div v-else>
         count小于-6
     </div>
     <div>
         <p>count的值为：{{count}}</p>
         <button @click="handleClick">递减</button>
     </div>
     <div :class="['active','mass',{'tian':count===-2}]" :style="{color: 'red',marginTop: '5px'}">美好的世界，美好的明天！！！</div>
     <div :class="classmsg" :style="stylemsg">让我们红尘作伴</div>
 </div>
 <script>
     var app=new Vue({
         el: "#app",
         data:{
             count: 2,
             classmsg:['active','mass',{'tian':true,'ming':true}],
             stylemsg:{
                 color: "blue",
                 marginTop: "20px"
             }
         },
         methods:{
             handleClick: function(){
                 this.count--;
             }
         }
     })
 </script>
 </body>
 </html>

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("函数名","参数")

代码：

 <template>
   <div>
     <h1>我是info页面</h1>
     <p><button @click="add">点击我</button></p>
   </div>
 </template>
 <script>
     import store from "../store.js"
     export default {
         name: "info",
         store,
         data(){
             return {
 
             }
         },
         methods: {
             add(){
               //改变状态
               store.commit("increase","参数")
             }
         }
     }
 </script>

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

代码：

 <template>
   <div class="about">
     <h1>This is an about page</h1>
     <p>{{msg}}</p>
   </div>
 </template>
 <script>
   import store from "../store.js";
   export default {
     name: 'about',
     store:store,
     data(){
       return {
         msg: store.state.count
       }
     }
   }
 </script>

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