2021-05-30 VUE01

vue.js

• vue定义:就是一个前端框架

框架:

• 前端:html css bootstrap js jq vue .....

• 后端:php java.....

使用框架的目的是方便更快度的开发

vue简介

• vue是什么??

  • 渐进式框架

  • 渐进式:你可以讲vue作为你应用的一部分,嵌入在其中,可以让用户有更好的体验

  • 我的理解:模块化开发程序

• vue和jquery什么个关系???

  • js document.getElementById('box');

  • jq: $('选择器').show() hide().......

  注意:js jq 都是在操作dom,只要操作dom对前端来说,就会有压力

  • vue是操作!!!!!!!!!!!!!!!!!!!!!!数据!!!!!!!!!!!!!!!!!!!!!!!!!的

  • js jq 使用请求数据的方式: ajax

  • vue中很早以前也用ajax,现在不用了,现在用 axios(请求数据)

• vue和jq能不能一起使用:

  • 可以,但是不建议在一个项目中同时使用jq(操作dom)和vue(操作数据)

• vue特点:

  • 1.操作数据,不操作dom

  • 2.可以重复使用的组件(类似于积木)

  • 3.前端路由

  • 4.状态管理

  • 5.虚拟dom

vue的使用

• 如何安装vue

  • 在百度搜索 vue.js 进入官网(https://cn.vuejs.org/)

  • 点击起步,开始搞事情,点击安装

    • 可以下载两种版本:

      • 1.开发版 在开发时使用的版本

      • 2.生产版 项目上线以后

    • 找到cdn外部连接进行引入:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue项目搭建

*第一个vue项目

//语法格式
<script>
    new Vue({
        el:'元素',//控制vue的操作范围
        data:{//定义的就是数据
            键:值,
            ....
            name:'李四',
            age:19
        }
    })
</script>

• 如何将data中的数据渲染到页面中

• 文本插值的方式:在页面上使用{{键}}