- List item
vue
1. vue介绍
渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架
地址：https://cn.vuejs.org/
什么是vue？
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
2. idea配置
- 安装插件 vue.js
- 创建前端项目 (略)
- 导入vue.js文件
3. vue语法
3.1 vue入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 胡须表达式 大胡子表达式 ，取值，展示-->
{{username.length}}
{{age}}
{{user.age+10}}
{{arr.length}}
{{users[1].address}}
</div>
<script type="text/javascript">
// 初始化vue对象
new Vue({
el: "#app", // 挂载点，
data: { // 模型数据
username: "tom",
age: 20,
user:{
username: "jack",
age: 20,
address: "bj"
},
arr:["张三","李四","王五"],
users: [
{
username: "jack1",
age: 20,
address: "bj"
},
{
username: "jack2",
age: 20,
address: "bj2"
},{
username: "jack3",
age: 20,
address: "bj"
}
]
},
methods:{
// 方法的地方
}
});
</script>
</body>
</html>
3.2 vue指令(很重要)
- v-html
- v-text
- v-bind
- v-show
- v-on
- v-if
- v-for
- v-model ------MVVM
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}} <br/>
<span v-text="msg"></span> <br/>
<span v-html="msg"></span> <br/>
<button type="button" v-on:click="isShow">按钮一</button>
<button type="button" @click="isShow">按钮二</button><br/>
<img width="200px" v-bind:src="path">
<img v-show="flag" :width="width" :src="path">
<br/>
<span v-if="age<18 && age>0">未成年，可以预习java了</span>
<span v-else-if="age>=18 && age<=65">成年了，可以学习java了</span>
<span v-else-if="age>65">可以退休了。。。。</span>
<span v-else>输入年龄错误。。。</span>
<br/>
<ul>
<li v-for="(a,b) in arr">{{a.username}}======{{b}}</li>
</ul>
<br/>
用户名：<input type="text" v-model="name" > -------{{name}}
</div>
<script type="text/javascript">
/**
* 指令
* v-text: 文本操作
* v-html: 可以解析标签
* v-bind: 属性绑定
* v-show: 展示，不展示
* v-on: 事件绑定指令
* v-if: 判断
* v-for: 循环指令
* v-model: 双向绑定
*/
new Vue({
el: "#app",
data:{
name: "xx",
msg: "<h1>王天霸</h1>",
path: "img/erha.jpg",
width: "200px",
flag: false,
age: -11,
arr:[
{
username: "张根硕1",
age: 31,
},
{
username: "张根硕2",
age: 32,
},
{
username: "张根硕3",
age: 33,
}
]
},
methods:{
isShow(){
this.flag = !this.flag;
},
}
});
</script>
</body>
</html>
3.3 vue侦听属性和计算属性(了解)
- watch属性
- computed 属性
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
{{birth}}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "xx",
name:"tom",
date: 1713429960000,
},
methods:{},
watch:{ // 监听属性
// 参数一：新值，参数二：上一次的值
msg(a,b){
console.debug(a,b);
}
},
computed:{ // 计算属性
birth(){ // 处理时间戳---》时间
let d = new Date(this.date);
return d.getFullYear()+"年:"+d.getMonth()+"月:"+d.getDate()+"日";
}
}
});
</script>
</body>
</html>
3.4 vue组件(很重要)
-
全局组件
任意的挂载点都可以使用
// 语法： Vue.component("mycomponent",{ template : "<h1>这是全局组件</h1>"
全局组件代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<template id="mytemp">
<div>
<h1>全局组件</h1><h2>{{msg}}</h2>
</div>
</template>
<script type="text/javascript">
// 定义组件： myComponent： 自定义的标签
/**
* 注意事项：
* 1. 标签尽量不要大写
* 2. 模版中有且只能有一个根标签
*/
// 模版的定义方式： 在<template>标签中定义thml内容
Vue.component("myComponent",{
template:"#mytemp",
data(){
return{
msg: "张三"
}
}
});
new Vue({
el: "#app",
data:{
msg:"你好"
}
});
new Vue({
el: "#app2",
data:{
msg:"你好"
}
});
</script>
</body>
</html>
-
局部组件
只能在某一个vue实例的挂载点使用
// 语法 var app = new Vue({ el: "#app", data: {}, components : { "局部组件的名字1" : {组件的配置对象}, "局部组件的名字2" : {组件的配置对象} } });
局部组件代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<innercomponent1></innercomponent1>
<innercomponent2></innercomponent2>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {},
components:{
"innercomponent1":{
template: "<h1>我是局部组件1-----{{msg}}</h1>",
data(){
return{
msg: "xx",
}
}
},
"innercomponent2":{template: "<h1>我是局部组件2</h1>"},
}
});
</script>
</body>
</html>
3.5 vue路由（很重要）
什么是路由？
后端：对于普通网站，所有的超链接都对应一个url地址，每个url都对应服务器上的资源
前端：对于单页面应用程序来说的，主要通过url中的#（hash）去实现的，(当关于a标签)
路由使用
引入vue-router.js文件
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/index">首页</router-link>
<router-link to="/dept">部门</router-link>
<router-link to="/emp">员工</router-link>
<!-- // 路由出口-->
<router-view></router-view>
</div>
<script type="text/javascript">
// 1. 定义组件
var INDEX = Vue.component("index",{template:"<h1>首页</h1>"});
var EMP = Vue.component("emp",{template:"<h1>员工管理页面</h1>"});
var DEPT = Vue.component("dept",{template:"<h1>部门管理页面</h1>"});
// 2. 定义路由
var routes = [
{path: "/index",component: INDEX},
{path: "/dept",component: DEPT},
{path: "/emp",component: EMP}
]
// 3. 创建路由实例
var router = new VueRouter({
routes //相当于 routes: routes
});
new Vue({
el: "#app",
data:{},
// 4. 使用路由
router //router: router
});
</script>
</body>
</html>
4. nodejs和npm
4.1 什么是nodejs和npm？
*Node：是JavaScript的运行时环境*。Node并不是一个新的语言，只是js的一个环境，同样的比如：tomcat。Node为js提供了更强大的操作方式，如：在浏览器中，js是无法操作文件的，而node提供了文件操作。在浏览器中，js无法写服务接口，node提供了后端代码编写的功能（写后台、操作数据库）。尽管如此，Node依然是个前端技术，并不会真正的使用node去写后端代码，*node更多的是给前端项目做配置*，如：跨域代理。
*Npm：npm是node提供的一个包管理工具，类似于maven*。通过npm去安装依赖包，就不需要在页面上使用script标签引入了。 前端也有依赖
命令：-g（globle）全局安装，任何项目都可以用。–save-dev开发环境安装，不会打包到生产。生产安装（默认）
大前端工程: 人家可以使用node js 开发数据接口, 但是nodejs 的速度很差.
4.2 node下载和安装
-
下载地址： http://nodejs.cn/
-
安装（略） 不要安装在有中文，特殊字符等目录
-
测试安装是否成功
cmd命令 输入 node -v
cmd命令 输入 npm -v
-
npm镜像加速器配置
执行命令 ：npm config set registry https://registry.npm.taobao.org （过期了，不能用了）
npm config set registry https://registry.npmmirror.com/ （可以使用，没过期）
删除淘宝镜像源： npm config delete registry
查看当前镜像源：npm config get registry
清缓存命令：npm cache clean --force
npm 常用命令：
安装命令： npm install xx 简写成 npm i xx
5. vue-cli 脚手架
5.1. 什么是vue-cli
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板。
5.2. vue-cli安装
全局安装：
npm install -g @vue/cli
5.3. 查看版本信息
vue -V
5.4. 使用vue-cli创建项目
方式很多，我们这里面使用的是命令(idea)
- 手动创建： vue create my-project 注意：项目名不能有大写
- 使用idea创建： (看视频)
- 启动命令： npm run serve
- 打包命令： npm run build
单页面组件： 以.vue结尾的文件
三部分：
1. template ：编写 html代码
2. script: 编写js代码的
3. style: 编写样式的。
6. elementUi框架
官网地址：https://element.eleme.cn/#/zh-CN/component/installation
使用：
- 安装： npm i element-ui -S
- 使用
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
7. axios使用
官网地址： 起步 | Axios中文文档 | Axios中文网 (axios-http.cn)
- 下载安装
npm install axios
-
main.js中配置
// 引入axios import axios from "axios"; // 对vue实例中添加了一个属性xxyy,值为axios axios.defaults.baseURL='http://localhost:8081' // 配置axios全局基本路径 Vue.prototype.$http=axios;
8. 视频案例 - springboot+vue前后端案例
点赞关注私信我，免费获取视频—谢谢老铁的支持。
标签：私信,视频,vue,age,js,Vue,npm,组件 From： https://blog.csdn.net/QQ903275718/article/details/142880133