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 >最外层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>