入门vue

Vue入门

基础语法

七大对象（属性）

 var vm=new Vue({
     el:'#app',
     data:{msg:'你好'},
     methods:{
         go(){
             alert('123');
         }
 ​
     }
     mounted(){axios.get('data.json').then(response=>        (console.log(response.data))))}#用途：在生命周期中插入方法执行功能。
 }

• el：用途：绑定页面元素

• data：用途：获取后端数据，供页面调用数据

• methods：用途：提供事件绑定

vue项目的创建

1. 安装node.js

2. 安装cnpm命令:npm install cnpm -g

3. 安装vue命令:npm install vue-cli

4. 新建项目：vue init webpack myvue

5. 安装依赖：npm install

6. 运行项目：npm run dev

7. 安装router：npm install vue-router (--save-dev)

8. 安装axios：npm install axios (--save-dev)

项目目录分析

1. build目录：webpack打包的配置。打包配置文件（base）核心两个配置：entry和output。

2. config目录：项目web端访问配置，包括index.js核心配置，dev和pro配置。内容包括访问接口名（port）等。

3. src目录：代码根目录。

   • main.js文件：将前端页面与App.vue页面关联，只要编写Vue页面，并导入到App.vue中，就可以将页面信息渲染到前端页面

   • App.vue文件:将vue组件汇总起来的总vue页面

   • components文件夹：包含vue组件的文件夹，前端页面与script代码被写到这里，最后暴露给App.vue调用

4. staic目录：静态资源文件夹

5. index.html：前端页面入口

6. package.json:依赖信息（种类版本）汇总，供打包使用

7. node_modules文件夹：idea默认隐藏文件夹，里面包含下载的依赖项，如核心包Vue。

Vue前端页面的编写

步骤

文件关系图：main.js管理index.js，index.js管理vue组件，App.vue显示页面（如router-link链接）

1. 编写组件：如kuang，main，context这些是vue组件，也就是页面。

2. 注册到router/index.js中

3. App.vue中编写url访问地址(<router-link>主界面</router-link>)

4. 在main.js中注册自己创建的router（import router from "./router/index"）

components文件夹新建vue Component组件

• 组件的核心：显示页面，暴露接口

• js文件的核心：路由，导入组件，供main.js调用

context.vue组件（组件举例：展示内容）

 <template>
 <!--  //html页面代码-->
   <div id="app">
     <h1>内容页</h1>
   </div>
 ​
 </template>
 <!--script代码-->
 <script>
 //暴露这个组件供其他组件调用（如调用代码：import Context from "./components/Context";）
   export default {
     name: "Context",
   }
 </script>
 <!--//页面样式代码-->
 <style scoped>
 </style>

将Context组件注册到router/index.js(路由)中

 import Vue from "vue";
 import VueRouter from "vue-router";
 ​
 import Context from "../components/Context";
 import Main from "../components/Main";
 import Kuang from "../components/Kuang";
 ​
 //安装路由
 Vue.use(VueRouter);
 ​
 //配置路由（作用转发网址，映射到页面）
 export default new VueRouter({
   routes:[
     {
       //路由路径
       path:'/content',
       name:'content',
       //跳转的组件
       component:Context
     },
     {
       path:'/main',
       name:'main',
       component:Main
     },
     {
       path:'/kuang',
       component:Kuang
     }
 ​
   ]
 })
 ​

将index.js注册到main.js

 import Vue from 'vue'
 import App from './App'
 ​
 import router from "./router"
 ​
 Vue.config.productionTip = false;
 ​
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })

编写App.vue，前端展示

 <template>
   <div id="app">
     <h1>111卡u那个神</h1>
     <router-link to="/main">首页</router-link>
     <router-link to="/content">内容页</router-link>
     <router-view></router-view>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'App',
 }
 </script>
 ​
 <style scoped>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>