初识Vue

根据公司发展要求，要尝试用目前很火的Vue框架进行开发，故学习一些Vue的知识，初学者，暂时没有地方做笔记，就先写在这吧！

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

1.要用Vue.js首先要先将其引入html中，

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

       或者下载vue.js到本地，下载地址http://download.csdn.net/detail/fanfan64/9518639

2.声明式渲染

        Vue.js的核心是一个允许采用简洁的模板语言来声明式的将数据渲染进DOM：

        代码：

 
 

  
  <div id="app">
 
 
 
 

  
    {{ message }}
 
 
 
 

  
  </div>
 
 

  

 
 

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

  
    }
 
 
 
 

  
  })
 
 

除了文本插值，我们还可以采用这样的方式绑定DOM元素属性：

       

 
 

  
  <div id="app-2">
 
 
 
 
  
  
  <span v-bind:title="message">
 
 
 
 

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

  
  </div>
 
 

 
 

  
  var app2 = 
  
  new Vue({
 
 
 
 
  
  
  el: 
  
  '#app-2',
 
 
 
 
  
  
  data: {
 
 
 
 
    
  
  message: 
  
  '页面加载于 ' + 
  
  new 
  
  Date()
 
 
 
 

  
    }
 
 
 
 

  
  })

 
 

 
 

  
  var app2 = 
  
  new Vue({
 
 
 
 
  
  
  el: 
  
  '#app-2',
 
 
 
 
  
  
  data: {
 
 
 
 
    
  
  message: 
  
  '页面加载于 ' + 
  
  new 
  
  Date()
 
 
 
 

  
    }
 
 
 
 

  
  })
 
 

  v-bind:指令，指令带有前缀v-，表示它是Vue提供的特殊属性它会在渲染的DOM上应用特殊的响应式行为。

简言之，该指令的作用是：将这个元素节点的title属性和Vue实例的message属性保持一致。

v-if指令：用在html标签中，当引号中的变量为true时，该标签显示，false时不显示。

 
 

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

  
  </div>
 
 

 
 

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

  
    }
 
 
 
 

  
  })
 
 

在控制台改变seen的值为false，按回车键，该标签消失

通常大家在这一步的时候会不知道怎么操作，在这里附上一张图给大家。