标签存档: vue

vue-study11-移动端mintui库的安装和使用

作者: 日期: 2018年8月21日 没有评论

1 安装mintUI

cnpm install mint-ui -S //–save

2 main.js里面引入mint ui的css和插件

import Mint from ‘mint-ui’;
Vue.use(Mint);
import ‘mint-ui/lib/style.css’

3 参考mintui的说明文档使用

mintui中文文档
如果说明文档上的代码不能直接用，那么就拿github上example/pages里的组件引入使用
github-mintui

注意 创建项目的时候引入scss

vue-study10-嵌套路由

作者: 日期: 2018年8月20日 没有评论

1 路由配置main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Page1 from "./components/new/page1.vue";
import Page2 from "./components/new/page2.vue";
import News from "./components/news.vue";

const routes = [
  {path:'/news',component:News,
  children:[
    {path:'p1',component:Page1},
    {path:'p2',component:Page2}
  ]
},
  {path:'*',redirect:'/news'}
]

const router = new VueRouter({
  mode:'history',
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2 App.vue

<template>
  <div id="app">
    <router-link to="/news" >news</router-link>
    <br><hr>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },methods:{
  }
}
</script>

3 news.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
        <br><hr>
        <router-link to="/news/p1">page1</router-link>
        <router-link to="/news/p2">page2</router-link>
        <br><hr>
        <router-view></router-view>

    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'this is content in  news component',
        }
    }
}
</script>

4 page1.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am msg from page1 component'
        }
    }
}
</script>

vue-study9-路由

作者: 日期: 2018年8月20日 没有评论

1 安装插件cnpm install vue-router

2 配置main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Page1 from "./components/page1.vue";
import Page2 from "./components/page2.vue";
import News from "./components/news.vue";

const routes = [
  {path:'/page1',component:Page1},
  {path:'/page2',component:Page2},
  {path:'/news/:aid',component:News},
  {path:'*',redirect:'/page1'}
]

const router = new VueRouter({
mode:'history',//路由美化
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3 App.vue

<template>
  <div id="app">

    <br><hr>
    <router-link to="/page1" >page1</router-link>
    <router-link to="/page2" >page2</router-link>
    <br><hr>
    <router-view></router-view>

    <br><hr>
    <button @click="jstest()">js跳转</button>


  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },methods:{
    jstest(){
      this.$router.push({path:'news/1'});
    }
  }
}
</script>

4 page2.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
        <br><hr>
        <ul>
            <li v-for="(item,key) in list">
                    <router-link :to="'/news/'+key">{{item}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am msg from page2 component',
            'list':['new1','new2','new3']
        }
    }
}
</script>

5 news.vue

<template>
    <div>
        <h2>
            {{msg}}
        </h2>
        <br><hr>

    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'this is content in  news component',
        }
    },mounted(){
        alert(this.$route.params['aid']);
    }
}
</script>

vue-study8-非父子组件传值

作者: 日期: 2018年8月19日 没有评论

vue-study7-父子组件传值

作者: 日期: 2018年8月19日 没有评论

1 App.vue – 父组件

<template>
  <div id="app">
    <v-lead :hmsg='msg' :hrun='run' :father='this' ref='leader'></v-lead>
    <br><hr>
    <button @click="testson">testson</button>
  </div>
</template>

<script>
import Lead from './components/Lead.vue';
export default {
  name: "app",
  data() {
    return {
      msg:'father'
    }
  },
  components:{
    'v-lead':Lead
  },
  methods:{
    run(data){
      alert(data);
    },
    testson(){
      alert(this.$refs.leader.msg);

    }
  }
};
</script>

2 Lead.vue – 子组件

<template>
    <div id='test'>
        <h2 class='tt'>
            {{msg}}--<br>--{{hmsg}}
        </h2>
        <br><hr>
        <button @click='hrun("haha")'>hruntest</button>
        <br><hr>
        <button @click='testfather()'>testfather</button>
        <br><hr>
        <button @click='getfatherdata()'>getfatherdata</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am a msg from Lead component'
        }
    },
    methods:{
        testfather(){
            this.father.run("test");
        },
        getfatherdata(){
            alert(this.$parent.msg);
            this.$parent.run('son');
        }
    },
    props:['hmsg','hrun','father']
    //props:{'hmsg':String} 验证数据类型

}
</script>

<style scoped>
.tt{
    font-size: 50px;
    color: red;
    background-color:blue;
}
</style>

vue-study6-请求数据(第三方插件)

作者: 日期: 2018年8月19日 没有评论

1 安装axios

cnpm install axios –save //保存到配置
这个和vue-resource不同的是，这个只在需要请求数据的地方引用，而vue-resource是全局的

2 App.vue中引用axios

<template>
  <div id="app">
    <ul>
      <li v-for="item in list">
          {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
  name: "app",
  data() {
    return {
      list:[],
    }
  },
  mounted(){
    var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    Axios.get(api).then((res)=>{
      console.log(res);
      this.list = res.data.result; //vue-resource 里是res.body.result
    },function(err){
      console.log(err);
    })
  }
};
</script>

vue-study5-请求数据(官方插件)

作者: 日期: 2018年8月19日 没有评论

1 安装官方推荐的插件vue-resource

cnpm install vue-resource

2 main.js里面引用插件vue-resource

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
new Vue({
  el: '#app',
  render: h => h(App)
})

