一、写在前面

　　隔了这么久才来出Vue的第二篇文章，真是堕落了，自己先惩罚下/(ㄒoㄒ)/~~

　　回过头看自己第一篇相关文章《初试 Vue.js》（http://www.cnblogs.com/anniey/p/6307138.html），简直惨不忍睹、不忍直视、辣眼睛，怎么可以这么啰嗦，废话好多哦，没脸看下去了~(o´・ェ・｀o)

　　都说入一门语言写好hello wrold开始，我上篇文章就已经打好这个头啦，不管是Vue1，还是2，现在咱们继续╰(*°▽°*)╯

二、起步

　　1.简单的方式

　　　　创建好一个html文件，通过script的方式引入，如下：

　　　　<script src="https://unpkg.com/vue"></script>

　　2.其他的方式

　　　　参考官网给出的选项：

　　　　https://cn.vuejs.org/guide/installation.html

三、数据的渲染

　　Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM！

　　例1：

     
      {
   { message }}
     

1 　　

　　这已经生成了一个vue应用，现在数据和DOM已经绑定在一起，只要修改app.message，相应的也会更新DOM！

　　例2：

     
        
                  Hover your mouse over me for a few seconds to see my dynamically bound title!            
     

1     

　　例子2涉及到了Vue的特殊属性 v-bind 指令，也会在相应的DOM元素上渲染！

四、条件与循环

　　Vue不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据！

　　1.条件

　　　　我们可以使用其中的 v-if 指令达到条件设置，而在实际应用中控制切换一个元素的显示也很简单。

　　　　例3：

1     
     
      2         
      
Now you see me
3     
     

1     

　　　　同样的可以修改data属性来达到响应。

　　2.循环

　　　　每个指令都有特殊的功能，v-for 指令可以绑定数组的数据来渲染一个列表!

　　　　例4：

1     
     
      2         
      
       3             
       
4                 {
    {todo.text}}5             
6         
      
7     
     

1     var app_3_2=new Vue({ 2             el:'#app_3_2', 3             data:{ 4                 todos:[ 5                     { text:'Learn JavaScript' }, 6                     { text:'Learn Vue' }, 7                     { text:'Learn Other ' } 8                 ] 9             }10         })

　　打开控制台，输入 app_3_2.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

五、双向绑定

　　Vue 提供了一个  v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

　　例5：

1     
     
      2         
      3         
      
{
   {msg2}}
4     
     

1     var app5 = new Vue({2         el: '#app5',3         data: {4         　　msg2: '# hello '5      　　}6     })

六、界面交互

　　为了让用户和你的应用进行互动，我们可以用  v-on  指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法!

　　例6：

1     
     
      2         
      
{
   {message}}
3         
      Reverse Message4     
     

1     var app6=new Vue({ 2             el:'#app6', 3             data:{ 4                 message:'Hello Vue.js!' 5             }, 6             methods:{ 7                 reverseMessage:function(e){ 8                     this.message=this.message.split('').reverse().join(''); 9                 }10             }11         })

　　注意：在methods方法中，只更新了状态，没有触动到DOM!

七、组件构建（简单版）

　　一定要先注册完组件，再来实例化！

　　一定要确保在初始化根实例之前注册了组件！

　　否则未注册就使用会报错的！　　

　　组件比较强大，可以扩展，封装可重用代码，就是比较腻害(*@ο@*) 哇～一定要好好的熟悉熟悉它！

　例7：

1     
     
      2         
      
       3             
       4         
      
5     
     

1     Vue.component('todo-item',{ 2             props:['todo'], 3             template:'
{
   {todo.text}}
' 4         }); 5         var app_7=new Vue({ 6             el:'#app_7', 7             data:{ 8                 itemsList:[ 9                     {text:'Vegetables'},10                     {text:'Cheese'},11                     {text:'Whatever else humans are supposed to eat'}12                 ]13             }14         })

　　组件是很重要的一部分，当你熟悉完以上的内容后要好好研究组件系统，其中涉及到许多内容需要更详细的掌握。

　　在实际项目中使用时，多个页面有相同的part，组件复用简直厉害的不要不要~O(∩_∩)O~~

 ---------------------------------------------------------------

vue的基本功能介绍就到这里了，谢谢思密达O(∩_∩)O~~

多多指教n(*≧▽≦*)n