vue教程-介绍与使用

vue介绍

介绍

        是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

安装

        最简单的例子就是，创建一个html文件，在文件中引入vue：

创建实例

创建 Vue 实例，初始化渲染的核心步骤:
        1.准备容器
        2.引包(官网)-开发版本/生产版本
        3.创建 Vue 实例 new Vue()
        4.指定配置项 el data => 渲染数据
                ①el指定挂载点，选择器指定控制的是哪个盒子
                ② data 提供数据

    
    
    
    



    

    

        {{ foo }}
    

    

    

结果：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

插值表达式

插值表达式是一种vue的模版语法。

作用

利用表达式进行插值，渲染到页面中

语法

{{ 表达式 }}

注意点

        1.使用的数据必须存在

        2.支持的是表达式，而非语句，比如：if、for......

        3.不能在标签属性中使用{{}}进行插值

示例

    
    
    
    



    

        
{{ nickname }}
        
{{ nickname + '你好' }}
        
{{ age >= 18 ? '成年' : '未成年' }}
        
{{ firend.name }}
        
{{ firend.desc }}
    

    

    

结果：

响应式

数据修改，视图自动更新

data中的数据，最终会被添加到实例上：

        1.访问数据：“实例名.属性名”

        2.修改数据：“实例名.属性名 = 值”

示例

    
    
    
    



    

        
{{ nickname }}
        
{{ count }}
    

    

    

结果：