Vue框架的使用。
Posted 铠甲巨人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue框架的使用。相关的知识，希望对你有一定的参考价值。
使用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>
代码道理和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,下面开始配置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 })
如上就是路由的配置。
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 })
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>
写完代码，我们可以通过npm start （npm run dev也可以）在cmd中启动Vue项目，然后通过http://localhost:8080 访问内容。
以下为实现效果：
另一个页面：
完结撒花✿✿ヽ(°▽°)ノ✿
以上是关于Vue框架的使用。的主要内容，如果未能解决你的问题，请参考以下文章