正文 

当前位置： 首页 > java > java教程

vue框架的使用。

铠甲巨人 铠甲巨人     2022-10-01     688

关键词：

使用VUE首先需要下载安装一些列的环境。

 

第一步：

　　安装Node.js

　　下载并安装：node-v8.9.0-x64.msi

第二步：

　　安装Vue脚手架：

　　cmd以管理员身份执行

　　npm install vue-cli -g 或者安装淘宝版 cnpm install vue-cli -g

　　vue -V  查看是否安装成功

第三步：

　　创建项目：

　　vue init webpack myProject  (项目名字)

　　提示内容：

　　

　　然后初始化：

　　vue init webpack myProject

　　

第四步：

　　切换到项目目录下，安装依赖包。

　　cd myProject

　　npm install   安装

安装之后 查看浏览器localhost:8080  是否有 welcome to You Vue.js App字样。

有就代表环境配置以及项目创建成功了。

 

接下来准备敲代码。。。。

 

稍等，讲解一下Vue框架的逻辑。

 

Vue 单页面应用。
一个项目，只能创建一个new Vue。
Vue能够自动刷新。
 
vue项目创建成功之后，
测试npm run dev ，查看localhost 8080 能否查看，测试成功之后，
用pycharm打开项目目录，
以下是各个目录详细：
项目目录内，node_modules目录一般是放依赖包，安装的依赖包去这里查看是否安装成功。
src一般放项目需要的程序以及组件等等。
 
Vue项目的一般逻辑是：
用户直接访问的是index.html
index.html下面是 App.vue 和 main.js  通过路由的方式(index.js)  连接组件components ，目录中的组件，渲染具体内容。

所以编写思路就是：

　　1  创建组件（Vue文件）

　　2  配置路由

　　3  编写路径 （router-link）

然后是代码：

在src目录下的components目录下创建组件：

duanzi.vue

 1 <template>
 2     <div class="hello">
 3         <h1>{{ temp }}</h1>   //渲染msg变量
 4         <h2>hey girl</h2>    
 5         <ul>
 6             <li v-for="item in arr">     //循环arr数组
 7             姓名：{{item.name}}
 8             性别：{{item.sex}}
 9             年龄：{{item.age}}
10             </li>
11         </ul>
12         <div>
13             <ul>
14                 <li>
15                 姓名：<input type="text" v-model="username">     //input框输入信息
16                 </li>
17                 <li>
18                 年龄：<input type="text" v-model="userage">
19                 </li>
20                 <li>
21                 性别：<select v-model="usersex">                        //select下拉框
22                                 <option value="男" selected>男</option>
23                                 <option value="女" >女</option>
24                                 </select>
25                 </li>
26             </ul>
27          </div>
28      <input type="button" value="增加" v-on:click="addStu">      //button 绑定事件  addStu函数
29 </div>
30 
31 </template>
32 
33 <script>
34 export default {
35     name: 'duanzi',
36     data () { 
37         return {
38             temp: '我是duanzi页面',    //定义temp需要渲染的内容
39             arr:[],                       //methods内的函数需要的变量需要现在data中定义，避免函数内是window对象。
40             username:'',
41             usersex:'男',
42             userage:''
43             }
44         },
45     mounted:function () {     //mounted函数指的页面一渲染首先执行的函数。 这里首先执行showlist函数
46         this.showList()
47         },
48     methods:{      //函数一般都写在这里，可以写多个函数。
49     showList(){     //这里是写死一个数组，data里的空列表实际就是为了这个数组而声明一下，不然this指的是window对象，而不是data中的列表。
50     this.arr = [{
51         name:'tom',age:18,sex:'male'},
52         {name:'jerry',age:19,sex:'male'}]
53         },
54     addStu(){            //绑定事件的函数，在arr数组中添加用户在input框中输入的内容。提交之后就能实时渲染到页面了。
55         this.arr.push({name:this.username,age:this.userage,sex:this.usersex})
56     }}
57     }
58 </script>
59 
60 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 <style scoped>    //下面是一些默认的css样式。
62 h1, h2 {
63     font-weight: normal;
64 }
65 ul {
66     list-style-type: none;
67     padding: 0;
68 }
69 li {
70     /*display: inline-block;*/
71     margin: 0 10px;
72     margin-bottom: 10px;
73 }
74 a {
75     color: #42b983;
76 }
77 </style>

 

在创建另一个组件HelloWorld.vue：

 1 <template>
 2     <div class="hello">
 3         <h1>{{ msg }}</h1>
 4         <h2>hey boy</h2>
 5 
 6     </div>
 7 
 8 </template>
 9 
