vue基础要点

[RainZhai]

版本2.0，参考：http://www.jianshu.com/p/5ba253651c3b VueRouter 路由功能 app.vue

<template>
  <div id="app">
    <router-link to="/first">Go to Foo</router-link>
    <router-link to="/second">Go to Bar</router-link> 
    <router-view></router-view>
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.config.debug = true

Vue.use(VueRouter)
Vue.use(VueResource)
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './components/Secondcomponent.vue'

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: First
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

[RainZhai]

VueRouter 嵌套路由功能 main.js

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: firstcomponent,
      children: [{ 
        path:'/first/firstsub',
        component: firstsub
      }]
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

Firstcomponent.vue

    <router-link to="/first/firstsub">Go to Sub</router-link>
    <router-view></router-view>

[RainZhai]

数据的动态加载 Secondcomponent.vue

<template>
  <div id="secondcomponent">
    <h1>I am another page</h1>
    <a> written by {{ author }} </a>
    <ul>
        <li v-for="article in articles">
          {{article.title}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data (){
        return {
        author: '微信公众号 jinkey-love',
        articles: [{"title":"this is the 1"},
        {"title":"this is the 2"}]
        }
    },
//设置数据加载
  mounted: function() {
    this.$http.jsonp('http://localhost:8080/data.json', {}, {
        headers: {

        },
        emulateJSON: true
    }).then(function(response) {
      // 这里是处理正确的回调

        this.articles = response.data.articles
        // this.articles = response.data["articles"] 也可以

    }, function(response) {
        this.articles = [
          {"title":"this is the aaaaa"},
          {"title":"this is the bbbbb"},
          {"title":"this is the 77777"}
        ]
        // 这里是处理错误的回调
        console.log(response)
    });
  }
}
</script>

[RainZhai]

todolist示例 app.vue

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <div>
      <input v-model="newItem" v-on:keyup.enter="addNew" />
      <ul>
        <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
          {{item.label}} <span v-on:click="deleteItem(item)">删除</span>
        </li>
      </ul>
    </div>
    <router-link to="/first">Go to Foo</router-link>
    <router-link to="/second">Go to Bar</router-link> 
    <router-view></router-view>
  </div>
</template>

<script>
import Hello from './components/Hello'
//引入store.js 处理localStorage
import Store from './store' 
export default {
  name: 'app',
  components: {
    Hello
  },
  data(){
    return {
      title: "this is a title",
      items:Store.fetch(),
      newItem: ''
    }
  },
  methods: {
    toggleFinish: function(item){
      item.isFinished = !item.isFinished;
    },
    addNew: function(){
      console.log(this.newItem);
      this.items.push({
        label:this.newItem,
        isFinished:false
      });
      this.newItem = '';
    },
    deleteItem: function(item){
      this.items.splice(this.items.indexOf(item), 1);
      return false;
    }
  },
//观察items变化
  watch: {
    items: {
      handler : function(items){ 
        Store.save(items);
      },
      deep: true
    }
  }
}
</script>

<style>
#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;
}
.finished{ text-decoration: line-through; }
</style>

store.js

const STORAGE_KEY ='todos-vuejs';
export default {
  fetch() {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || []
  },
  save(items){
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
  }
}

[RainZhai]

父向子组件传递消息 父组件 app.vue

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <div class="box1">
      <input v-model="newItem" v-on:keyup.enter="addNew" />
      <ul>
        <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
          {{item.label}} <span v-on:click="deleteItem(item)">删除</span>
        </li>
      </ul>
    </div>
    <div class="box1">
      <h2>父向子组件传参</h2>
      <Mybtn msg="我是一个父消息"></Mybtn>
    </div>
    <div class="box1">
      <h2>路由功能</h2>
      <router-link to="/first">Go to Foo</router-link>
      <router-link to="/second">Go to Bar</router-link> 
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
    import Mybtn from './components/Mybtn'
    import Store from './store'
    export default {
        name: 'app',
        components: {
            Mybtn
        },
        data() {
            return {
                title: "this is a title",
                items: Store.fetch(),
                newItem: ''
            }
        },
        methods: {
            toggleFinish: function(item) {
                item.isFinished = !item.isFinished;
            },
            addNew: function() {
                console.log(this.newItem);
                this.items.push({
                    label: this.newItem,
                    isFinished: false
                });
                this.newItem = '';
            },
            deleteItem: function(item) {
                this.items.splice(this.items.indexOf(item), 1);
                return false;
            }
        },
        watch: {
            items: {
                handler: function(items) {
                    Store.save(items);
                },
                deep: true
            }
        }
    }
</script>

<style>
    #app {
        width: 800px;
        margin: 0 auto;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .finished {
        text-decoration: line-through;
    }

    .box1 {
        border: 1px solid #666;
        padding: 10px;
        margin-bottom: 10px;
    }
</style>

子组件 Mybtn.vue

<template>
  <div id="mybtn"> 
    <button v-on:click="onClickMe"> Clickme</button>
    <p>{{msg}}</p>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      author: 'sdfdsf jinkey-love'
    }
  },
  props:["msg"],
  methods:{
    onClickMe: function(){
      console.log(this.msg);
    }
  }
}
</script>
<style>
</style>

[RainZhai]

子向父组件传递消息 父组件 app.vue

<template>
  <div id="app">
    <div class="box1">
      <h2>子向父组件传递消息</h2>
      <Mybtn msg="我是一个父消息" v-on:mybtnsay="listenMybtn"></Mybtn>
      <p>子组件说:{{childsays}}</p>
    </div>
  </div>
</template>

<script>
    import Mybtn from './components/Mybtn'
    import Store from './store'
    export default {
        name: 'app',
        components: {
            Mybtn
        },
        data() {
            return {
                childsays: ''
            }
        },
        methods: {
            listenMybtn: function(msg) {
                this.childsays = msg;
            }
        }
    }
</script>

<style>
</style>

子组件 Mybtn.vue

<template>
  <div id="mybtn"> 
    <button v-on:click="onClickMe"> Clickme</button>
    <button v-on:click="onClickTellFather"> tell my father</button>
    <p>{{msg}}</p> 
  </div>
</template>

<script type="text/javascript">
    export default {
        data() {
            return {
                btnmsg: 'My btn say hello'
            }
        },
        props: ["msg"],
        methods: {
            onClickMe: function() {
                console.log(this.msg);
            },
            onClickTellFather: function() {
                console.log(this.btnmsg);
                this.$emit("mybtnsay", this.btnmsg);//emit可以调用自定义方法
                //$dispatch 与 $broadcast 2.0中取消，在vuex中可以实现该功能
            }
        }
    }
</script>
<style>
</style>