Vue学习记录(1简单特点-2动态路由配置-3生命周期-4创建项目流程-5idea使用)

1.List item

Vue比起平常的前端框架多了一个双向数据绑定
平常框架是响应式的 Vue 是单页面式

Vue特点:
        双向数据绑定
基本操作:
         
         cnpm init webpack demo //创建项目
         
         cnpm install //初始化项目
         
         cnpm run dev  //本地运行
         

现在列出关键词用于回顾:

<template>
    //每一个Vue的全部显示代码都在一个艮节点上显示
    <div id="app">
        
        <ul>
            //循环
            <li v-for="(item,key) in list">
                //输出list的数据 -----也可以向list中输入数据
                {{item}}---{{key}}
            </li>
        </ul>
    
    </div>

</template>

<script>
    export default{     
      data () {  /*业务逻辑里面定义的数据*/
        return {
            //定义的数据
            list:[],
        }
      },
      //方法区
      mountes(){
          console.log(this.$route.params);  /*获取动态路由传值*/
    }
    }
</script>    
//css代码的存放处
<style lang="scss">
</style>

2.设置动态路由

//其中还有一个是挂载 Vue的挂载与 在JQ中引入jsp页面的引入 除了实现方法 差不太多

		  1.
           import VueRouter from 'vue-router';
           Vue.use(VueRouter);
           
           2.创建组件
           import Demo from './components/Demo.vue';
           
           3,配置路由
           const routes = [
             { path: '/demo', component: Demo },
             { path: '*', redirect: '/demo' }   /*默认跳转路由*/
           ]
           
           4.实例化路由
           const router = new VueRouter({
             routes // （缩写）相当于 routes: routes
           })
           
           5.挂载路由
           new Vue({
             el: '#app',
             router,
             render: h => h(App)
           })
           
           6. <router-view></router-view> 放在 App.vue
           
           //页面用 <router-link to="/demo">首页</router-link> 读取
           //页面可以用 <router-link :to="'/demo/'+key">{{key}}--{{item}}</router-link> 跳转
           //页面在   用this.$route.query 获取数据   
           

     

3.生命周期函数

    beforeCreate(){
        console.log('实例刚刚被创建1');
    },
    created(){
        console.log('实例已经创建完成2');
    },
    beforeMount(){
        console.log('模板编译之前3');
    },
    mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
        console.log('模板编译完成4');
    },
    beforeUpdate(){
        console.log('数据更新之前');
    },
    updated(){
        console.log('数据更新完毕');
    },
    beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
        console.log('实例销毁之前');
    },
    destroyed(){
        console.log('实例销毁完成');
    }

4.打开命令提示符（win+R——cmd）

1. 切换到你想要新建项目的文件夹中下

2. 运行 npm i -g vue-cli 安装Vue-cli脚手架

3. 运行 vue init webpack demo(项目名)

4. cd demo 切换到项目目录下

5. npm install 初始化

6. npm run dev 本地运行 浏览器打开localhost:8080即可看到vue项目运行效果

7. 安装兼容包

    npm i node-sass -D
    npm i sass-loader -D
    npm i axios -D
    npm i element-ui -D
    npm i babel-polyfill -D
    npm i es6-promise -D

5.idea运行Vue配置

           配置idea
           File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language 	version为ECMAScript 6，确认
           File - Settings - Plugins：搜索vue，安装Vue.js
           Run - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选	择你工程中的package.json，Command为run，
           Scripts为dev,然后就可以直接在idea中运行了。
           继续点击加号，选择npm，Name为Build，package.json选择你工程中的	package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。
  修改项目配置
    	1. 修改/config/index.js文件，找到

           port: 8080
           修改为
           port: 8070
           productionSourceMap: true
           修改为
           productionSourceMap: false

           2. 修改/build/webpack.base.conf.js文件，找到

           module.exports = {
             entry: {
               app: './src/main.js'
             },
           修改为
           module.exports = {
             entry: {
               app: ['babel-polyfill', './src/main.js']
             },
           3. 在src目录下新建两个文件夹api和utils，在分别在这两个文件夹里创建index.js文件，最后在src/main.js中加入

           import 'es6-promise/auto'
           import promise from 'es6-promise'
           import Api from './api/index.js'
           import Utils from './utils/index.js'
           import ElementUI from 'element-ui'
           import 'element-ui/lib/theme-chalk/index.css'
            
           Vue.prototype.$utils = Utils;
           Vue.prototype.$api = Api;
           Vue.use(ElementUI);