vue学习

推荐文章Vue.js——60分钟快速入门
官网手册
Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新

• 本文代码可以直接复制粘贴出效果

注意点，vue的代码必须写在底部。

el:  ----------对应选择的标签
data : {} ---- 对应数据
methods :{} ---对应函数

1、 首先我们打印Hello Vue!

    
        
        
       
    

    
    
        
        

            {{ message }}
        
    
    
    

---

2、我们在原代码基础上稍作修改v-model指令
使表单输入和应用状态间的双向绑定变得轻而易举。

  

    
{{ message }}
    

这个时候，我们会发现我们在输入框李敏啊输入什么，p标签就会显示什么

---

3.v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class,
v-bind:argument="expression"

    
        
        
       
    

    
    

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

---

4.v-if条件与循环

  

    
现在你看到我了
  

---

5.v-for循环

  

      

        

          {{ todo.text }}
        
      
    

    
        
        
        
    

       
        

            

                

                    {{ n + 1 }}
                
            
        
    
   
    

• 注意v-for="n in pageCount"这行代码，pageCount是一个整数，遍历时n从0开始，然后遍历到pageCount –1结束。
• 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

图片.png

组件化应用构建