Vue初学与几个问题解决

一，安装，搭建与创建项目
    1，安装node.js
    2，cmd安装vue的脚手架工具(搭建开发环境)
       安装命令: npm install --global vue-cli
                 或cnpm install --global vue-cli
    3，创建cd到对应的一个项目里面

              比如这里我要在D盘下的VueWork的文件夹中生成一个项目
              -D:
              -cd VueWork:
              -vue init webpack 文件名字
        如果创建成功:
            1，创建的文件中有package.json文件
            2，package.json中有vue与vue-router的版本号
                 "dependencies": {
                    "vue": "^2.5.2",
                    "vue-router": "^3.0.1"
                  },
        如果创建失败或cmd卡顿，需要自己cd到项目名文件夹中输入npm install/cnpm install命令创建
        生成了node_modules文件之后
        
        才能执行npm run dev运行项目
        

    4，创建成功后，cd到对应的项目名文件夹中输入npm run dev获取窗口
    
        关于cnpm:
            <包管理工具>淘宝镜像
            http://npm.taobao.org/
            需要在下载了之后才可以使用cnpm来替代npm
            作用:让cmd模式下的下载更快

      个人建议:还是下载一个cnpm吧，npm下载速度真的实在太慢了。
二，Vue的目录结构
        node_modules:项目运行所需要的各种依赖
        src:开发所用的资源
            .vue文件:显示文件 (html+css+js组成)
            main.js：实例化vue
            
        index.html:html的入口文件
        package.json：项目的配置文件(版本号，名称....)
        webpack.config.js:webpack的配置文件(把.vue的文件打包成浏览器可以解析的文件)
        
三，Vue几个简单的操作
    1，循环 v-for
        遍历数组 list:["111","222","3333"],
            <li v-for="item in list">
                {{item}}
            </li>
            
    2，绑定script中的数据到html的属性上
           通过v-bind进行绑定:
               将title的值绑定到id上
                    <div v-bind:id="title"></div>
                    title:'我是一个title',
               
           通过v-text绑定文本:
                将msg的值绑定到div里
                    msg: 'Welcome to Your Vue.js App',
                    <div v-text="msg"></div>
                    
           通过v-html解析双引号中的标签:
                将引号中的标签中的文本效果解析出来
                    h:'<h2>我是一个h2标签</h2>',
                    <div v-html="h"></div>    
                    
    3，style操作的多样化:
        a, 通过:class('css的名':true/false)进行判定附属性
            .red{
              color:red;
            }
            .blue{
              color:blue;
            }
            <div v-html="h" :class="{'blue':!flag}"></div>
        
        b,动态设置style:
            先通过css直接调控div框颜色
                <div class="box">这是一个box</div>
                .box{
                    width:700px;
                    height:200px;
                    background-color:red;
                }
            动态设置width
                boxwidth:200,
                <div class="box" v-bind:style="{'width':boxwidth +'px'}">这是一个box  DIV</div>

    4，关于vue中input标签设置data中的属性对应的值
        例子：
            <input type="text" v-model='msg'/>
            data () {
                return {
                      msg: '你好，我正在测试vue的双向数据绑定',
                }
            }
        
    5，关于点击事件与data以外的methods中的方法取data中的数据:
        点击事件书写:
            <button v-on:click="getMsg()">点击我试试看看看弹出的不同</button>
        this.数据名直接取得
    
    6，获取ref定义的dom节点
        this.$refs.ref值
        通过ref的获取设置style
        this.$refs.ref值.style.属性名
        
四，vue双向数据绑定的理解
        Vue是一个MVVM的框架 vue就是一个MVVM的框架
        M -->model
        V -->view
        MVVM: model 改变会影响视图view，view视图改变反过来影响model
        双向数据绑定必须在表单中运行
            实例:
                 methods:{    //放方法的地方
                      getMsg(){
                         alert(this.msg);
                      }
                      ,setDome(){
                        this.$refs.MyUserInfoRefA.style.background='red';
                        alert(this.$refs.myUserInfoRef);
                        
                      }
                 },
                
                 注意变化: {{msg}}  <br/>
                <input type="text" v-model='msg'  class="myinput" />
                <button v-on:click="getMsg()">点击我试试看看看弹出的不同</button>
        
