根据官网一步步学习

1.项目构建

• 引入vue库，初学时直接通过CDN

  ---

2.声明式渲染

• 留坑

  在html中创建区域（元素标签）

        
           {
       { message }} 
          
        

• 实例化

  在

  script标签中实例Vue,渲染数据

  var app = new Vue({  el: '#app',//element,找到所渲染的坑位（div）  data: {    //数据    message: 'Hello Vue!'  }})

• 接下来官网介绍了指令v-bind

  从后面我了解了下

  v-bind的语法知识:

  vue单向数据流绑定 ： v-bind: (属性) 简写 :(属性)

  例子：<input v-bind:value="name" v-bind:class="name">

  • 也可以绑定其他的属性，不仅仅是value
  • 单向数据绑定 内存改变影响页面改变
  • v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

  官网的例子简化

        
      
               鼠标悬停几秒钟查看此处动态绑定的提示信息！      
        

  var app2 = new Vue({  el: '#app-2',  data: {    message: '我就是title的内容，哈哈哈'  }})

  以上的 v-bind:title="message" 可以简化为 :title="message".以后再细学。

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

3.条件与循环

• 这块官网讲了两个指令v-if 和 v-for

  • v-if

    根据表达式的值的真假条件，

    销毁(remove)或

    重建(append)元素

            
      
             
    现在你看到我了
            

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

    将true改为 false，p标签将消失！！！

  • v-for

    循环数组、对象

            
      
             
        
              
          {
           { todo.text }}    
      
             
            

    var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})

    ---

4.处理用户输入

• 这块是v-on事件绑定

  事件绑定

  v-on:事件名="表达式||函数名" 简写

  @事件名="表达式||函数名"

  官网的例子：添加一个可以逆转一句话的事件

        
    
         
  {
       { message }}
    
         逆转消息
        

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

• 这块是v-model 双向绑定

        
    
         
  {
       { message }}
    
         
        

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

  ---

5.组建化应用构建

这块准备后面再学