Vue(第一天)

Vue(第一天)

目录

  • Vue(第一天)
    • 引入Vue
    • Vue.js 目录结构
      • 目录解析
    • javaScript
    • UI框架
    • JavaScript构建工具:
    • 三端统一
      • 混合开发
    • View-UI
    • Element-UI
    • 飞冰
    • 什么是MVVM
    • 第一个Vue程序
      • 下载地址
    • 绑定
    • 判断--循环
    • 事件

HTML+CSS+JS 视图 给用户看,刷新后台的数据
网络通讯:axios
页面跳转:vue-router
状态管理:vuex
Vue-UI:飞冰、

引入Vue

<script src="https://unpkg.com/vue/dist/vue.js">script>

Vue.js 目录结构

结构如下所示:
Vue(第一天)_第1张图片

目录解析

Vue(第一天)_第2张图片

javaScript

  • jQuery:优点是简化Dom操作
  • Angular:Goole开发,mvc搬到了前端
  • React:Facebook的,特点,虚拟Dom
  • vue:渐进式JavaScript的框架,集成了Angular模块化和React(虚拟Dom)
  • Axios:前端通信框架;就是为了处理Dom

UI框架

  • Ant-Design:阿里巴巴,基于React的UI框架
  • Element-UI、iview、ice:饿了么出品,基于vue的ui框架
  • BootStrap:Twitter推出的一个用于前端开发的开源工具包
  • AmazeUI:又叫“妹子UI”,一款HTML5的前端框架

JavaScript构建工具:

Babel:js编译工具

WePack:模块打包器,主要作用的是打包、压缩、合并及按序加载

三端统一

混合开发

主要目的的实现一套代码三端统一并能够用到设备底层硬件,打包方式主要有以下两种:

  • 云打包:HBuil–>HBuil X–>DCloud出品
  • 本地打包:Cordova

View-UI

官网

Element-UI

官网

飞冰

官网

什么是MVVM

MVVM是一种软件架构设计模式。

MVVM源自于经典的mvc模式。MVVM的核心是ViewModel层,负责转换Model中数据对象来让数据变得更容易管理和使用。

  • 该层向上与视图层进行双向数据绑定

  • 向下与model层通过接口请求进行数据交互

    .

第一个Vue程序

【说明】IDEA可以安装vue插件

下载地址

  • CSDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    

绑定

  • bind
<div id="app">
    <p v-bind:title="type"> 鼠标悬停几秒钟查看此处动态绑定的提示信息!p>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    let vue = new Vue({
      
        el: "#app",
        data: {
      
            type: '男'
        }
    });
script>	

判断–循环

  • if
<div id="app">
    <p v-if="type =='a' ">aaaap>
    <p v-else-if="type =='b' ">bbbbp>
    <p v-else="type">ccccp>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    let vue = new Vue({
      
        el: "#app",
        data: {
      
            type: "a"
        }
    });
script>
  • for

    <div id="app">
       <p v-for="(item,index) in items">
           {
          {item.message}}---{
          {index}}
       p>
        <p>
            {
          {type.name}}
        p>
    
    div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        let vue = new Vue({
            
            el: "#app",
            data:{
            
                items:[
                    {
            message: 'a'},
                    {
            message: 'b'}
                ],
                type:{
            
                    name:'nima'
                }
            }
        });
    script>
    

事件

  • on
<div id="app">
    <button v-on:click="sayHello">click mebutton>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    let vue = new Vue({
      
        el: "#app",
        data: {
      
            type: '男'
        },
        // 方法必须定义在Vue的Methods对象中
        methods: {
      
            sayHello: function () {
      
                alert(this.type);
            }
        }
    });
script>

你可能感兴趣的:(vue,前端,vue,java)