前端

最新推荐文章于 2024-10-10 13:13:22 发布
最新推荐文章于 2024-10-10 13:13:22 发布
阅读量221 收藏
点赞数 1
分类专栏： javascript 前端框架 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangminlu/article/details/106771813
版权

前端四要素

  • 逻辑 ：判断，循环
  • 事件 ：浏览器事件（window,document）;DOM事件（增删改，遍历）
  • 视图 ：html,css,js
  • 通信 : XmlHttpRequest,Ajax,Axios，websocket

javascript 框架

jQuery -----Ajax可以实现通信
Angular ------模块化mvc
React ----------虚拟Dom
Vue----------只专注视图
Axios------------前端通信框架

UI框架

  • 基于React

    Ant-Design（阿里）

  • 基于Vue

iview ( iview-admin) 饿了么出品 ,基于npm+webpack+babel 开发 , 支持移动端多些
ElementUI ==(Vue-element-admin) == 阿里; 支持PC端多些
ice

  • 其他

Bootstrap 开源工具包
AmazeUI HTML5跨屏前端框架

javascript 构建工具

Babel: js编译：Typescript
webpack: 打包器

前端模板网站

layui

Jquery API

Jquery API

源码之家

前端开发软件

vscode, hubilder, sublime, webstrom, idea , idea+vue插件

vue

在这里插入图片描述

mvvm架构思想

在这里插入图片描述

vue开发

vue.js官网

{{}}
v-bind:
v-if=
v-else-if=
v-else=
v-for=

v-on: 监听事件
v-model=""   双向绑定

vue七大属性
el:
data:
methods:
template:
render:
computed:
watch:

第一个程序
安装 vue.js插件 node.js插件

<head>
    <meta charset="UTF-8">
    <title>第一个vue程序</title>
</head>
<body>
<div id="app">
    {{message}} //展示数据  用 {{}} 或 v-bind：
  <span v-bind:title="message">asdfhfahd;fkhdjk;fds;f </span>  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app', //绑定元素
        data: {
            message: 'hello,first vue'
        }});
</script>
</body>

判断，循环

<head>
    <meta charset="UTF-8">
    <title>判断，循环</title>
</head>
<body>
<div id="app">
    <h1 v-if="message===1">1</h1>
    <h1 v-else-if="message===2">2</h1>
    <h1 v-else>0</h1>
</div>
<div id="app1">
    <h1 v-for="item in items">
        {{item.text}}
    </h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 2
        }});
    var vm1=new Vue({
        el: '#app1',
        data: {
            items:[
                {text: 'java基础'}, {text: 'SQL高级'}, {text: 'suanfa'}
            ]}});
</script>
</body>

事件

<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayhi">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,vue'
        },
        methods: {
            sayhi: function (event) {//方法，监听event
                alert(this.message)
            }
        }
    });
</script>
</body>

自定义组件

<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<div id="app">
   <!--使用组件-->
<selfcom v-for="item in items" v-bind:selfval="item"></selfcom>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //自定义组件
    Vue.component('selfcom',{
        props: ['selfval'], //接收参数
        template: '<li>{{selfval}}</li>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            items:["java","mysql","linux"]
        }
    });
</script>
</body>

axios 异步通信
axios API文档

安装 axios

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

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

<head>
    <meta charset="UTF-8">
    <title>异步通信</title>
</head>
<body>
<div id="app">
    <h1>{{info.name}}</h1>
    <h1>{{info.sex}}</h1>
    <h1>{{info.hobbys.first}}</h1>
