2018-07-27(vue)

Vue

   采用简洁的模板语法来,声明式地将数据渲染进去DOM系统:
      < div id = "app">

       { {message} }     
 
      </div>
     
    let app = new Vue ({
      
     el : '#app',
     data:{
       
    message:' Hello Vue! '
 
}
 

})


这就创建了一个 VUE 应用! 看起来这跟 渲染一个 字符串模板 非常类似,但是 Vue 做了大量的工作,现在数据和DOM 已经被建立了关联,所有东西都是响应式的。

在 javaScript 控制台,并修改 app.message 的值,上面例子的 值 也会发生改变。

绑定元素的 特性

v - bind

      <div id = ' app - 2 '>
      <span v - bind:title = ' message '>
             //鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
      </div>

    var app2 = new Vue({

        el : '#app2',

        data : {
  
         message : ' 页面加载与 '    +  new Date() . toLocaleString()

//  现在的时间    转换了  时间格式。   
   
    }


  })

条件 与 循环

控制切换一个元素是否显示。

v - if

      <div id = "app-3">
      <p v - if = "seen"> 现在你看到我了 </p>
      </div>

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

})
    
      //  在 控制台 输入  app3.seen = false.
          显示的信息消失、

vue 不仅可以 把 数据 绑定到 DOM 文本或特性, 还可以 绑定到 DOM 结构,此外,Vue 也提供,一个强大的 过渡效果系统,可以在 Vue 插入 更新 移除 元素 时 自动应用,过渡效果。

指令 :

 v - for   可以绑定  数组的 数据 来  渲染 一个 项目列表:

     <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 : ' 学习 JavaScript ' },
                  { text : ' 学习 Vue ' },
                  { text: '整个牛项目 ' }


}



}

})
      

在控制台 ,输入 app4.todos.push( text: ' 新项目 ' ) , 添加了新项目。

处理用户输入

v-on 添加一个事件监听器, 调用 它在 Vue 中 定义的方法:

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

      let app5 = new Vue({

           el : '#app-5',
           data:  {

                 message: ' Hello Vue.js! '

},

      methods: {

            reverseMessage: function(){

                  this.message = this.message.split('').reverse().join('')

}


}

})

v - model 指令 , 它能轻松实现 表单输入 和 应用状态之间的 双向绑定。


     <div id = "app-6">
             <p> {{message}}</p>
             <input v-model =" message ">
     </div>
     
     let app6  = new Vue({

        el : ' #app-6 ',
        data : {
 
             message : ' Hello Vue ! '

}


})


组件化应用构建

     <ol>


         //    创建 一个   todo - item  组件的 实例 


         <todo-item></todo-item>
  

    </ol>



      Vue.component ( 'todo-item',{

           template : ' <li> 这是谁啊? </li>'


} )


推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,044评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 8,937评论 4 129
  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 10,512评论 1 158
  • 导读:她遇到的老公也是个奇葩,现实中可能也没太多人能“有幸”遇见。小编想说的是,这样的男人们,可以清醒点了,请给予...
    女人智慧语录阅读 234评论 0 1
  • 魔教最终还是攻上了青云。 士气高昂的呼喊声震天动地,昔日宁静的青云山被黑压压的魔教众人代替,纷乱的脚步声接踵而至,...
    喵小木L阅读 463评论 0 0