java学习-veu

最新推荐文章于 2025-12-27 22:16:37 发布

原创最新推荐文章于 2025-12-27 22:16:37 发布 · 245 阅读

CC 4.0 BY-SA版权

一，安装node-v12.14.1-x64.msi以及VSCodeUserSetup-x64-1.41.1.exe会自动进行环境配置
在这里插入图片描述
安装完成标志

写一个简单的小例子：1.使用软件打开路径C:\java\code\Vue\vuecode自己设置的路径目录。
2.创建一个空的目录在这里插入图片描述
3.
在目录中创建文件。
4.
在终端中打开目录。
5.

npm install vue

导入所需要的依赖文件，如果是打开别人的项目直接使用npm install可以导入别人的所有依赖。
在这里插入图片描述
6.可以新建一个lib目录将要用的js文件复制进去方便之后的调用。

7.新建一个html文件输入html可导入头部代码
代码：

<!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">
        {{msg}}

    </div>
    
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el:'#app',//绑定视图层
        data:{
            msg:'nihao'
        }
    })
</script>
</html>

8.发布使用
在这里插入图片描述

在这里插入图片描述

二，双向绑定及事件
绑定视图层与控制层，在视图层修改的数据控制层也会更改v-model

<input type="text" v-model:value="searchMap.keyword">

双向绑定

<!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">
        {{msg}}
        <input type="text" v-bind:value="searchMap.keyword">

        <input type="text" v-model:value="searchMap.keyword">

        <button v-on:click="dianji()">点击后台输出</button>

    </div>
    
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el:'#app',//绑定视图层
        data:{
            msg:'nihao',
            searchMap:{
                keyword:'guo'
            } 
        },
        methods:{
            dianji(){
                console.log("点击了")
            }
        }
    })
</script>
</html>

事件：

<!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">
        {{msg}}
        <input type="text" v-bind:value="searchMap.keyword">

        <input type="text" v-model:value="searchMap.keyword">

        <button v-on:click="dianji()">点击后台输出</button>

        <button v-on:click="search()">查询</button>

        <p>你要查询的是：{{result.title}}</p>
        <p><a :href="result.site" target="_blank">{{result.title}}</a></p>

    </div>
    
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>

<script>
    new Vue({
        el:'#app',//绑定视图层
        data:{
            msg:'nihao',
            searchMap:{
                keyword:'guo'
            },
            result:{}//所有的数据都在这里
        },
        methods:{
            dianji(){
                console.log("点击了")
            },
            search(){
                this.result={
                    "title":"百度",
                    "site":"http://www.baidu.com"
                }
            }
        }
    })
</script>
</html>

三，路由
1.首先导入 vue和vue-router依赖
2.

<!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>Hello,App!</h1>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/student">学员管理</router-link>
      <router-link to="/teacher">讲师管理</router-link>
      <router-link to="/all">全部</router-link>
    </p>
    <!-- 显示view -->
    <router-view></router-view>
  </div>

  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    //1、定义路由的组件
    const welcome = { template: '<div>欢迎</div>' }
    const student = { template: '<div>Student List</div>' }
    const teacher = { template: '<div>Teachet List</div>' }
    const all={ template:'<div>all List</div>'}

    //2、定义路由
    const routes = [
      { path: '/', redirect: '/welcome' },
      { path: '/welcome', component: welcome },
      { path: '/student', component: student },
      { path: '/teacher', component: teacher },
      {path:"/all",component:all}
    ]

    // 3、创建 router实例
    const router = new VueRouter({
      routes: routes //
    })

    // 挂载路由
    new Vue({
      el: '#app',
      router
    })

  </script>

</body>

</html>