vue

vue的关键描述

是一套构建用户界面的渐进式框架，自底向上增量开发的设计，vue 的核心库只关注视图层
vue只是前端的一个工具，想用就用，不想用就可以不用，没有必须的说法
不过建议你有一定的前段基础再来学习vue的使用
vue是封装的js，写在js里面

声明式渲染

<div id="app">
  {{ message }}
</div>
------html、vue分割线---------
var app = new Vue({
  el: '#app',
  data: {
	 message: 'Hello Vue!'
  }
})
-------------
结果：
Hello Vue!
//东西都是响应式的，灵活

绑定元素

<div id="app-2">
<span v-bind:title="message">     //特别的v-bind:动态绑定元素，可以只写冒号
   鼠标悬停几秒钟查看此处动态绑定的提示信息！
 </span>
</div>
------html、vue分割线---------
var app2 = new Vue({
  el: '#app-2',
  data: {
	 message: '页面加载于 ' + new Date().toLocaleString()
  }
})

条件（根据条件处理显示）

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
------html、vue分割线---------
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

循环遍历

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
------html、vue分割线---------
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

事件

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>   //v-on:可以直接写成@
</div>
------html、vue分割线---------
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

双向绑定

这里的双向是实质指v-model所指的元素和data里面相同的元素两者绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
------html、vue分割线---------
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

vue的灵活

<div id="app">
	{{ message.split('').reverse().join('') }}
</div>
这就很神奇了，即使你只挂载了message的信息，在文本中也可以用其他js语法做一些改变
即{{}}的里面是可以灵活写入了，例如计算都可以办到

未完待续。。。