vue

Element UI 和 Layui-----前端组件很好用

1、第一个vue程序

IDEA导入vue.js插件

导入vue.js

html文件：

<!--view层  模板-->
<div id="app">
    {{message}}
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            message: "Hello!!!"
        }
    });
</script>

在浏览器开发工具里面，console可以输入vm.message=“xxx”-----》可以改变视图内容

2、MVVM框架

当下流行的MVVM框架有：Vue.js, AngularJs

优点：

MVVM框架和MVC框架模式一样，分离视图和模型
视图可独立于model变化和修改

3、vue基本语法

7大常用属性

根据官网文档学习

判断-循环

if：

<!--view层-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            type: "A"
        }
    });
</script>

for:

<!--view层-->
<div id="app">
    <h1 v-for="item in items">
        {{item.message}}
    </h1>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            items: [
                {message: 'yangshi'},
                {message: 'yangtao'},
                {message: 'yangqingqng'}
            ]
        }
    });
</script>

4、vue绑定事件

查看jQuery中文文档！！！

<!--view层-->
<div id="app">
    <button v-on:click="sayhello">click me</button>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            message: "yangshi"
        },
        methods: {
            sayhello: function (event){
                alert(this.message);
            }
        }
    });
</script>

5、vue双向绑定

单项:

<!--view层-->
<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="message">男
    <input type="radio" name="sex" value="女" v-model="message">女
    <p>
        选中了：{{message}}
    </p>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            message: ''
        }
    });
</script>

下拉框：

<!--view层-->
<div id="app">
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>value:{{selected}}</span>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model数据
        data:{
            selected: ''
        }
    });
</script>

6、vue组件

定义一个vue组件：

<!--view层-->
<div id="app">
  <!--将遍历的值传递给组件的 props-->
    <yangshi v-for="item in items" v-bind:p="item"></yangshi>
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件
    Vue.component("yangshi",{
        props: ['p'],
        template: '<li>{{p}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data:{
            items: ["yangshi","yangtao","yangqing"]
        }
    });
</script>

vm对象要传值给同等级的组件yangshi，通过view层绑定遍历然后传值给组件yangshi

7、Axios异步通信（推荐）

少用 JQuery；

注意在IDEA setting查看javaScript的版本

mounted（）//钩子函数

通过mounted（）方法将response.data赋值给info；info和view层绑定获取值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<!--view层-->
<div id="app">
    <div>{{info.name}}</div>
    <h2>------------------------</h2>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">点击链接</a>
</div>


<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data(){
          return{
              //请求返回参数合适，必须和json字符串一样
              info: {
                  name: null,
                  address: {
                      street:null,
                      address:null,
                      city:null,
                      country:null
                  },
                  url: null
              }
          }
        },
        mounted(){//钩子函数，ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

</body>
</html>

data.json

{
  "name": "baidu",
  "url": "https://www.baidu.com/",
  "page": 1,
  "address": {
    "street": "含光门",
    "city": "beijing",
    "country": "china"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com/"
    }
  ]
}

8、计算属性（可以想象为缓存）

计算出来的结果，保存在属性中，

虚拟Dom

<!--view层-->
<div id="app">
    <p>currentTime1{{currentTime1()}}</p><!--currentTime1是一个方法-->
    <p>currentTime2{{currentTime2}}</p><!--currentTime2是一个属性-->
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "hello!!"
        },
        methods: {
            currentTime1: function (){
                return Date.now();
            }
        },
        computed: { //计算属性（类似于缓存）：computed， methods方法名不能重名，重名之后会调用methods方法。
            currentTime2: function (){
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>

9、slot--插槽

自定义组件todo 用于使用slot插槽并且给slot一个name；
自定义test1和test2组件，用于接收vm对象信息；并将信息填入slot插槽
view层将三者联系在一起

<!--view层-->
<div id="app">
    <todo>
        <test1 slot="todo-title" v-bind:p="title"></test1>
        <test2 slot="todo-items" v-for="todoItems1 in todoItems" v-bind:x="todoItems1"></test2>
    </todo>
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>'
    });

    Vue.component("test1",{
        props: ['p'],
        template: '<div>{{p}}</div>'
    });

    Vue.component("test2",{
        props: ['x'],
        template: '<li>{{x}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title: "课程",
            todoItems: ['java','web','spring']
        }
    });
</script>

10、自定义事件

通过view层，将vm实例的方法变成一个自定义事件，test2组件绑定这个自定义事件

<!--view层-->
<div id="app">
    <todo>
        <test1 slot="todo-title" v-bind:p="title"></test1>
        <test2 slot="todo-items" v-for="(todoItems1,index) in todoItems" v-bind:x="todoItems1"
               v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></test2>
    </todo>
</div>

