慕课网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的基本操作
网友评论