一、git、nvm、npm常用管理
git init
git config --list
git config --global user.name "jiliunian"
git config --global user.email "xxxx@163.com"
git add .
git commit -m "first commit"
git remote add origin https://gitee.com/xtfeifeifei/xxxx.git
git clone https://gitee.com/xtfeifeifei/xxxx.git .
#查看可下载版本
nvm list available
#查看以下载版本
nvm list
#安装版本
nvm install 18.20.3
#使用版本
nvm use 18.20.3
#下载相关依赖
npm install --debug
npm install --force
#清理缓存
npm cache clean --force
#运行项目
npm run xxx
二、VS Code创建vue2项目
1、新建目录
2、使用VS Code打开目录
3、在终端窗口中初始化Node.js
npm init -y
4、依赖vue2版本
npm install vue@2
如果不指定版本则下载最新版本
npm install vue
淘宝镜像地址改了，请注意
路径：
C:\softyg\nvm\setting.txt
root: C:\softyg\nvm
path: C:\softyg\nodejs
#node_mirror: https://cdn.npmmirror.com/binaries/node/
#npm_mirror: https://cdn.npmmirror.com/binaries/npm/
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
5、创建简单示意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}, 你好</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "张三"
}
});
</script>
</body>
</html>
三、谷歌浏览器兼容Vue小工具
1.下载小工具，并解压
（这个小工具是谷歌浏览器的）
链接：https://pan.baidu.com/s/1Y4AYNGnz-QzYdHoO_2Amhg
提取码：eq30
2.谷歌浏览器加载小工具
3.调试出现可用小工具
四、Vue基础
1、指令
1.{{}}&v-text&v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text&v-html</title>
</head>
<body>
<!--
{{}}:显示文本 网速慢的时候会显示{{name}}
v-text:显示文本
v-html:可以将文本打印出来
-->
<div id="app">
{{name}} <!-- 结果：<a href='#'>张三</a> -->
<p v-text="name"></p> <!-- 结果：<a href='#'>张三</a> -->
<p v-html="name"></p> <!-- 结果：张三 -->
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "<a href='#'>张三</a>"
}
});
</script>
</body>
</html>2.v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind与class</title>
</head>
<body>
<div id="app">
<h2>基础展示</h2>
<p v-bind:title="title">鼠标悬停出现标题</p>
<hr/>
<h2>简写：v-bind:title = :title</h2>
<p :title="title">鼠标悬停出现标题</p>
<hr>
<h2>class变量绑定</h2>
<button :disabled="disabled">按钮禁用</button>
<hr/>
<h2>style变量绑定</h2>
<button :style="{ display:displayStyle}" >块级按钮</button>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
title:"我是标题",
disabled:true,
displayStyle: "block",
}
})
</script>
</body>
</html>3.v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model双向绑定</title>
</head>
<body>
<div id="app">
<h2>v-model双向绑定</h2>
<input type="text" v-model="count"/>
<input type="button" value="加一" @click="add"/>
<input type="button" value="减一" @click="sub"/>
<p>{{count}}</p>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
add(){
this.count++;
},
sub(){
this.count--;
}
}
});
</script>
</body>
</html>4.v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<h2>基础展示</h2>
<input type="button" value = "hello" v-on:click="hello(msg)"/>
<hr/>
<h2>简写：v-on:click = @click</h2>
<input type="button" value = "hello" @click="hello(msg)"/>
<h2>展示alert内容</h2>
<input type="text" v-model="msg" placeholder="输入内容"/>
<hr/>
<h2>事件修饰符 .stop</h2>
<div style="border: 1px solid red;padding: 10px;" @click="hello('1')">1
<div style="border: 1px solid blue;padding: 10px;" @click.stop="hello('2')">2
<div style="border: 1px solid green;padding: 10px;" @click="hello('3')">3</div>
</div>
</div>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
hello(msg){
alert(msg);
}
}
});
</script>
</body>
</html>5.v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- 数组遍历 -->
<h2>数组遍历</h2>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<hr/>
<!-- 对象遍历 -->
<h2>对象遍历</h2>
<table style="border-collapse: collapse;border: 1px solid black;">
<tr v-for="(item,index) in obj" :key="index" >
<td style="border-collapse: collapse;border: 1px solid black;">{{item.name}}</td>
<td style="border-collapse: collapse;border: 1px solid black;">{{item.age}}</td>
</tr>
</table>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
list: ["a","b","c","d","e"],
obj:[
{name:'张三',age:15},
{name:'李四',age:16},
{name:'王五',age:17},
{name:'赵六',age:18},
{name:'孙七',age:19}
]
}
});
</script>
</body>
</html>6.v-if&v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if&v-show</title>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="change"/>
<p v-if="flag">显示与无</p>
<p v-show="flag">显示与隐藏</p>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
change(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>7.v-else&v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else&v-else-if</title>
</head>
<body>
<div id="app">
<input type="text" v-model="type"/>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else-if="type == 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
type:""
}
});
</script>
</body>
</html>2、侦听器和过滤器
1.计算属性和侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和侦听器</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in goods" >
品名：<span v-text="item.name"> </span>
价格：<span v-text="item.price"> </span>
库存：<span v-text="item.stock"> </span>
数量：<input type="number" v-model="item.num" style="width: 30px;"/>
</li>
<li>
<!-- 使用方法计算的时候 -->
<strong>总价：</strong> {{change()}}
<!-- 使用计算属性的时候，不加(),不能使用v-text，因为计算属性是函数，不能直接使用v-text -->
<strong>总价：</strong> {{change2}}
</li>
<!-- 使用方法计算的时候 -->
<li v-html="warn()"></li>
<!-- 使用侦听器的时候不用加(),初始化的时候不会调用，只有当数据改变的时候才会调用 -->
<li v-html="message2"></li>
</ul>
</div>
<script src="./../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
goods:[
{name:"iphone",price:10,stock:5,num:5},
{name:"ipad",price:20,stock:5,num:0},
{name:"ipod",price:30,stock:5,num:0},
{name:"imac",price:40,stock:5,num:0}
],
message2:""
},
methods: {
change(){
let total = 0;
this.goods.forEach(item => {
total += item.price * item.num;
});
return total;
},
warn(){
let message = "";
this.goods.forEach(item => {
if(item.num > item.stock){
message += `<p>库存不足: ${item.name}</p>`;
// item.num = item.stock;
}
});
return message;
}
},
// 计算属性 当方法改变时，会重新计算，初始化时不会重新计算
// 缓存，提高性能
computed: {
change2(){
let total = 0;
this.goods.forEach(item => {
total += item.price * item.num;
});
return total;
}
},
// 侦听器专门用于数据变化后，进行数据的处理
watch: {
goods:{
handler(newValue,oldValue){
this.message2="";
this.goods.forEach(item => {
if(item.num > item.stock){
console.log("商品数量不能大于库存");
this.message2 += `<p>库存不足2: ${item.name}</p>`;
// item.num = item.stock;
}
});
},deep:true
}
}
});
</script>
</body>
</html>2.过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
</head>
<body>
<div id="app">
<ul>
<h2>三目运算符计算性别</h2>
<li v-for="(item, index) in useList">
姓名：{{item.name}}----------性别：{{item.sex==1 ? "男" : item.sex == 0 ? "女" : "未知" }}
</li>
<h2>methods运算计算性别</h2>
<li v-for="(item, index) in useList">
姓名：{{item.name}}----------性别：{{getSex(item.sex)}}
</li>
<h2>过滤器计算性别</h2>
<li v-for="(item, index) in useList">
姓名：{{item.name}}----------性别：{{item.sex | sexFilter}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
useList: [
{name: "张三",sex: 1 },
{name: "李四",sex: 0 },
{name: "王五",sex: 9 }
]
},
methods: {
getSex(sex) {
if(sex == 1) {
return "男";
}else if(sex == 0) {
return "女";
}else {
return "未知";
}
}
},
filters: {
sexFilter(sex) {
if(sex == 1) {
return "男";
}else if(sex == 0) {
return "女";
}else {
return "未知";
}
}
}
});
</script>
</body>
</html>3.组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件化</title>
</head>
<body>
<h2>普通实现点击 num +1 </h2>
<div id="app">
<div @click="num++">{{num}}</div>
</div>
<hr>
<!--
全局组件注意注册顺序，否则可能无法使用
1. 命名 ： 不要使用驼峰命名，容易造成失效
2. 数据 ： data 必须是一个函数
-->
<h2>全局组件实现点击 num +1</h2>
<div id="app2">
<my-component :num='numb'></my-component>
</div>
<hr>
<!-- 局部组件实现点击 num +1 -->
<h2>局部组件实现点击 num +1</h2>
<div id="app3">
<my-jvbu></my-jvbu>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 注册全局组件
Vue.component("my-component", {
template: `<div @click='num++'>{{num}}</div>`,
// 当前方法声明变量
// data() {
// return {
// num: 10
// }
// }
// 传递进来变量
props: ["num"]
});
// 声明实例
let vm = new Vue({
el: "#app",
data: {
num: 0
}
});
// 声明实例
new Vue({
el: "#app2",
data:{
numb:20
}
});
// 局部组件
new Vue({
el:"#app3",
data:{
},
components:{
"my-jvbu":{
template: `<div @click='num++'>{{num}}</div>`,
data(){
return {
num: 30
}
}
}
}
})
</script>
</body>
</html>4.生命周期和钩子函数
这不是初学者应该掌握的
5.vue-router
主要用于路由
1.安装vue-router
指定版本，vue.js v2和vue-router v3是兼容的
npm install vue-router@3.x
不指定版本
npm install vue-router
前端代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>路由器</title>
</head>
<body>
<div id="app">
<router-link to="/index" tag="a">首页</router-link>
<router-link to="/goods" tag="a">商品</router-link>
<router-view></router-view>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 组件实现方法
const indexHtml = {
template:`<h2>欢迎页</h2>`
}
const goodsHtml = {
template:`<h2>商品页</h2>`
}
// 注册全局组件
let indexPage = Vue.component("index", indexHtml);
let goodsPage = Vue.component("goods", goodsHtml);
// 创建路由
const routers = new VueRouter({
routes:[
{path:"/index",component:indexPage},
{path:"/goods",component:goodsPage}
]
})
// 声明实例,并挂载路由
let vm = new Vue({
el: "#app",
router: routers
});
</script>
</body>
</html>6.axios
Axios 是一个基于 promise 的 HTTP 库，可以用在html和 vue、nodejs 中。
主要用于ajax请求
1、安装
npm install axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios</title>
</head>
<body>
<div id="app">
<button @click="getData">获取数据</button>
<div><strong>名言 : </strong>{{text.name}}</div>
<div><strong>出自 : </strong>{{text.from}}</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
text:{}
},
// 当组件实例被创建并挂载到页面中时会调用这个函数
mounted() {
this.getData();
},
methods: {
getData() {
axios.get("https://api.apiopen.top/api/sentences")
.then(res => {
vm.text = res.data.result;
console.log(res);
})
.catch(err => {
alert(err)
console.log(err);
})
}
}
});
</script>
</body>
</html>7.vue-cli
1.安装vue-cli
npm install -g @vue/cli
2.创建vue项目
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
创建vue项目，两种创建方式，我使用第一种
vue init webpack hello-world-vue2
vue create hello-world
3.创建过程中选项：插件自己随意安装与否
4.安装完成按照提示执行即可
访问验证
5.目录结构
6.简介重要文件
config\index.js
package.json
src\router\index.js
src\components\*.vue
7.新建简单的页面
成果：
步骤：
vue init webpack vue2-helloworld
npm install axios@1.5.0
npm install vue-axios
src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'es6-promise/auto'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import loginHelloWorld from '@/components/loginHelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/loginHelloWorld',
name: 'loginHelloWorld',
component: loginHelloWorld
}
]
})
src\components\loginHelloWorld.vue
<template>
<div class="loginHelloWorld">
账号:<input type="text" placeholder="账号"/>
密码：<input type="password" placeholder="密码"/>
<p><button @click="login">button跳转</button></p>
<p><a href="/#/HelloWorld">a标签跳转</a></p>
<router-link to="/HelloWorld">router-link 标签跳转</router-link>
<hr/>
<input type="button" @click='getData' value="获取名言"/>
<div><strong>名言：</strong>{{text.name}}</div>
<div><strong>出自：</strong>{{text.from}}</div>
</div>
</template>
<script>
export default {
name: 'loginHelloWorld',
data() {
return {
text: {}
}
},
mounted() {
this.getData()
},
methods: {
// eslint-disable-next-line space-before-function-paren, space-before-blocks
login(){
this.$router.push('/HelloWorld')
},
getData() {
this.axios.get("https://api.apiopen.top/api/sentences")
.then(res => {
console.log(res);
this.text = res.data.result;
})
.catch(err => {
alert(err)
console.log(err);
})
}
}
}
</script>
<style scoped>
.loginHelloWorld{
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
8.问题处理
1、创建vue项目过程中报错
vue : 无法加载文件 C:\softyg\nodejs\vue.ps1，因为在此系统上禁止运行脚本……
vue : 无法加载文件 C:\softyg\nodejs\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkI
D=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue create hello-world
+ ~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
处理方法：
则是权限原因需要重启vscode，以管理员的身份运行vscode，并在终端中输入
set-executionpolicy remotesigned
2、axios各种方式引入后npm run 报错，仅仅import 就报错了
处理方法：
npm install axios@1.5.0
降低版本即可，不知哪里去查兼容性问题，百度和ai都问了，说没有兼容性问题，总之通过将版本可以解决这个问题
扫一扫
1886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
