VUE学习历程之第一天

一.编写的第一个vue应用。

1.通过在head标签引入vue.js来学习。

2.需要特殊的表达式来展示变量值例如：{{message}} 这里的变量message就可以在后面的vue特有的代码里面来赋值。

3.赋值需要在{{message}}之后才生效，我试过这两种

3.1 有效

    
        
    
    
        

            {{ message }}
        
            
    

3.2无效

    
        
  
    
    
        

            {{ message }}
        
    

4.发现如果div里面是id="app"的话，下面就用el:'#app',如果是class="app"的话，下面就用el:'.app'.

5.如果只需要展示一个固定变量的值 则不需要Vue实例，如果需要动态响应式的修改变量值则需要申明实例

及 Vue app = new Vue{...}

其中的app名字自己取，和div里面的id名没关系，值得注意的是div里面的id或者class需要和Vue类里面的el对应。

*打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

6.上面属于简单的文本插值，下面我接触到一个叫绑定元素特性。

代码可以这样写：

    
        
    
    
        

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

*其中的title是span标签里面的属性。绑定属性后可以动态的修改他的属性值。

小写：var ;首字母大写：Vue .

7.Vue里面的if和for

由于我有编程基础就不贴全部代码：

if:

现在你看到我了
 然后通过Vue对象修改属性seen的布尔值.

for:在这贴一下代码，便于自己回顾：

  

    

      {{ todo.text }}
    
  

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

建议：文本结合浏览器和控制台工具将代码敲几遍。
总结：不管属性值是单个字符串还是对象亦或是数组，后面统一加":",后面的字符串可以是双引号和单引号。属性值统一放data对象里面。方法则放在methods对象里面。方法后面还需要加上function().

在控制台敲代码的时候会发现有许多有意思的函数，用法很像java，例如：push、pop.

8.关于Vue里面的点击处理。

我贴上自己跟着文档敲的代码方便温习。

    
        
    
    
        

		
{{ message }}
		逆转消息
        
            
    

官方有这个一句话：注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

9.Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

贴上代码：

    
        
    
    
        

		
{{ message }}
		
        
            
    

不管是修改输入框里面的值还是动态在控制台上修改message的值,所有用到message的地方都将改变。

 

二.组件化应用构建

我先摘抄一下官方的话：

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。下面是图片。

1.组件写和用：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '
这是个待办项
'
})

我先贴一下代码，新手会在这里掉坑。

    
        
    
    
        

		
{{ message }}
		
		
        
            
    

注意事项1.如果是一个组件套一个组件，里面的组件先在script里面声明,我建议用";"隔开。

2.关于父组件向子组建传值的代码。

  
  


  

    
{{ message }}
    
    
    
  
  

我自己的理解：初始化：子->父   传值：父->子 

自己才能看得懂的密文：jason - list - item - [todo] - todo.text(item.text)