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框架的搭建

　　然后初始化：

　　vue init webpack myProject

　　 vue框架的搭建

第四步：

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

　　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