学习Vue(一)：vue的基本指令

• Vue是一款渐进式的js框架，所谓的渐进式，就是说在开发的过程中，可以很适合的随时的嵌入项目中，使用的时候没有额外的负担。
• Vue的基本指令

1. 在创建vue实例的时候，其中有两个固定参数        el ：与DOM的id进行绑定，相互关联；data：表示json格式的数据，而这些数据都是响应式的

   
     
       鼠标悬停查看动态绑定的提示信息！
     
   

   var app = new Vue({
     el: '#app',
     data: {
       message: '页面加载于 ' + new Date().toLocaleString()
     }
   })

   　　v-bind特性被称为指令。指令带有前缀 v-，表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。v-bind:style可以缩写为:style;点击指令v-on:click可缩写为@click

2. 条件与循环

   
     
   if="seen">控制这里的数据是否显示
   
   var app3 = new Vue({
     el: '#app',
     data: {
       seen: true
     }
   })

   v-if 是vue的判断指令，其值必须与vue对象data属性中保持一致

   for="num in list">
       {{num}}
   
   
   data:{
       list:["A","B","C"]
   }

   v-for是vue的循环指令，用法如上

3. 样式的绑定：一般使用三目运算符

   
       
   显示数据
       
   颜色不同显示数据
   
   
                           

   还可以使用数组的形式来改变样式，设定是根据

 

内联样式的绑定

    
绑定内联样式

当使用内联样式的时候，我们需要使用v-bind:style指令，值得注意的是data中的数据是json格式的，所以要使用key-value的形式，并且属性值需要使用驼峰命名法。同样可以使用数组形式。

数据绑定

    反转数据
    
{{message}}
    

使用v-model指令实现双向数据绑定，值得注意的是所有的函数都要定义在methods中

• Vue的生命周期
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如说created ,mounted ,updated等钩子函数。

    
        
    {{message}}
        点击更新
    
    

    这只是最基本三个钩子函数，在实际中往往需要很多的这样的钩子来满足日常开发所需，需要后续学习