Vue声明式渲染、条件与循环、事件绑定、双向绑定及生命周期钩子函数

VUE基础介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

-声明式渲染

<div>
  {{ message }}
</div>

 data(){
    return{
      message:'Hellow Vue',
    }
  },

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

-条件与循环

• 控制切换一个元素是否显示

<div>
  <p v-if="seen">现在你看到我了</p>
</div>

  data(){
    return{
      seen:true,
    }
  },

如果seen：false数据就会消失

• 绑定数组的数据来渲染一个项目列表

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

  data(){
    return{
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
    }
  }

-事件绑定

<div>
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

  data(){
    return{
    message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }

-双向绑定

<div>
  <p>{{ base}}</p>
  <input v-model="base">
</div>

  data(){
    return{
    base:'woaixuexi'
    }
  },

-Vue生命周期钩子

一共8个阶段

1. befoCreate(创建前)
2. created(创建后)
3. beforeMount(载入前)
4. mounted(载入后)
5. beforeUpdate(更新前）
6. updated(更新后）
7. beforeDestroy(销毁前)
8. destroyed(销毁后)

生命周期图示