初識vue——語法初解

此次咱們按照官網上的教程對vue的語法進行一個初步的瞭解；

1、聲明式渲染

Vue.js的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染僅DOM的系統：

一、咱們在HelloWorld裏面輸入下面代碼：

<template>
  <div class="hello">
    <div class="title">
        {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'This is a title'
    }
  }
}
</script>

二、接下來咱們還能夠綁定元素屬性：

<template>
  <div class="hello" @click="one()">
    <div class="title">
        {{ msg }}
        <span v-bind:title="message">懸浮</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'This is a title',
      message:    '頁面加載於' + new Date().toLocaleString(),
    }
  }
}
</script>

2、條件與循環

一、條件：

<template>
  <div class="hello" @click="one()">
    <div id="if">
          <p v-if="seen">如今你看到我了~</p>
      </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      seen:    true
    }
  }
}
</script>

二、循環

<template>
  <div class="hello" >
    <div id="for">
          <ol>
              <li v-for="todo in todos">
                  {{ todo.text }}
              </li>
          </ol>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      todos:[
          {text:    '玫瑰'},
          {text:    '紅棗'},
          {text:    '枸杞'}
      ]
    }
}}

</script>

<style scoped>
#for{
    width: 100px;
    margin: 0 auto;
    color: lightsalmon;
}
</style>

 

3、處理用戶輸入

一、逆轉消息

<template>
  <div class="hello" >
      <div id="reverse">
          <p>{{ message_re }}</p>
          <button v-on:click="reverseMessage">逆轉消息</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message_re:    '玫瑰五寶茶'
    }
  },
  methods:{
      reverseMessage:function(){
          this.message_re =this.message_re.split('').reverse().join('')
      }
  }}
</script>

<style scoped>
#reverse button{
    width: 100px;color: #ffffff;border: none;background: coral;height: 30px;border-radius: 10px;letter-spacing: 1px;
}
</style> 

二、表單輸入和應用狀態的雙向綁定

<template>
  <div class="hello" >
      <div id="show_input">
          <p>{{ message_in }}</p>
          <input v-model="message_in" />
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message_in:    '桂圓'
    }
}}
</script>

　

 四、組件化應用構建

組件系統是Vue裏面另外一個重要的概念，容許咱們使用小型，獨立的，複用率高的組件構建大型應用；

#main.js
Vue.component('doit-item', {
  props: ['doit'],
  template: '<li>{{ doit.text }}</li>'
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<template>
  <div class="hello" >
      <div id="doit">
          <ol>
              <doit-item v-for="item in groceryList" v-bind:doit='item' v-bind:key="item.id"></doit-item>
          </ol>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      groceryList: [
          { id: 0, text: '金桔' },
          { id: 1, text: '檸檬' },
          { id: 2, text: '半檸半橘' }
      ]
    }
}}
</script>
<style scoped>
#for,#doit{
    width: 150px;margin: 0 auto;color: lightsalmon;
}
</style>