初识vue——语法初解

这次我们按照官网上的教程对vue的语法进行一个初步的了解；

一、声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染仅DOM的系统：

1、我们在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>

2、接下来我们还可以绑定元素属性：

<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>

二、条件与循环

1、条件：

<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>

2、循环

<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>

 

三、处理用户输入

1、逆转消息

<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> 

2、表单输入和应用状态的双向绑定

<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>