Vue(1)

什么是Vue.js?

• Vue.js是目前最火的前端框架，而React.js是当下最流行的前端框架，我们可以使用React.js进行网站开发和手机App开发，而Vue借助Weex也能实现手机App开发。而Vue.js相较于React.js来说更易入门。
• 三大前端主流框架之一（Angular.js | React.js | Vue.js）
• Vue.js主要是用于构建用户界面的框架，所以只关注视图层。

学习框架的好处

能显著地提高开发效率。

• 发展历程：
  原生js（兼容性问题麻烦） --> Jquery之类的js库（极大程度解决兼容性问题，并提供了方便使用的新方法） --> 前端模板引擎（封装一些常用的模板以供调用，但渲染效率低） --> Vue.js等前端框架（减少不必要的DOM操作，从而将精力放在业务逻辑上；提高渲染效率；一些新概念新思想）。

MVC和MVCC的关系

• MVC一般是后端的一种开发思想，MVC分别代表Model（模型）、View（视图）和Controller（控制），用户通过前端交互可以对数据库进行操作，这个过程可以看做：在View层进行交互 --> 在Controller层处理业务逻辑 --> 在Model层对数据库进行CRUD。
• 而MVVM是前端页面的一种开发思想，和MVC类似，我们只是把C换成了VM。一般来说，MVVM分层开发思想是将每个页面分成了M、V、VM三个层，VM是M层和V层的调度者，也是MVVM思想的核心层。
  M层一般保存着每个页面中单独的数据；
  V层即HTML代码结构；
  VM层是两者之间的调度者，实现了M层向V层存取数据和V层向M层存取数据，即实现了数据的双向绑定。

使用Vue.js输出hello

Vue.js的安装十分简单，我们只需要引入外部js文件即可。我们直接看代码：

  

  


  

    
这是我要说的：{{msg}}
  

  

这是最基本的Vue.js的使用，Vue.js为我们提供了Vue这个对象，我们可以进行实例化，而参数el为elemnt的缩写，表示Vue实例绑定的页面元素，而data中我们可以存放一些我们需要使用的数据。
结合MVVM架构，我们可以发现Vue对象的实例vm即VM层，实现了数据的双向绑定，V层即id为app的

，M层即vm中的data对象，存储着页面需要使用到的数据。

v-指令

• v-cloak：无表达式，直接挂载。cloak有斗篷、隐藏的意思，作用是在也页面编译完成之前让元素保持display:none的属性。需要在css中加：

[v-cloak] {
    display: none;
}

这样，页面就不会因为先加载后编译出现的闪烁效果。

• v-text：表达式：v-text = "str"。这个指令改变了元素的textContent，下面两条语句的效果是一样的：

 //等价于下面的语句
{{message}}

• v-html：表达式：v-html = "str"。类似jquery的html(str)。

//假设message = "
Hello
";
 //div中显示：
Hello
 //div中显示：Hello，和Hello被
标签包裹。

• v-bind：为元素绑定属性并赋值。
  • 缩写形式：：

//可以使用message变量+表达式的形式赋值给属性title。

• v-on：为元素绑定一个或多个事件。
  • 缩写：@
  • 预期：function || inline statement || Object
  • 参数：event

  • 修饰符：
    
  • 示例：

    
    
    


    

        
        方法处理器

        
        内联语句

        
        串联修饰符

        
        

        
        

        
        只会触发一次

        
        对象语法

        
        多事件
    

    

练习：跑马灯效果

    
    
    


    

        浪起来
        低调
        
{{message}}
    

    

v-model实现表单元素的双向数据绑定

目前Vue.js只有v-model才是真正地数据双向绑定，即在页面修改数据同样能动态改变数据的值。
比如：

    
    
    


    

        
        
        {{message1}}
        

        
        
        {{message2}}
    

    

v-bind:value和v-model的区别在于，v-model能通过表单数据的改变来更新绑定的数据值，实现双向绑定。

练习：使用双向绑定的特点来实现简单的计算器

    
    
    


    

        
        
            +
            -
            *
            /
        
        
        =
        
    

    

使用v-bind设置元素class和style

一般使用数组或对象来绑定，直接看实例即可：

• class

    
    
    
    


    

        
规则，就是用来打破的(无style)
        
        
规则，就是用来打破的
        
        
规则，就是用来打破的
        
        
规则，就是用来打破的
        
        
规则，就是用来打破的
        
        
规则，就是用来打破的
        
        
规则，就是用来打破的
    

    

• style

    
    
    


    

        
        
Jinx的含义就是Jinx.
        
        
Jinx的含义就是Jinx.
        
        
Jinx的含义就是Jinx.
        
        
Jinx的含义就是Jinx.
    

    

使用v-for进行迭代

使用v-for可迭代数组、数组对象、对象以及数字。

    
    
    


    

        
        

        
索引：{{index}};值：{{val}}
        
        

        
索引:{{index}};值：{{val.id}}={{val.name}}
        
        

        
索引:{{index}};键：{{key}};值：{{val}}
        
        

        
{{val}}
    

    

使用v-for时key的注意事项
在组件中使用v-for时必须使用key属性，以标识迭代元素的唯一性。注意：key使用v-bind进行绑定，且值必须为字符串或数字。

v-if和v-show的使用

两者的值都是布尔值，根据传入的boolean来决定是否“显示”该元素。
v-if和v-show的区别在于，如果传入的值为true，前者才创建该元素否则不创建；而后者使用“display:none”来控制元素的显示效果，所以一定会创建出来。
所以，

• v-if：切换显示效果的渲染成本高。
• v-show：首次创建元素的渲染成本高。
  即，v-if通过删除或新建元素来显示元素；而v-show先创建元素再通过display:none来控制显示效果。根据实际情况选择使用。

案例

........