</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        data(){
            return{//return一个格式
                info:{
                    name: null,
                    sex: null,
                    hobbys:{
                        first: null,
                        second: null
                    }}
            }},
        mounted(){//钩子函数
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>

data.json

{
  "name": "luxiangmin",
  "sex": "woman",
  "hobbys": {
    "first": "playball",
    "second": "run"
  },
  "friends": [
    {
      "name": "zhanshang", "sex": "boys"},
    {"name": "wangwu", "sex": "girl"}
  ]
}

计算属性：可以将不经常变化的数据，缓存，能快速取，减少开销
在这里插入图片描述

插槽slot

<body>
<div id="app">
    <todo>
        <todo-tile slot="todo-tile" :tile="tile"></todo-tile>
        <todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>

    </todo>

</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    Vue.component('todo',{
        template: '<div> ' +
            '<slot name="todo-tile"></slot>' +'<ul>' +'<slot name="todo-items"></slot>'+
            '</ul>'+ '</div>'
    });
    Vue.component('todo-tile',{
        props: ['tile'],
        template: '<div>{{tile}}</div>'
    });
    Vue.component('todo-items',{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm=new Vue({
        el: '#app',
        data: {
            tile: '书籍列表',
            items: ['数据结构','算法','java语言']
        }
    });

</script>

</body>

自定义事件分发

<body>
<div id="app">
    <todo>
        <todo-tile slot="todo-tile" :tile="tile"></todo-tile>
        <todo-items slot="todo-items" v-for="(item ,index) in items"
                    v-bind:item="item" :index="index" v-on:remove="removeitem(index)" :key="index"></todo-items>
    </todo>
</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    Vue.component('todo',{
        template: '<div> ' +
            '<slot name="todo-tile"></slot>' +'<ul>' +'<slot name="todo-items"></slot>'+
            '</ul>'+ '</div>'
    });
    Vue.component('todo-tile',{
        props: ['tile'],
        template: '<div>{{tile}}</div>'
    });
    Vue.component('todo-items',{
        props: ['item','index'],
        template: '<li>{{index}} {{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove',index);
            }
        }
    });
    var vm=new Vue({
        el: '#app',
        data: {
            tile: '书籍列表',
            items: ['数据结构','算法','java语言']
        },
        methods: {
            removeitem: function (index) {
                console.log("删除"+this.items[index]+"ok");
                this.items.splice(index,1);
            }
        }
    });

</script>
</body>

vue-cli开发 脚手架框架

vue-cli 快速生成vue的项目模板：
统一的目录结构

环境

1.node.js 下载 https://nodejs.org/en/download/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一个vue-cli 项目

在这里插入图片描述
在这里插入图片描述
在idea中打开项目

webpack

打包降级的功能，将ES6降为ES5

安装：        npm  install webpack -g
              npm install webpack-cli -g

查看安装版本：  webpack -v
               webpack-cli  -v

使用示例：
新建一个空文件，idea打开
在这里插入图片描述

1. hello.js
//暴露一个方法
exports.sayhi = function () {
    document.write("<h1>暴露 sayji</h1>");
};
exports.saybeey = function () {
    document.write("<h1>暴露 saybeey</h1>");
};

2. main.js
//变量hello接收请求到的对象，并可以调用方法
var hello=require("./hello");
hello.sayhi();
hello.saybeey();


3. webpack.config.js
module.exports = {
    entry: './modules/main.js', //打包入口
    output: {
        filename: './js/bundle.js' //打包输出
    }
};

4. 执行打包命令   webpack
5. dist/js/bundle.js  是打包后的结果
6.  在 index.html  中引用  bundle.js  就可以了

vue-router 重定向，传参

npm install vue-router --save-dev


//    ./router/index.js   路由配置文件 
import Vue from 'vue'
import VueRouter from "vue-router"
//导入要路由的组件
import main from "../components/main";
import mycontent from "../components/mycontent";

//安装路由
Vue.use(VueRouter);

//配置路由导出
export default new VueRouter({
  routes: [
    {
      //请求的路由路径
      path: '/content',
      //路由名称
      name: 'content',
      // 返回要跳转的组件
      component: mycontent
    },{

      //请求的路由路径,接收id参数
      path: '/main/:id',
      //路由名称
      name: 'main',
      // 返回要跳转的组件
      component: main
       },{
        path: '/tomain',
        redirect: '/main'//重定向
    }
  ]
});

//  main.js   项目入口
import Vue from 'vue'
import App from './App'
//导入路由配置目录
import router from './router'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//   APP.vue  入口组件 
<template>
  <div id="app">
   <h1>vue router</h1>
     <!--:to="{name: 'main', params: {id:1}}   参数传递-->
    <router-link :to="{name: 'main', params: {id:1}}">首页</router-link>
    <router-link to="/mycontent">详情</router-link>
    <!--展示页面-->
    <router-view > </router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

//main.vue
<template>
   <div>
     <h1>主页</h1>
     <!--显示参数-->
     {{$route.params.id}}
   </div>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

element-ui

在这里插入图片描述