五，定义与执行方法，执行方法获取data中的数据
        1，点击事件的两种定义方式:
             <button v-on:click="">点击事件书写一</button>
             <button @click="">点击事件书写二</button>
        2，通过点击事件双向数据绑定修改data中msg的值:
             <button @click="getNewMsg()">点击事件书写三</button>
             getNewMsg(){
                this.msg="修改了的msg";
              },
        3，点击事件执行方法传值:
             <button @click="getDataFromMethod('111')">执行方法传值</button>
             getDataFromMethod(val){
                  alert(val);
             },
        4，点击事件获取Dome节点和与自定义属性的值:
             <button data-aid="123" @click="getEvent($event)">事件对象获取Dome节点和传值</button>
              getEvent(event){
                 //获取dom节点  e.srcElement.
                 event.srcElement.style.color="red";
                 console.log(event.srcElement.dataset.aid);    /**获取自定义属性的值 */
              }
        小案例，给data中定义的空数组赋值< list:[] >
                 <button @click="setList()">点击事件给空list赋值</button>
                  <hr />
                  <ul>
                    <li v-for="(item, key) in list">
                      {{key}} -- {{item}}
                    </li>
                  </ul>
                  
                  setList(){
                    for(var i=0;i<10;i++){
                         this.list.push("这是第" + i +"条数据");
                    }
                  },
                  
六，Storage组件的使用与缓存数据
        对list中存入数据，缓存该数据保证刷新后还能存在。
        以json格式存储
            localStrorage.setItem('key',JSON.stringify(this.list));
        生命周期函数:(Vue界面刷新就会触发的方法)
            mounted(){
                var list  = JSON.parse(localStrorage.getItem('list'));
                //注意判断是否存在，不要存入空值
                if(list){
                    this.list = list;
                }
            }
        
        关于localstorage的封装:
                src目录下的model文件夹创建storage.js
                //封装的localStrorage的本地存储的使用方法
                //node.js的基础
                var storage={
                    set(key,value){
                        localStorage.setItem(key,JSON.stringify(value));
                    },
                    get(key){
                        return JSON.parse(localStorage.getItem(key));
                    },
                    remove(key){
                       localStorage.removeItem(key);
                    }
                }
                export default storage;  //将此方法暴露出去
            在App.vue中导入封装的js文件
                import storage from './model/storage.js';
            
七，Vue组件使用方法与生命周期函数:
            1,引入组件
                组件统一请存放在src下的components文件夹中
                import HelloWorld from './components/HelloWorld.vue';
            2,挂载组件
                  components:{
                    'v-home':HelloWorld,
                  }
            3,模板中使用组件
                <v-home></v-home>
            
        生命周期函数:(生命周期钩子)
            组件挂载以及组件更新组件销毁的时候出发的一系列的方法，这些方法叫做生命周期函数
                生命周期:
                    1，实例创建之前
                    2，实例创建完成
                    3，模板编译之前
                    4，模板编译完成  /*请求数据  操作dom */
                    5，数据更新之前
                    6，数据更新完成
                    7，实例销毁之前
                    8，实例销毁完成
                实例:<生命周期函数不需被调用>
                    beforeCreate(){
                        console.log('实例创建之前');
                    },
                    created(){
                        console.log('实例创建完成');
                    },
                    beforeMount(){
                        console.log('模板编译之前');
                    },
                    mounted(){
                        console.log('模板编译完成');
                    },
                    beforeUpdate() {
                        console.log('数据更新之前');
                    },
                    updated(){
                        console.log('数据跟新完毕');
                    },
                    beforeDestroy(){
                        console.log('数据销毁之前');
                    },
                    destroyed() {
                        console.log('数据销毁完毕');
                    },

八，Vue-Resource使用:
        1,安装 npm install vue-resource --save  <*一定要加--save来确保写入package.json>
        2,main.js中引入
            import VueResource from 'vue-resource'
        3,main.js中使用插件
            Vue.use(VueResource);
            
        请求数据操作:
            this.$http.get(地址).then(function(response){
                    ....
                    例:存放到list中
                    this.list = response.body.result
            },function(err){
                    ....//报错提示
            })
            
九，axios请求数据:
        1,安装 npm install axios --save
        2,引入 直接在vue文件中引入
        import Axios from 'axios';
        
        请求数据操作:
            Axios.get(地址).then(function(){
                    ....
                    例:存放到list中
                    this.list = response.body.result
            }).catch((errr){
                    ....//报错提示
            })
            
