vue学习笔记

vue是一套用于构建用户界面的渐进式框架，相较于以前的jQuery异步调用逻辑层代码与显示层代码区分开。
引入JS文件

//①
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
//②
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',//由Vue接管id为app的区域。
  data: {
    message: 'Hello Vue!'//注意此处不应该加分号（；）多个变量可用逗号分隔。
  }
})

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

v-bind：如 <span v-bind:title=“message”>
                  鼠标悬停几秒钟查看此处动态绑定的提示信息！
                 </span>
v-if：如  <p v-if=“seen”>现在你看到我了</p>
v-for：如  <ol>
                    <li v-for=“todo in todos”>
                         {{ todo.text }}
                    </li>
                </ol>
v-on：如

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

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})