xiangminlu
关注
专栏目录
认识前端开发
m0_65382530的博客
06-23 3762
前端开发是指开发网络应用程序（通常基于 Web 或移动应用平台），利用 HTML、CSS 和 JavaScript 等技术来实现用户界面和用户交互，使得用户可以便捷地使用程序并获得交互反馈。前端开发主要关注的是软件的展示层，即用户能够看到和触摸到的部分。HTML是前端开发中最基本的语言，它用来描述文档结构和内容。CSS用于定义文档的样式和布局，使得文档展示更加美观、易读。JavaScript则是一种编程语言，常用于制作交互式的网站和应用程序，并增加软件的交互性和可用性。
Axure 8 Web前端+后台+移动前端 元件库
09-06
Axure 8 Web前端+后台+移动前端 元件库是一个专门为产品经理和交互设计师准备的资源集合，旨在帮助他们在设计过程中快速构建清晰、高效的原型。这个元件库包含了各种Web前端、后台管理界面以及移动前端的组件，使得...
前端常用6种数据加密方式的使用详解
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
06-19 4万+
在前端开发中，数据加密是一个重要的安全措施，可以保护用户数据不被轻易窃取或篡改。
前端开发应知网站(强烈推荐)
热门推荐
吴小迪的博客
03-31 12万+
作为一名前端开发者（所有程序员）最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜（关键词一定要输入正确） 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 如果还不行就只能自己去看官方文档然后自己研究了。 只是知道搜解决问题的方法这是最基础的，遇到问题才会去想办法解决，而作为一名...
第二章（概念篇） 微前端与单体前端对比
球球不吃虾WHR2349博客
01-24 1938
随着Web应用的发展，前端开发所面临的挑战也在不断增多。单体前端（Monolithic Frontends）和微前端（Micro Frontends）是两种截然不同的架构风格，它们各有优劣。下面将对这两种架构风格进行对比分析，包括单体前端的挑战、微前端的优势与劣势，以及适用场景分析。
【前端】从零开始读懂Web3
颜淡慕潇
04-17 2万+
Web的发展史可以看作是一个不断演化和发展的过程，不断地引入新的技术和概念，不断地提高用户体验和互动性。 随着Web技术的不断发展和演化，我们可以期待更加智能、便捷和个性化的Web应用程序和服务的到来。
一文搞懂前端跨页面通信的那些方案们
xingyu_qie的专栏
05-08 6757
前端开发逃避不开跨页面通信这项工作，，就好比A页面要和B页面说话，可能只是说一句话，不需要回话，可能是要给一些东西，希望得到回复，并频繁进行沟通，接下来我们说说这些跨页面通信的方案们，希望对你有所帮助。
web前端简单介绍
weixin_63386209的博客
10-25 2005
web网页制作相关的简单知识
前端模糊查询
weixin_48414904的博客
06-30 5455
前端根据列表的某个字段模糊查询
微前端解决方案
夢的点滴的博客
06-02 2415
微前端解决方案对比及MicroApp方案示例
使用 Nginx部署前端项目
blue_121的博客
05-23 3019
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
2024前端面试八股文2024前端面试八股文2024前端面试八股文
08-17
2024前端面试八股文2024前端面试八股文2024前端面试八股文2024前端面试八股文2024前端面试八股文
2024年前端最新场景题面试.pdf
08-26
《2024年前端最新场景题面试》概要： 本文档为个人收集到的前端面试资料。前端开发者提供了面试准备及技能提升的资源， 围绕前端技术、性能优化、框架使用、跨域问题、安全性、缓存策略、Web技术趋势等多个方面展开...
1500个前端开发常用JavaScript特效
04-24
JavaScript是前端开发中不可或缺的一部分，尤其对于创建交互性和动态效果来说更是如此。"1500个前端开发常用JavaScript特效"这个资源集包含了大量实践性的示例，旨在帮助开发者提升项目中的用户体验。以下是对这些...
vue3之defineComponent
最新发布
点点滴滴
10-10 408
/script>h1 {</style>使用可以更好地定义组件的 props、emits 和其他选项，从而提供更严格的类型检查。在这个示例中，帮助我们定义了props和emits的类型，从而提供更严格的类型检查。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 983
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
计算机毕业设计 基于Python的智能文献管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
10-03 2077
本文介绍了一款基于Python的智能文献管理系统，该系统通过自动化的数据爬虫和文本挖掘技术，为用户提供了文献信息的收集、管理和分析服务。系统的主要功能包括用户管理、文献类型管理、文献信息管理、文献注释管理、在线论坛和系统管理等。该系统旨在提高学术文献管理的效率和质量，促进学术资源的共享与交流，对提升学术研究的质量和效率具有重要的价值。
Vue根实例、实例总结
m0_54007573的博客
10-04 701
Vue根实例、实例总结
大前端时代前端监控策略与实践
"大前端时代前端监控的最佳实践" 在大前端时代，随着Web技术的快速发展，前端监控变得越来越重要。本书由阿里巴巴前端技术专家彭伟春撰写，详细探讨了前端监控面临的新挑战以及最佳实践。书中关注的问题包括SPA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值