3 App.vue里面使用插件vue-resource

<template>
  <div id="app">
    <ul>
      <li v-for="item in list">
          {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "app",
  data() {
    return {
      list:[],
    }
  },
  mounted(){
    var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.$http.get(api).then((res)=>{
      console.log(res);
      this.list = res.body.result;
    },function(err){
      console.log(err);
    })
  }
};
</script>

vue-study4-组件的封装和使用

作者: 日期: 2018年8月19日 没有评论

1 定义组件

在src下新建components目录，里面新建文件Lead.vue

<template>
    <div>
        <h2 class='tt'>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am msg from Lead component'
        }
    }
}
</script>
<style scoped>
.tt{
    font-size: 10px;
    color: red;
    background-color:blue;
}
</style>

2 在App.vue中引用组件lead

<template>
  <div id="app">
     <v-lead></v-lead>
  </div>
</template>

<script>
import Lead from "./components/Lead.vue";

export default {
  name: "app",
  data() {
    return {
      thing: "thing1",
      list:[]
    }
  },
  methods:{

  },
  mounted(){

  },
  components:{
    'v-lead':Lead
  }

};
</script>

<style>

</style>

3 组件里属性的生命周期

比如css-style里面用scoped标签表示这个属性只在这个组件里面有效而不影响全局

4 组件的生命周期函数 (Lead.vue组件里定义，创建前后，挂载前后，更新前后，销毁前后，一共8个函数，其中mounted和beforeDestory比较常用）

<template>
    <div id='test'>
        <h2 class='tt'>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am a msg from Lead component'
        }
    },
    methods:{},
    beforeCreate() {
                console.log('beforeCreate 创建前状态===============》');

        },
    created() {
            console.log('created 创建完毕状态===============》');

        },
    beforeMount() {
            console.log('beforeMount 挂载前状态===============》');

        },
    mounted() {
            console.log('mounted 挂载结束状态===============》');
        },
    beforeUpdate() {
            console.log('beforeUpdate 更新前状态===============》');
        },
    updated() {
            console.log('updated 更新完成状态===============》');
        },
    beforeDestroy() {
            console.log('beforeDestroy 销毁前状态===============》');
        },
    destroyed() {
            console.log('destroyed 销毁完成状态===============》');
        }    

}
</script>

<style scoped>
.tt{
    font-size: 10px;
    color: red;
    background-color:blue;
}
</style>

App.vue

<template>
  <div id="app">
     <v-lead v-if='flag'></v-lead><hr><br>
     <button @click="flag=!flag">testbutton</button>
  </div>
</template>

<script>
import Lead from "./components/Lead.vue";
export default {
  name: "app",
  data() {
    return {
      flag:true,
    }
  },
  components:{
    'v-lead':Lead
  }

};
</script>

vue-study3-todolist&封装js函数

作者: 日期: 2018年8月18日 没有评论

1 App.vue

<template>
  <div id="app">
    <input type="text" v-model="thing" @keydown="keyhandle($event)"/><button @click="add()">新增</button>

<h2>待办列表</h2>
<ul>
  <li v-for="(item,key) in list" v-if="!item.status">
    <input type="checkbox" v-model="item.status" @change="save()"/>{{item.name}}
    <button @click="del(key)">删除</button>
  </li>
</ul>
<br>
<hr>
<br>
<h2>已完成列表</h2>
<ul>
  <li v-for="(item,key) in list" v-if="item.status">
    <input type="checkbox" v-model="item.status" @change="save()"/>{{item.name}}
    <button @click="del(key)">删除</button>
  </li>
</ul>
  </div>
</template>

<script>
import store from "./store.js";
export default {
  name: "app",
  data() {
    return {
      thing: "thing1",
      list:[]
    }
  },
  methods:{
    add(){
      var a = {"name":this.thing,"status":false}
      this.list.push(a);
      store.set("list",this.list);
      this.thing="";
    },

    del(k){
      this.list.splice(k,1);
      store.set("list",this.list);
    },
    keyhandle(e){
      //console.log(e.keyCode);
      if(e.keyCode==13){
        this.add();
      }
    },
    save(){
      store.set("list",this.list);
    }
  },
  mounted(){

    if(store.get("list")){
      this.list = store.get("list");
      console.log(this.list);
    }
  },
};
</script>

<style>

</style>

2 store.js

var store={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
}

export default store;

vue-study2-双向绑定及获取dom

作者: 日期: 2018年8月18日 没有评论 
<template>
  <div id="app">
    {{msg}}
    <input type="text" v-model='msg' ref="userinfo"/><br>
    <button v-on:click="changeview()">changeview</button><br>
    <br><hr>
    <button @click="getdom()">getdom</button>
    <br><hr>

    <button @click="requestData()">requestData</button>
    <button data-testid='haha' @click="eventhandle($event)">eventhandle</button>
    <ul>
      <li v-for="(item,key) in list">

        {{item}}------{{key}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App567",
      list:[]
    }
  },
  methods:{
    changeview(){
      this.msg="this view has been changed";
    },
    getdom(){
      this.$refs.userinfo.style.background = 'red';
    },
    requestData(){
      for(var i=0;i<10;i++){
        this.list.push(i);
      }
    },
    eventhandle(a){
      a.srcElement.style.background='red';
       alert(a.srcElement.dataset.testid);
    }
  }
};
</script>

<style>

</style>