<!--导入vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>'
    });

    Vue.component("test1",{
        props: ['p'],
        template: '<div>{{p}}</div>'
    });

    Vue.component("test2",{
        props: ['x'],
        template: '<li>{{x}} <button v-on:click="remove1">删除</button> </li>',//只能绑定当前组件方法
        methods: {
            remove1: function (index) {
                this.$emit('remove',index);//绑定自定义事件
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title: "课程",
            todoItems: ['java','web','spring']
        },
        methods: {
            removeItems: function (index) {
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>

总结：

常用属性：
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件（简写@）
- v-model 数据双向绑定
- v-bind 给组件绑定参数，简写：
组件化：
- 组合组件slot插槽
- 组件内部绑定事件：this.$emit("事件名",参数)；
- 计算属性（是属性），缓存计算数据

Vue开发基于NodeJS，要采用vue-cli（脚手架），vue-router（路由），vuex(状态管理)，Vue UI(界面，一般使用 ElementUI，ICE)

11、第一个vue-cli项目

vue-cli: 5.0.8

脚手架

下载：Node.js 中文网 — 下载 Node.js

下载windows的.msi

测试是否安装成功：cmd--》node -v

cmd--》npm -v

npm是一个软件包管理工具。
安装Node.js淘宝镜像加速器（cnpm）

cmd--》npm install cnpm -g
安装vue-cli：cmd--》npm install -g @vue/cli@next

创建项目：进入已创建的空文件夹目录下

cmd--》vue create myvue（新版 CLI 无需依赖 GitHub 模板，且内置 webpack）

一路选no
cd myvue
npm run serve---启动项目（就像Tomcat一样，访问网址http://localhost:8080可以访问到默认网页）

然后IDEA打开项目开干

12、webpack静态模块打包器(不要看，直接看第十七点)

安装：

cmd--》npm install webpack -g
npm install webpack-cli -g

测试：

webpack -v
webpack-cli -v

创建项目：

新建文件夹；IDEA打开空文件夹

在项目下建一个modules，用于存放js文件

hello.js:

//暴露方法
exports.sayhello = function () {
    document.write("<h1>yangshi</h1>");
}
exports.sayhello2 = function () {
    document.write("<h1>yangshi</h1>");
}
exports.sayhello3 = function () {
    document.write("<h1>yangshi</h1>");
}
exports.sayhello4 = function () {
    document.write("<h1>yangshi</h1>");
}

main.js:

var hello = require("./hello");
hello.sayhello();
hello.sayhello2();

项目下建webpack.config.js:

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
};

在IDEA控制台输入 webpack ；打包。如果失败就使用管理员权限。

如果爆红：Windows PowerShell 默认阻止运行未数字签名的脚本

打开Windows PowerShell----》 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser----》 Get-ExecutionPolicy -List（CurrentUser 为RemoteSigned则欧克）
在项目下建html文件，引用已打包好的js文件即可。----模块开发
```
<script src="dist/js/bundle.js"></script>
```

13、vue-router路由器(不要看，直接看第十七点)

打开官方文档学习新知识

前提：已经安装Node.js和npm

打开cmd，下载安装：

安装vue-router：npm install vue-router@4 --save-dev
跳转目录，启动服务

IDEA配置vue-router：

main.js: 配置router

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";

createApp(App).mount('#app')
createApp(App).use(router).mount('#app')
//和下面的是一样的
// const app = createApp(App)
// app.use(router)
// app.mount('#app')

在src目录下创建一个router文件夹存放一个index.js文件（配置router）

给组件设置路由器

import { createRouter, createMemoryHistory } from 'vue-router';
import ContentPage from '@/components/ContentPage.vue';
import MainPage from "@/components/MainPage";
const routes = [
    {
        path: '/ContentPage',
        name: 'ContentPage',
        component: ContentPage,
    },
    {
        path: '/MainPage',
        name: 'MainPage',
        component: MainPage,
    },

];

const router = createRouter({
    history: createMemoryHistory(),
    routes,
})
export default router;

在src目录下创建一个components文件夹存放一个.vue文件（组件）

MainPage.vue

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "MainPage"
}
</script>

<style scoped>

</style>

ContentPage.vue:

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "ContentPage"
}
</script>

<style scoped>

</style>

App.vue:

<template>
<div id="app">
  <h1>vue-router</h1>
  <RouterLink to="/MainPage">首页</RouterLink>
  <RouterLink to="/ContentPage">业务</RouterLink>
  <router-view></router-view>
</div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run serve启动

总结：

index.html不用动，固定的；编写App.vue即可
main.js配置完router之后也不需要动了
在组件文件夹下编写.vue组件
编写路由器router文件夹的index.js，引入组件，给组件一个地址
App.vue通过<RouterLink>标签得到地址，根据地址找到该路由器下的组件，并执行组件内容

注意：组件名不能是单个单词，如Context；需要多个单词组合，如ContextPage

14、Vue3+ Element Plus

桌面化应用---Element Plus

弹窗-----Layui独立组件

（如果npm失败可以换成cnpm）

下载安装：

npm install element-plus # 安装Element Plus（Vue 3专用）
npm install @element-plus/icons-vue # 图标库（可选)

配置示例（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入Element Plus组件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

全局引入（main.js）

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

提供了编译好的 CSS 文件

import 'element-plus/dist/index.css'  // 在 main.js 中引入

启动测试：npm run serve

看官网！！！！！！

main.js:

// Vue 3 + Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
App.use(ElementPlus)

15、嵌套路由

16、参数传递以及重定向

17、基于Vue 3 + Vite构建工具（建议）

安装Node.js环境

node -v  # 验证安装（需输出v18.x或更高）
npm -v   # 验证npm版本

创建Vue项目（推荐Vite）

npm create vite@latest my-vue-app -- --template vue

进入项目并安装依赖

cd my-vue-app
npm install  # 安装依赖包

npm run dev 启动服务器

添加依赖router路由器：

npm install vue-router@4 pinia axios

index.js

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [{ path: '/', component: Home }]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

修改Vite配置（vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000  // 自定义端口
  }
})

生产环境构建

npm run build  # 生成dist文件夹
npm run preview  # 本地预览生产包

注意：有了vite就不需要webpack了；

posted @ 2025-04-26 13:28 蟹堡博阅读(34) 评论(0) 收藏举报

刷新页面返回顶部

vue

vue