10 <script>
11 export default {
12     name: 'HelloWorld',
13     data () {
14         return {
15             msg: 'hello world'
16             }
17         },
18     methods:{
19         showme:function(){
20         alert(this.msg)}
21         }
22     }
23 </script>
24 
25 <!-- Add "scoped" attribute to limit CSS to this component only -->
26 <style scoped>
27     h1, h2 {
28     font-weight: normal;
29   }
30     ul {
31     list-style-type: none;
32     padding: 0;
33   }
34     li {
35     display: inline-block;
36     margin: 0 10px;
37 }
38 a {
39     color: #42b983;
40 }
41 </style>
HelloWorld.vue
代码道理和duanzi.vue一样，只是输出内容不一样，实现两个页面。
 
之后在App.vue中配置具体渲染位置。
在index.js中配置路由。

 

 1 <template>
 2     <div id="app">   //最外层div，这里的id很重要，这里的id和index.html是一致的，代表将渲染到的位置。
 3         <h1>澳门首家在线赌场</h1>   //这里写的标签在两个组件的页面都能显示，类似django模板继承效果。
 4         <router-link to="/"> helloworld</router-link> 
 5         //这里的router-link 就是将组件渲染到这里，实际是一个a标签，to写的是path路径，和index.js中是一致的。
 6         <router-link to="/duanzi"> duanzi</router-link>
 7         <router-view/>  //这个router-view 是关键点，不能删除。
 8     </div>
 9 </template>
10 
11 <script>
12 export default {
13     name: 'app'    //这里也是写那个id。
14     }
15 </script>
16 
17 <style>                  //下面是默认样式
18 #app {
19 font-family: 'Avenir', Helvetica, Arial, sans-serif;
20 -webkit-font-smoothing: antialiased;
21 -moz-osx-font-smoothing: grayscale;
22 text-align: center;
23 color: #2c3e50;
24 margin-top: 60px;
25 }
26 </style>
App.vue

面是配置App.vue,下面开始配置index.js路由

 1 import Vue from 'vue'     //这里的导入和python不太一样需要注意。
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'  //导入两个组件，@代表从根目录下找。
 4 import duanzi from '@/components/duanzi'
 5 
 6 Vue.use(Router)
 7 
 8 export default new Router({    
 9 //路由除了创建项目的时候安装，也可以单独安装
10     routes: [
11         {
12             path: '/',    //路径需要和App.vue中一致，不然找不到。/目录建议默认一个，不然首页会为空。
13             name: 'HelloWorld',   //这个名字不是很重要，可写可不写，主要是区分组件功能。
14             component: HelloWorld   //写组件文件名字。
15         },
16         {
17             path: '/duanzi',
18             name: 'duanzi',
19             component: duanzi
20         }
21      ]
22 })
index.js

如上就是路由的配置。

main.js代码：

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import axios from "axios"
 5 Vue.config.productionTip = false
 6 Vue.prototype.axios=axios
 7 /* eslint-disable no-new */
 8 new Vue({
 9     el: '#app',
10     router,
11     template: '<App/>',
12     components: { App }
13 })
main.js

index.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6         <title>myvue</title>
 7     </head>
 8 <body>
 9     <div id="app"></div>
10     <h2>我是index.html</h2>  //这里我写了个h2标签，区分一下效果。
11 
12 
13     <!-- built files will be auto injected -->
14     </body>
15 </html>
index.html
写完代码，我们可以通过npm start  （npm run dev也可以）在cmd中启动Vue项目，然后通过http://localhost:8080  访问内容。
以下为实现效果：

另一个页面：

 

 

 

完结撒花✿✿ヽ(°▽°)ノ✿

 

 

 

　　

vue框架

vue框架“Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。”vue的兼容性Vue.js不支持IE8及其以下版本，因为Vue.js使用了IE8不能模拟的ECMAScript5特性。Vue.js支持所有兼容EC... 查看详情

在vue.js使用配置（ssh框架的附带使用）

在此之前！请在数据库创建一个lib的数据库！+++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------【包名com.nf.action】（文件名BookAction.j 查看详情

vue框架深入使用（v客学院知识分享）

随着JS框架的广泛运行，三大JS框架均分天下（angular、vue、react),目前国内市场VUE的使用比例还是占着相当的份额，所有我们今天主要来讨论下VUE框架的经典使用，以下展示五个特殊用法。1：精简Watchers场景还原：12345678created()&nbs... 查看详情

在不使用模板或框架的情况下使用 Phonegap 设置 Vue.js

】在不使用模板或框架的情况下使用Phonegap设置Vue.js【英文标题】：SetupVue.jswithPhonegapwithoutusingtemplateorframework【发布时间】：2017-09-0318:51:40【问题描述】：我只是Vue.js和Phonegap的新手。请帮助我在不使用任何模板或框架的情况下... 查看详情