十，父子组件传值:
        例子:
            父组件传值:<v-head :msg='msg'><v-head>
            子组件获取值:props:['msg']
        
            子组件可以通过点击事件直接调用父组件中的方法传值。
                    
        子组件接收父组件数据验证合法性:
            props:{
                "title":String,    //设置数据类型要求是String类型
                "homemsg":String,
                "run":...,
            }
            
        父组件与子组件之间的主动获取数据与方法:
            父获取子:
                1，定义一个ref
                <v-header ref="header"></v-header>
                2, 获取数据
                    this.$refs.header.属性
                    this.$refs.header.方法
            子获取父:
                this.$parent.数据
                this.$parent.方法
                
十一，非父子组件传值:(兄弟组件传值)
        在VueEvent.js中:(全球广播数据)
            1，引入一个空的Vue实例
                import Vue from 'vue';
            2，实例化这个空的实例
                var VueEvent = new Vue()
            3，将实例暴露出去
                export default VueEvent
        发送组件中引入暴露出来的实例发送数据
            import VueEvent from '../model/VueEvent.js';
            VueEvent.$emit('广播名',this.msg);
        接收组件中引入暴露出来的实例接收数据
            import VueEvent from '../model/VueEvent.js';
            VueEvent.$on('广播名字',function(data){
            ...
            });

十二，Vue路由:(保证访问不同的界面配置不同的组件)
        Vue路由配置:
            1,安装
                npm install vue-router --save
            2,main.js引入并Vue.use(VueRouter)
                import VueRouter from 'vue-router'
                Vue.use(VueRouter)
            3,配置路由
                a,创建组件，引入组件
                    实例:
                        import News from "./components/News";
                        import Home from "./components/Home";
                b,定义路由
                    const routes =[
                        {path: '/foo',component:Foo},
                        {path: '/bar',component:Bar},
                        {path: '*' ,redirect:'/foo'}  //默认跳转的组件
                    ]
                c,实例化VueRouter
                    const router = new VueRouter({
                        routes  //(缩写)相当于 routes:routes
                    })
                d,挂载
                    new Vue({
                        el:'#app',
                        router,
                        render:h =>h(App)
                    })
            4,根组件中存放路由出口
                <router-view></router-view>
                
            *: router-link的使用实现局部跳转，设置导航:
                <router-link to="/Home">首页</router-link>
                <router-link to="/News">新闻</router-link>
                
十三，动态路由Get传值与获取值:
        动态绑定数据:
             <ul>
                <li v-for="(item,key) in list">
                    <router-link :to="'/Contents?key='+ key">{{key}} -- {{item}}</router-link>>   <!--Get传值-->
                </li>
            </ul>
        Get传值获取
          mounted(){
            console.log(this.$route.query);  //Get传值获取动态路由传值
        }
        *:这里获取的值是以键值对的形式传递的
        
十四，路由编程式跳转与Hash模式(默认)
        javascript实现页面的跳转方式(2种):
            1, this.$router.push({path:'News'});
            2,先给路由设置别名
                  {path: '/News',component:News,name: 'news'},
              然后this.$router.push({name:'news'});
              
        将默认的hash模式改成history模式 -->   url去除#
            const router = new VueRouter({
              mode:'history',  /**将默认的hash模式改成history模式    url去除# */
              routes  //(缩写)相当于 routes:routes
            })
        
        *:使用之后需要进行一系列的配置防止后期前端出现的问题
            关于配置node.js中的内容...
            <Github详情查找配置>
            
十五，父子路由(路由的嵌套):
        Main.js配置实例:
              /**嵌套 */
              import UserAdd from './components/User/UserAdd';
              import UserList from './components/User/UserList';
                    
             {path: '/User',component:User,
                children:[
                  {path: '/User/UserAdd',component:UserAdd},
                  {path: '/User/UserList',component:UserList}
                ]
              },
        调用实例:
            <router-link to="/User/UserAdd">增加用户</router-link>

            
问题解决:
    ;1，关于公司内网创建不了vue项目问题解决:
        对npm设置代理,
        npm config set proxy http://server:port
        
    2，关于function中作用域指向的问题
        getDataFromAxios(){
          var apiUrl = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
          Axios.get(apiUrl).then(function(response){
            console.log(response);
            this.list = response.data.result;
          }).catch(function(err){
             console.log(err);
          })
        },
        报错:TypeError: "this is undefined"
        这里的this.list是指向的function对象里面获取的list;
        
         getDataFromAxios(){
            var apiUrl = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            var self = this
            Axios.get(apiUrl).then(function(response){
            console.log(response);
            self = response.data.result;
            }).catch(function(err){
             console.log(err);
            })
        },
        可以在方法外申明指向，调用里面的值存入。