vue基础介绍

VUE介绍

• 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

  • Vue是一个JavaScript框架

    • Vue是一个用于构建用户页面的框架

      • Vue是一个用于构建用户界面得渐进式框架

• 2.渐进式框架介绍

  • a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的

    • 类似于Nodejs,拆分成很多个小模块

  • b. 在项目中我们用到什么，就导入什么

    • 这样可以保证我们用到的最少

2.vue是MVVM设计模式的框架

• MVVM设计模式：一种软件架构模式，决定了写代码的方式。

  • M：model数据模型(ajax获取到的数据)

  • V：view视图（页面）

  • VM：ViewModel 视图模型(vue实例)

• MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM

  • V（修改视图） -> M（数据自动同步）

  • M（修改数据） -> V（视图自动同步）

  1. 在vue中，不推荐直接手动操作DOM！！！

  2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

03-Vue基本使用

• 第三方框架通用的使用步骤

  • 1.导包

  • 2.写HTML结构

  • 3.js中初始化配置

Vue的插值表达式

• 插值表达式(模板语法)官网文档传送门：模板语法 — Vue.js

• 1.插值表达式作用

  • 使用 data中的数据渲染视图(模板)

  • 在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置

• 2.插值表达式语法: {{ 表达式 }}

• 3.关于插值表达式一些注意点

  • 基本语法, 支持三元运算符

vue基础指令

v-text指令

  a.作用： 设置元素的文本 innerText
    b.与插值表达式区别
        v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
        {{ }}  只会替换当前位置文本

v-html指令

 作用： 设置元素的innerHTM

v-on指令(绑定事件)

 a.作用： 给元素绑定事件
        b.语法： 
            标准语法：     v-on:事件名 = "方法名"
            简洁语法：     @事件名 = "方法名"
        c.注意点
            事件名就是原生事件名去掉on
            事件方法定义在vue实例的methods对象中

v-on事件修饰符

        a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
        b.语法： @事件名.修饰符 = "方法名"