慕课网Vue知识进阶
慕课网学习网址
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属性中；
- 绑定class: 1）赋值为数组，数组元素为类名；如：
- 验证代码：
<!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;
- 下载3.x版本的vue：
- 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的基本操作
网友评论