Vue.js的使用场景

谈到 Vue.js 往往会和 Angular.js 和 React.js 来比较
我也是个门外汉，本人是一个iOS程序猿，在空余时间学了点前端的姿势😋

• Vue.js 认知

  是比其他两个晚出现一点的框架，是一个相对轻量级的框架爱，适合于中小型单页面应用程序，学习的门槛也比较低，如果学过Angular.js和React.js的应该知道Vue.js的语法和它们相差不大。也因此很多人诟病Vue是抄袭其他两者。我觉得只要能解决问题，管这些问题干嘛？况且，我还没有那个能力对开发这些框架的大牛指指点点的本钱。

Vue.js的基本使用

Vue.js的核心是使用简单的语句将数据渲染到DOM元素上面显示。

• HTML的文本插值

  直接上一个代码块🌰，就是动态的改变DOM元素的innerHTML。不知道说的对不对，打我可以评论文章但是不要打脸😂。

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

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
   }
  })
  

  图解分析

  
  

  我们可以清楚地看到里面有很多angular.js的影子比如“{{}}”这种绑定数据的格式

• 绑定元素属性

  直接上第二个🌰，就是动态的改变DOM元素属性的值

  <div id="app-2">
    <span v-bind:title="message">
      Hover your mouse over me for a few seconds
      to see my dynamically bound title!
    </span>
  </div>
  

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: 'You loaded this page on ' + new Date()
    }
  })
  

  图解分析

  
  

  从这个🌰中我们可以发现数据的绑定可以是动态的，是由函数动态生成的

• 元素的状态切换

  直接上第三个🌰，就是让一个元素显示和隐藏

  <div id="app-3">
    <p v-if="seen">Now you see me</p>
  </div>
  

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
  

  图解分析

  
  

  动态切换元素属性

• v-for循环操作

  直接上第四个🌰，根据数据的条数来创建list的条数

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

  var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
      ]
    }
  })
  

  图解分析

  
  

  v-for的使用

• v-on事件的绑定监听

  直接上第五个🌰，给DOM元素绑定点击事件。

  <div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
  

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

  图解分析

  
  

  Snip20170801_10.png

• v-model数据双向绑定

  直接上第六个🌰，给innput标签添加v-model属性。

  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
  

  var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
    }
  })
  

这个就没有什么好分析的了。好累啊😫

• 模块化开发

  直接上第七个🌰，模块化开发，代码清晰明了，封装自己的控件复用到任何地方。

  <div id="app-7">
    <ol>
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id">
      </todo-item>
    </ol>
  </div>
  

  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  
  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  })
  

  图解分析

  
  

  
  

  v-bind的补充说明，数据的绑定，官网说的是Now we can pass the todo into each repeated component using v-bind，就是说可以通过v-bind把todo传递到每一个组件中。而props:['XXXX']估计就是给组件添加像原生的属性一样例如object.todo

结语：

好啦！😀官网的文档就先写到这里，其实官网的东西很全，我的🌰s也是全抄官网的。而且有些地方我理解的可能还会有偏差，所以还是要多看原版的文档。时间刚刚好，下班啦啦啦啦啦！！！😁
最后再附一个Vue.js的官网（英文）地址