Vonic简明教程（二）组件和服务

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/ionic/css/ionic.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vonic.min.js"></script>
<von-app></von-app>

SCSS

/* Your Style */
.page-content p {
  padding: 50px 0 10px 0;
  text-align: center;
  font-size: 18px;
}

.page-content a {
  text-align: center;
  display: block;
}

Babel + JSX

const Login = {
  components: {
    'von-input': Vonic.VonInput,
    'md-button': Vonic.MdButton
  },
	
  template: `
    <div class="page has-navbar" v-nav="{title: '登录', showBackButton: false}">
      <div class="page-content">

      <von-input type="text" :value.sync="username" placeholder="用户名 admin"></von-input>
        <von-input type="password" :value.sync="password" placeholder="密码 1234"></von-input>

        <div class="padding">
          <md-button class="button button-assertive button-block btn-login"
                     @click="login(username, password)">
                     登 录
          </md-button>

          <md-button class="button button-stable button-block btn-login"
                     @click="reset()">
                     重 置
          </md-button>
        </div>
      </div>
    </div>
  `,

  data() {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login(username, password) {
      if (!username || !password) {
        $loading.toast('用户名或密码不能为空')
        return
      }

      if (username == 'admin' && password == '1234') {
        $loading.show('正在跳转..')
        setTimeout(() => {
        	$loading.hide()
          $router.forward({ path: '/home' })
        }, 2000)
      } else {
        $loading.toast('用户名或密码错误')
      }
    },

    reset() {
      this.username = ''
      this.password = ''
    }
  }
}

const Home = {
  template: `
    <div class="page has-navbar" v-nav="{title: '首页', showBackButton: false}">
      <div class="page-content">
        <p>登录成功</p>

        <div class="padding text-center">
          <button class="button button-assertive" @click="logout()">退出</button>
        </div>
      </div>
    </div>
  `,
  methods: {
    logout() {
      $confirm.show({
        title: '提示',
        content: '确定要退出吗？',
        okText: '确定',
        cancelText: '取消',
        okTheme: 'assertive'
      }).then((res) => {
        if (res) {
          $router.back({ path: '/' })
        }
      })
...