VUE 前端应用

@teabyii

杂七杂八

Vue 基础

Components

vue-router

vuex

其他

 

简介

渐进式

关注视图层

轻量级

友好的文档

优秀的社区

 

 

https://github.com/vuejs/awesome-vue

对比

React

Angular 1

Angular 2

 

 

https://cn.vuejs.org/v2/guide/comparison.html

Vue 基础

vue 实例

模板

事件

v-model

const vm = new Vue({
    el: ...,
    template: ...,
    data: ...,
    methods: ...,
    
    created: ..., // 生命周期方法
    ...
});

模板

 

 

 

 

 

 

https://cn.vuejs.org/v2/guide/syntax.html

 

<span>Message: {{ msg }}</span>

<p v-if="seen">Now you see me</p>

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<div v-bind:class="{ active: isActive }"></div>

事件

 

 

 

 

 

 

 

https://cn.vuejs.org/v2/guide/events.html

 

<template>
    <div id="example-1">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
</template>

<script>
const example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>

v-model

 

 

 

 

 

https://cn.vuejs.org/v2/guide/forms.html

 

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
const component = {
    template: '<div>A custom component!</div>',
    data() {
        return { ... }
    },
    methods: {
        ...
    }
};

Vue.component('my-component', component);
<template>
    <div>A custom component!</div>
</template>

<script>
    export default {
        data() {
            return { ... }
        },
        methods: {
            ...
        }
    }
</script>

<style scoped>
    div { margin-top: 20px; }
</style>

vue-router

复杂 web 应用的基础

url 映射到 component

参数传递

 

 

https://router.vuejs.org/zh-cn/

http://jsfiddle.net/yyx990803/xgrjzsup/

 

路由基础

 

 

 

 

 

 

不同 url 渲染不同 component

提供 router-link

 

 

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

传递参数

 

 

 

 

 

 

通过注入的 $route.params 来获取

 

 

const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

const app = new Vue({ router }).$mount('#app')

传递参数

 

 

 

 

 

 

通过注入的 $route.params 来获取

 

 

const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

const app = new Vue({ router }).$mount('#app')

使用 vuex

数据流
State
Getters
Mutations
Actions
Modules

 

http://vuex.vuejs.org/zh-cn/intro.html

 

Thank you

deck

By Boom Lee

deck

  • 1,704
Loading comments...

More from Boom Lee