Vue总结1-基本使用和指令

1.什么是vue，为什么要使用vue,vue的优势

 /*
  1.什么是Vue?
   Vue.js 是一套构建用户界面的`框架`，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、...)。

   2.框架和库的区别?
   框架：是一套完整的解决方案；对项目的`侵入性`较大，项目如果需要更换框架，则需要重构整个项目。
   库（插件）：提供某一个小功能，对项目的`侵入性`较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
   例如: 从jQuery 切换到 Zepto, 无缝切换
         从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可

   3.为什么要学习框架?
   提升开发效率：在企业中，时间就是效率，效率就是金钱；
   前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 ->  Vue / React / Angular

   4.框架有很多, 为什么要先学Vue
   Vue、Angular、React一起，被称之为前端三大主流框架！
   但是Angular、React是老外编写的, 所以所有的资料都是英文的
   而Vue是国人编写的, 所以所有的资料都是中文的, 并且Vue中整合了Angular、React中的众多优点
   所以为了降低我们的学习难度, 我们先学Vue, 学完之后再学习Angular和React

   5.使用Vue有哪些优势?
   5.1Vue的核心概念之一:
       通过数据驱动界面更新, 无需操作DOM来更新界面
       使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码,
       我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
   5.2Vue的核心概念之二:
       组件化开发，我们可以将网页拆分成一个个独立的组件来编写
       将来再通过封装好的组件拼接成一个完整的网页
       https://cn.vuejs.org/images/components.png
  */

2.vue基本模板

    
    
    
    



    
{{ name }}

3.数据单向绑定

 


    
    
    
    





    
{{ name }}

4.数据双向绑定

    
    
    







    
{{ name }}
    

5.常用指令

5.1 v-once指令

• 
  
  
      
      
      
  
  
  
  
  
  
      
  原始数据: {{ name }}
      
  当前数据: {{ name }}
  
  
  
  
  

5.2 v-cloak指令

• 
  
  
      
      
      
  
  
  
  
  
  
      
  {{ name }}
  
  
  
  
  
  
  

5.3 v-text 和 v-html

• 
  
  
      
      
      
  
  
  
  
  
  
      
  
      
      
  ++++{{ msg }}++++
      
     
  ++++++++
      
      
  ++++++++
      
      
  ++++++++
      
      
  {{name}}
  
  
  
  
  

5.4 v-if v-else v-else-if

• 
  
  
      
      
      
  
  
  
  
  
  
  
  
  
      
  我是false
  
  
      
  我是true
      
  我是false
  
  
  
  
  
      
  优秀
      
  良好
      
  差
  
  
  
  
  

5.5 v-show

• 
  
  
      
      
      
  
  
  
  
  
  
  
  
  
  
      
  我是段落1
      
  我是段落2
  
  
  
  
  

5.6 v-for

• 
  
  
      
      
      
  
  
  
  
  
  
      
  
          
  {{index}}--{{value}}
         
  {{index}}--{{value}}
         
  {{index}}--{{value}}
          
  {{key}}---{{value}}
      
  
  
  
  
  

5.7 v-bind

5.8 v-bind 用来绑定类名

• 
  
  
      
      
      
      
  
  
  
  
  
  
  
      
  
      
  
      
  
      
  
      
  
      
      
  我是段落
  
  
  
  
  

5.9 v-bind绑定样式

• 
  
  
      
      
      
  
  
  
  
  
  
  
      
  
      
  
      
  
  
      
      
  我是段落
  
  
  
  
  

5.10 v-on

• 
  
  
      
      
      
  
  
  
  
  
  
  
      
  
      
  
      我是按钮
  
  
  
  
  

• v-on 修饰符

• 
  
  
      
      
      
      
  
  
  
  
  
  
      
      我是按钮
      
      我是按钮
      
     我是A标签
      
      
  
          
  
              
  
          
      
      
      
  
          
  
              
  
          
      
      
      
  
          
  
              
  
          
      
  
  
  
  
  

• v-on 的注意点

• 
  
  
      
      
      
  
  
  
  
  
  
      我是按钮
  
  
  
  
  

5.11 自定义指令

• 自定义指令参数

• 
  
  
      
      
      
  
  
  
  
  
  
  
      
  我是段落
  
  
  
  
  

• 自定义局部指令

• 
  
  
      
      
      
  
  
  
  
  
  
      
  我是段落
  
  
      
  我是段落