• Vue快速入门（一）
  • 介绍
    • Vue.js 是什么
    • M-V-VM思想
  • 安装
    • CDN引入
    • 下载到本地
    • 快速使用
      • 双向数据绑定测试
  • 模板语法
    • 插值语法
  • 指令
    • 文本指令
      • v-html：让HTML渲染成页面
      • v-text：标签内容显示js变量对应的值
      • v-show：显示/隐藏内容
      • v-if：显示/删除内容
    • 事件指令
      • v-on:click 可以缩写成@click
    • 属性指令
      • v-bind:class=’js变量’可以缩写成：:class=’js变量’

Vue快速入门（一）

介绍

Vue.js 是什么

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

版本

• 主流：2.x
• 最新：3.x

官网教程：https://cn.vuejs.org/v2/guide/instance.html

特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

• Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
• View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
• ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

安装

CDN引入

# 对于制作原型或学习，你可以这样使用最新版本：

# 对于生产环境：

下载到本地

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

快速使用

    
    
    
    
    
    


Vue

    {{ word }}

双向数据绑定测试

vm.word = 'Hello,HammerZe'   // 修改js中变量的值

$('#app').text('饿死了')    // 修改HTML的div中的值

模板语法

插值语法

    
    
    




    

        
字符串：{{name}}
        
数值：{{age}}
        
数组：{{list1}}
        
对象：{{obj1}}
        
字符串：{{link1}}
        
运算：{{10+20+30+40}}
        
三目运算符：{{10>20?'是':'否'}}
    

指令

文本指令

v-show与 v-if的区别：

• v-show：标签还在，只是不显示了（本质display: none）
• v-if：直接操作DOM，删除/插入 标签

v-html：让HTML渲染成页面

v-text：标签内容显示js变量对应的值

v-show：显示/隐藏内容

    
    
    




    
案例：控件通过按钮来控制显示和小事
    点我
    

    
isShow

v-if：显示/删除内容

    
    
    




    
案例：控件通过按钮来控制显示和消失
    点我
    

    
isCreated

事件指令

v-on:click 可以缩写成@click

    
    
    




    点我1
    
    点我2
    
    点我3-1(带括号)
    
    点我3-2(带括号+参数)
    
    点我4(带事件参数)

属性指令

v-bind:class=’js变量’可以缩写成：:class=’js变量’

    
    
    
    




    
    

    点我变色
    

        
我是一个div
    

【待续】