VUE学习

vue 的 MVVM 模式（即双向数据绑定）

     ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

     首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

环境搭建（windows）：

1.先搭建好nodejs环境和npm

2.执行 npm install vue和npm install -g vue-cli

3.设置vue的环境变量，搜索vue.cmd,将此文件的目录加到Path中去，然后执行vue -V 成功执行说明环境搭建成功。

4.创建vue的demo，从vue官方克隆demo，vue init webpack my-first-vue-project

5.进入创建的demo目录，看到目录结构

6.要运行vue项目 则要执行 npm install 下载依赖，和npm dev run运行

    接下来用ide打开项目看看vue app的原理

  可以看到vue通过 template标签为展示模板，js export default传递数据，style设置css。

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

以上实例中 {

{message}} 会根据输入框 input 的改变而改变，如果不想让其变化可以修改为：{

{* message }}

      在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: message表示我们的Model是message对象。 Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{

{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

列表输出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 这个指令就能完成:

    
    
  
     
    
      
      {
   { todo.text }}    
  
     
    

vue 多维数组实例

    
  
     
  
      
    {
   { parentMessage }} - {
   { $index }} - {
   { item.message }}  
     
     
    

vue 条件判断：

    
    
    
     
            A	
     
	
     
      	  B	
     
	
     
      	  C	
     
	
     
      	  Not A/B/C	
     
    
	

vue 过滤器：

    
    
    
     
{
   {message}}
	
     
{
   {message | uppercase}}
	
     
{
   {message | reverse | uppercase}}