本文共 1909 字，大约阅读时间需要 6 分钟。

1.vue介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

2.MVVM模式

• MVVM是Model-View-ViewModel的简写。
• 它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开
• MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
• Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是
• ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷
  

3.快速入门

    
           
   
        {
   {
   message}}    {
   {
   num*num}}    {
   {
   ok ? 'yes':'no'}}
   

运行结果：

4.常用系统指令

4.1 v-on: 相当于@

    
           
   
    
        
    点我   
    点我    {
   {
   message}}
   

运行结果：

4.2 v-on:keydown 键盘输入事件

    
           
   
    
       
        {
   {
   message}}
   

运行结果：只能输入数字，范围每个电脑有差异

4.3 v-on:mouseover 鼠标移动事件

    
           
   
    
        
    
        
         
    
    {
   {
   message}}
   

运行结果：

4.4 v-text/v-html 展示数据

运行结果：

4.5 v-bind：简写为： 属性绑定

    
           
   
    
        
    {
   {
   mess1}}    
    {
   {
   mess2}}
   

运行结果：

4.6 v-model 对象绑定

    
           
   
    
        
    
             姓名：
             年龄：
             
         
    
   

运行结果：

4.7 v-for 循环数据

    
           
   
    
    
        
     
{
   {
   item}}------{
   {
   index}}
    
    
    
    
    
        
     
{
   {
   item}}------{
   {
   index}}
    
    
    
    
    
             
      
                   
序号
                   
姓名
                   
年龄
                   
性别
              
              
                   
{
   {
   index+1}}
                   
{
   {
   item.name}}
                   
{
   {
   item.age}}
                   
{
   {
   item.sex==1?'男':'女'}}
              
         
    
   

运行结果：

4.8 v-if/v-show 展示

    
           
   
    
    vue牛皮    
    vue牛皮
   

运行结果：flag为false不显示

转载地址：http://vcezi.baihongyu.com/