vue详解

m0_63947250

已于 2022-08-30 16:29:12 修改

阅读量280

点赞数

文章标签：前端框架

于 2022-06-01 21:00:36 首次发布

本文链接：https://blog.csdn.net/m0_63947250/article/details/125035006

版权

前言:ssm由spring ,springmvc,mybatis组成

ssm:为框架集

jdk:java开发工具包

jvm:虚拟机，class文件

jre:java运行环境，在平台之上

jdk>jre>jvm

真正的网站组成:三大件，域名，网络通信，页面跳转，状态管理

jsp:动态网页开发技术

dom:文本对象模型(接口) 一系列功能的集合

SEO:搜索引擎优化

API:应用程序编程接口

1:vue:一套用于构建用户界面的渐进式框架

特点:只是关注视图层(前端三大件)(视图作用用户看，刷新后台数据),实现模块化开发

2css预处理器，以编程的思想设计web页面，通过编译器不同的css，减少代码的冗余度

例如 SASS，LESS

3:javaScript框架，行为层，例如:jQuery，Angular ,React,vue,Axios:前端通信框架

4:ui框架(user Interface(用户界面)):框框:把一些特性直接封装起来，调用即可

例如:ElementUI AmazeUI

5:入门例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue 要放开头-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<!--vue特性 v-什么：指令 bind:绑定 上面是{{绑定}}-->
<div id="hh">
    <span v-bind:title="message">
       标题悬浮
    </span>
</div>

<script>
    var vm=new Vue({//创建一个vue 名叫vm的对象
    el:"#app",//vue控制视图层，el(元素的意思)绑定标签app
        //model:数据 前后台双向绑定
        data:{
        message:"我是左杰"//放一个数据
        }
    });
    var vm=new Vue({//创建一个vue 名叫vm的对象
        el:"#hh",
        //model:数据 前后台双向绑定
        data:{
            message:"我是左杰"//放一个数据
        }
    });

</script>
</body>
</html>

步骤:①建立vue对象:在控制台起昨用

②双向绑定:

③输入数据

6:流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue 要放开头-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<script>
    var vm=new Vue({//创建一个vue 名叫vm的对象
    el:"#app",//vue控制视图层，el(元素的意思)绑定标签app
        data:{
        ok:true
        }
    });

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--//:普通行注释-->
<!--/**/:普通块注释 -->
<!--在此都为-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">

</div>

<script>
    var vm=new Vue({
    el:"#app",
    data:{

    }
  });
<!--书写模板-->
</script>
</body>
</html>

1：选择与循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
<h1 v-if="kind==='a'">yes</h1>
    <h3 v-else-if="kind==='b'">no</h3>
    <h2 v-else>no</h2>
<!--类似于选择结构了，
===表示全等于 值和类型都相等 所以===后面要表示出类型 ‘’
view model层内控制的是vm对象内的data里的参数
-->
</div>

<script>
    var vm=new Vue({
    el:"#app",
    data:{
    kind:'a'
    }
  });

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
<h1 v-for="kind in kinds">
    {{kind.mes}}
</h1>
</div>

<script>
    var vm=new Vue({
    el:"#app",
    data:{
    kinds:[
    {mes:25},
    {mes:"yes"}
    ]
    }
  });
<!--for循环与数组相关
对象是谁是谁的对象
最后的数据一定要表示出数据类型
-->

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue 要放开头-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
    下拉框:
    <select v-model="selected">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    结果为：
    <span>{{selected}}</span>
</div>

<script>
    var vm=new Vue({//创建一个vue 名叫vm的对象
    el:"#app",//vue控制视图层，el(元素的意思)绑定标签app
       data:{
        selected:'',//里面为默认值 ios端不能为空
       }

    });
//    v-model实现了视图绑定数据，v-model绑定了selected 然后我们在视图层给与赋值 同样如果在视图层用，即会改变

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入vue 要放开头-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<abs v-for="item in items" v-bind:qq="item"></abs>
<!--上有间接绑定 实现了自定义组件使用自定义数据-->
</div>

<script>
    Vue.component("abs",//自定义组件的名字，组件：html内的标签
        {
            props:["qq"],//自定义组件和Vue对象为同层，不可直接绑定，需要借助props定义一个变量来间接绑定 props内定义的变量不能为大写
          template:'<li>{{qq}}</li>'//组件的内容
        }
    );
    var vm=new Vue({//创建一个vue 名叫vm的对象
    el:"#app",
       data:{
         items:["王昭君","貂蝉","猫猫"],
       }

    });


</script>
</body>
</html>

2:网络通信

①vue具有生命周期

②.json是一个存储数据和配置文件字符串

③网络通信:使用网络能够把多方链接在一起，然后可以进行数据传递，即一个网页引用另一个网页的数据

3:计算属性

:计算出来的结果，保存在属性中，内存中运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
<p>随机时间 {{currentTime1()}}</p>
<!--此为调用currenTime1属性内的方法加()-->
<P>计算时间{{currentTime2}}</P>
<!--此为调用计算属性，使用的是属性名，结果为属性内的方法计算数据
探究其原因，是因为一开始就把属性的数据计算好放在了内存里，速度快 相当于缓存，节约系统开销
-->
</div>

<script>
    var vm=new Vue({//创建一个vue 名叫vm的对象
    el:"#app",
        data:{
        message:"hello,world"
        },
      methods:{//里面为方法
        currentTime1:function (){
            return Date.now();//返回一个时间戳
        }
      },
      computed: {//计算属性，methods,computed内方法名不能重名，如果重名只会调用methods内的方法
          currentTime2: function () {
              return Date.now();//返回一个时间戳
          }
      }

    });


</script>
</body>
</html>

4:内容分发

props:接收数据

data:里面放数据实现动态

export:暴露接口

import:引入接口

有一些自定义组件，有一些自带的插件

import vue form 'Vue' 要导入 Vue之前的名字 vue导入进来后的名字

需要显示声明使用

如：Vue.use(vue);

style scoped:scoped的作用：该css只在当前组件生效

在导入当中有一个相对路径的问题

./当前目录

在Vue中这两者相互依存, router-link 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并不会刷新页面,

而router-view 相当于router-link的承载页面,用于展示router-link 的的内容(内部调用)

m0_63947250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue详解

前言:ssm由spring ,springmvc,mybatis组成ssm:为框架集jdk:java开发工具包jvm:虚拟机，class文件jre:java运行环境，在平台之上jdk>jre>jvm真正的网站组成:三大件，域名，网络通信，页面跳转，状态管理jsp:动态网页开发技术dom:文本对象模型(接口)SEO:搜索引擎优化1:vue:一套用于构建用户界面的渐进式框架特点:只是关注视图层(前端三大件)(视图作用用户看，刷新后台数据),实现模块化开.
复制链接

扫一扫