前端vue框架路由的安装及使用

安装:　　1.cmd下输入:npminstallvue-router--save//安装路由 　　2.npmrundev//重新启动使用: 　　1.在mian.js下引入路由importVueRouterfrom‘vue-router‘ 　　2.在mian.js下使用路由Vue.use(VueRouter) 　　3.在mian.js下配置路由　　　　constrouter(定义一... 查看详情

vue的使用

...听器四、表单输入绑定  一、VUE介绍 1.在前端框架技术中有三大框架：Angularjs：谷歌公司生产 React：Facebook公司  Vue:尤雨溪（中国） 2.vue的介绍vue官网说：Vue.js（读音/vju?/，类似于view）是一套构建用户... 查看详情

关于使用 Laravel 和 Vue.js 的两个框架的 API 的问题

】关于使用Laravel和Vue.js的两个框架的API的问题【英文标题】：QuestionaboutAPIswithtwoframeworksusingLaravelandVue.js【发布时间】：2019-08-0903:01:10【问题描述】：我是编码框架和将后端集成到另一个前端框架的新手。你能解释一下如果我使... 查看详情

vue的基础使用(代码片段)

一.vue的介绍前端框架和库的区别node.js的简单使用vue的起步指令系统组件的使用过滤器的使用watch和computed钩子函数二.渐进的JavaScript框架vuereactangualr作者:尤雨溪facebook谷歌公司文档:中文建议:如果你想学好vue1.看视频初步的了解vue... 查看详情

使用 webpack 配置 Vue 框架 - 不应用样式

】使用webpack配置Vue框架-不应用样式【英文标题】：ConfiguringVueframeworkwithwebpack-stylesarenotapplied【发布时间】：2020-12-2920:21:36【问题描述】：我在使用webpack配置Vue框架时遇到问题。更准确地说，问题在于单个文件组件中&lt;style&a... 查看详情

使用vue+jfinal框架搭建前后端分离系统(代码片段)

...一种方式，现在应用越来越广泛。前端一般比较流行Vue.js框架，后端框架比较多，网上有很多Vue+SpringMVC前后端分离的demo，但是Vue+JFinal框架貌似没有搜到，本文基于Vue.js和JFinal框架，给出了搭建了一个前后端分离项目的简单例子... 查看详情

vue框架的两种使用方式(代码片段)

1、使用VueCLI工具生成脚手架，这是最常见的使用方式，简单用模板生成一个HelloWorldDemo，可以学习Vue的SPA项目结构2、通过script引入Vue.js，详细如下：这里搭配Mint-ui<!DOCTYPEhtml><html><head><metacharset="UTF-8"><!--引入... 查看详情

vue框架学习(代码片段)

　　1.什么是Vue　　Vue.js是一个渐进式JavaScript框架　　渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,都可以用vue框架来实现　　2.vue可以干哪些事　　将数据渲染到指定区域(数据可以是后... 查看详情

前端框架vue——百度地图使用

参考技术A百度地图的使用需要一个专属的密钥（ak）作为路径：按步骤完成，并且激活就能获得一个密钥了，这样我们就可以开始引入地图了。先来看效果图：现在在index.html中引入script: 查看详情

vue框架(代码片段)

一.导读： 1.什么是VueVue.js是一个渐进式JavaScript框架渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，都可以用vue框架来实现2.vue可以做哪些事将数据渲染到指定区域（数据可以是后台... 查看详情

在每个带有自己的变量的 Vue 组件中使用 CSS 框架

】在每个带有自己的变量的Vue组件中使用CSS框架【英文标题】：UseCSSFrameworkineveryVueComponentwithownvariables【发布时间】：2017-07-0514:49:03【问题描述】：我对@9​​87654322@和Webpack的世界还很陌生，所以我需要一些帮助。我已经通过控... 查看详情

vue框架制作todolist

在初步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。首先列出在实现功能的过程中需要... 查看详情

一步步带你做vue后台管理框架——上手使用

系列教程《一步步带你做vue后台管理框架》第二课github地址：vue-framework-wz线上体验地址：立即体验　　闲扯再多不会用也没白搭，这节课我来带大家直接上手框架，体验到简单方便之后你就会爱上这个框架欲罢不能的。　　首... 查看详情

前端vue框架

...、什么是VUE？ 　　它是一个构建用户界面的JAVASCRIPt框架 　　vue不关心你页面上的是什么标签，它操作的是变量或属性为什么要使用VUE？　　在前后端分离的时候，后端只返回json数据，再没有render方法，前端发送ajax请求... 查看详情