前端知识分享---Vue前置基础知识

一.前言

学习Vue的最少方式:Vue官网查看 ----https://v2.cn.vuejs.org/

二:概念

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

  • Vue是一个JavaScript框架

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

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

• 2.渐进式框架介绍

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

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

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

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

 2.1 Vue的MVVM设计框架

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

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

  • V：view视图（页面）

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

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

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

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

2.3.Vue基本使用 

使用的基本步骤:导包,写HTML结构,js中初始化配置

代码演示:

    
    
    
    
    
    



    
    

        {{ message }}
        

        {{ name }}
        

        {{ age }}
    

    

2.4 挂载点介绍

挂载点的作用:就是告诉Vue实例,你想要将data中的数据渲染到哪一个视图

注意点:

(1)挂载点可以使用id选择器 (Vue推荐使用),类选择器 标签选择器或其他符复核选择器等

(2)页面中的html标签和body标签不可以作为渲染对象(报错)

(3)开发中一般都是选择id选择器,保证html标签的唯一性

(4) 如果选择器选择了多个元素,只会渲染第一个元素

代码演示:

    
    
    
    
    
    



    
    

        

            {{ message }}
        

        

        

            {{ message }}
        

        

        

            {{ message }}
        
    

    

 2.5 Vue的差值表达式

差值语法的学习模板--官网模板语法 — Vue.js

1.差值表达式的作用:

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

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

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

3.注意点:

(1) 差值表达式是基本语法,支持三元运算符

(2) 使用的数据要在data中存在

(3)不支持分支和循环

(4)不能写在元素行内

代码演示:

    
    
    
    
    
    



    
    

        
数据： {{ name }}
        
二元： {{ age + 1 }}
        
三元： {{ age > 30 ? '大叔' : '欧巴' }}
        
数组： {{ list[1] }}
        
方法:  {{ list.join() }}
        
对象： {{ data.title }}
    

    

最后附上Vue基本指令介绍,使用方法均在官网API — Vue.js

 

• 1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性,

  • a. 每一个HTML标签都有自己的原生默认属性

    • HTML标签的每一个属性都有自己独特的功能

    • 例如 img标签的src属性，a标签的href属性

  • b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能

• 2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）

  • 语法 ： 指令名=“指令值”

    • 例如 v-text = msg

• 3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。