Nice2cu_Code

Vue 全套教程（一），入门 Vue 必知必会

Vue(一)

文章目录

Vue(一)
- 一、Vue简介
- - 1. 介绍
  - 2. 特点
- 二、HelloWorld
- 三、v-bind指令
- 四、v-model指令
- 五、el与data的两种写法
- - 5.1 el的两种写法
  - 5.2 data的两种写法
- 六、MVVM模型
- 七、Object.defineProperty方法
- 八、数据代理
- - 8.1 数据代理概念
  - 8.2 Vue中的数据代理
- 九、事件处理
- - 9.1 基本使用
  - 9.2 $event
  - 9.3 事件修饰符
  - - 9.3.1 prevent事件
    - 9.3.2 stop事件
    - 9.3.3 once事件
    - 9.3.4 self事件
  - 9.4 按键修饰符
- 十、计算属性
- - 10.1 基本概念
  - 10.2 简写形式

一、Vue简介

1. 介绍

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架

构建用户界面：把数据通过某种办法变成用户界面
渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件

2. 特点

2.1 采用组件化模式，提高代码复用率、且让代码更好维护

每一个组件由三部分组成：HTML、CSS、JS，如下图：

2.2 使用虚拟 DOM 和 Diff 算法，尽量复用 DOM 节点

如果数据修改，不需要重新拼串，在虚拟 DOM 层会通过 Diff 算法比较与原数据的差异，从而复用原数据，如下图：

2.3 声明式编码，让编码人员无需直接操作 DOM，提高开发效率

不需要像命令式编码一样将每一步操作都通过代码编写，如下图：

二、HelloWorld

首先需要引入Vue，通过本地文件引入，或通过网络引入：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
想要让Vue工作，就需要创建一个Vue实例，给这个实例传入一些数据，比如 data（定义数据）、methods（定义方法）等，并将这个实例绑定给页面的 div 标签（称为容器）
在容器的标签中通过 {{}} （插值表达式）编写 JS 表达式可以直接获取 data 中的数据，一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

代码示例：



    
        
        初识Vue
        
        
        
    
    
        
        
        
            
            Hello，{{name}}，{{address}}

运行结果：

注意：

容器中的代码依然符合 HTML 规范，只不过可以写一些 Vue 的语法
容器和 Vue 实例是一一对应的，可以有多个容器和Vue实例一一对应（但是一般只写一个容器和一个Vue实例，其余内容配合组件一起使用）

三、v-bind指令

基本语法：v-bind:属性名 = "JS表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）

简写：:属性名 = "JS表达式"

代码示例：


    
    你好，{{name}}
    
    点我去{{school.name}}学习
    
    点我去学习

运行结果：

注意：

如果 data 中的属性值发生变化，单向绑定的数据也会自动的随之变化
插值表达式一般写在标签体中，单向绑定一般用于给标签的属性绑定值

四、v-model指令

基本语法：v-model:value = "JS表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改

简写：v-model = "JS表达式"，即双向绑定默认操作的属性就是 value

代码示例：


    

        
        双向数据绑定：


        
        双向数据绑定：


         data属性的值：{{name}}

运行结果：

注意：

双向绑定只能使用在表单类元素上，也就是标签必须有 value 属性，比如输入框、单选框、多选框等
插值表达式和单向绑定数据只能从 data 流向页面，而双向绑定还可以使数据从页面流向 data

五、el与data的两种写法

5.1 el的两种写法

5.1.1 第一种写法

<script type="text/javascript">
    new Vue({
        el: '#root', //绑定id为root的容器
        data: {
       		//定义数据 
    	}
    })
script>

5.1.2 第二种写法

<script type="text/javascript">
    const vm = new Vue({
        data: {
       		//定义数据 
    	}
    })
    vm.$mount('#root') //绑定id为root的容器
script>

两种方式的区别：

第一种创建Vue对象的时候就要绑定容器；第二种先创建Vue对象，可以做一些其他操作后再绑定容器。

5.2 data的两种写法

5.2.1 对象式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: {
       		name:'Nicki Minaj' 
    	}
    })
script>

5.2.2 函数式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data(){
            return{
                //返回值是定义的数据
                name:'Nicki Minaj' 
            }
        }
    })
script>

注意：

使用组件时，必须使用函数式定义数据
由 Vue 管理的函数不能写成箭头函数，如果使用箭头函数，则函数中的 this 表示的是 window，如果使用普通函数格式，则 this 表示 Vue对象

六、MVVM模型

M：模型 (Model) ：data中的数据
V：视图 (View) ：模板代码
VM：视图模型 (ViewModel)：Vue实例

图示：

图中 Vue 实例的双向箭头表示：

Data Bindings：数据存放在 Model 中，经过 Vue 实例将数据绑定在页面上
DOM Listeners：页面上的数据会被 Vue 实例监听，比如双向绑定：页面数据发生变化，对应 Model 中的数据也跟着变化

代码示例：

<body>
    <div id="root">
        <h1>学校名称：{{name}}h1>
        <h1>学校地址：{{address}}h1>

        
        <h1>测试一下2：{{$options}}h1>
        <h1>测试一下3：{{$emit}}h1>
    div>
body>

<script type="text/javascript">

    //一般使用vm这个变量名表示Vue实例
    const vm = new Vue({
        el:'#root',
        data:{
            name:'清华大学',
            address:'北京',
        }
    })
    // 控制台输出Vue实例
    console.log(vm)
script>

运行结果1：

控制台输出 Vue 实例：

运行结果2：

页面展示：

结论：

data 中所有的属性，最后都出现在了 Vue 实例中
Vue 实例身上所有的属性以及 Vue 原型所有的属性，都可以直接在 View 中使用

七、Object.defineProperty方法

先看一段 JS 代码，将一个变量的值赋值给一个属性：

let number = 18
let person = {
    name:'张三',
    sex:'男',
    age:number //age值为18
}

如果通过这种方式给 age 赋值，只有第一次代码执行到赋值语句时才会将 age 的值修改为 18，如果以后 number 的值发生变化，则 age 不会跟着变化。

方法介绍：

此方法用于给对象定义属性使用，参数1表示给哪个对象定义属性，参数2表示给对象中的哪个属性赋值，参数3写赋予值的配置对象（对属性值进行一些高级的操作），如下所示：

<script type="text/javascript" >
    
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{
        value:18, //这个属性值为18
        enumerable:true, //控制属性是否可以枚举（被遍历），默认值是false
        writable:true, //控制属性是否可以被修改，默认值是false
        configurable:true //控制属性是否可以被删除，默认值是false
    })
    
script>

运行结果：

get()、set()方法：

<script type="text/javascript" >

    let number = 12
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{

        //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age此时的值
        get(){
            console.log('有人读取age属性，get方法被调用')
            return number //返回定义的number变量值
        },

        //当有人修改person的age属性时，set函数（setter）就会被调用，且参数是要赋予age属性的值
        set(value){
            console.log('有人修改age属性，set方法被调用，修改值为',value)

            //age的值取决于number，修改number的值就可以修改age的值
            //并没有直接修改age属性值
            number = value 
        }
    })
script>

运行结果：

上述代码完成了一种功能：person 对象中有 age 这个属性，但是 age 属性的值并不是固定的，可以随时读取，随时修改。

八、数据代理

8.1 数据代理概念

**数据代理：**通过一个代理对象，操作另一个对象中的数据，而不是直接操作该对象。

代码示例：


<script type="text/javascript" >

    let obj = {
        x:100
    }
    let obj2 = {
        y:200
    }

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
script>

运行结果：

8.2 Vue中的数据代理

观察下述代码：

<body>
    <div id="root">
        <h2>名称：{{name}}h2>
        <h2>地址：{{address}}h2>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'Jay',
            address:'台湾'
        }
    })
script>

运行结果1：

运行结果2：

运行结果3：

总结：

Vue 中的数据代理指的就是通过 Vue 实例（Vue实例中也会有上述的 name、address 属性）来代理 data 对象中 name、address 属性的操作
如果没有数据代理，那么在 View 中获取 data 中的数据只能通过上述的 _data 来获取
- Vue 使用数据代理的目的就是可以编码时简写，比如直接写 name 就可以拿到 'Jay' 这个值（编码获取的是 Vue 中的 name，最终通过 getter() 方法读取到的是 data 中的 name）
- Vue 使用数据代理还可以将数据的改变同步到页面上，比如修改 vm.name 值，最终通过 setter() 方法修改的是 data 中的数据，data 中的数据发生了变化，最终会直接影响到页面上的数据
- 只要 data 中的数据发生变化，Vue 就会重新解析模板（View），以更新模板中的值，如果解析模板的过程中，插值表达式中有调用函数，这个函数一定会被重新调用
通过 Object.defineProperty() 方法把 data 对象中的所有属性添加到 Vue 实例上，并且为每个属性自动的添加 getter/setter，通过这些方法修改 data 中的属性值
具体见下图：

可以发现编码时写的 data 没有出现在 Vue 实例中，都转换成了 _data，所以最终读取的都是 _data 中的数据。
只有 data 中的数据会做数据代理

九、事件处理

9.1 基本使用

基本语法：v-on:事件名 = "xxx"，xxx 表示事件发生时要执行的函数，也可以写一些简单的逻辑语句

简写：@事件名 = "xxx"

**事件对象：**事件触发的时候会执行某个函数，该函数的形参（如果只有一个）会自动接收一个事件对象（即使调用函数时没有传递任何实参），这个事件对象中包含这个事件的各种信息

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <button @click="showInfo1">点我提示信息1button>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        
        //定义的方法要写在methods对象中
        methods:{
            showInfo1(event){
                
                //event表示事件对象，target表示发生这个事件时的标签
                //event可以更改成其他的任何字母（都表示事件对象）
                console.log(event.target)
                
                //innerText表示标签中的文本
                console.log(event.target.innerText)
            },
        }
    })
script>

运行结果1：

运行结果2：

9.2 $event

如果想要事件发生时既要传递实参又要在函数中使用事件对象，那么就必须在调用函数时使用 $event 来表示传递的是事件对象，如下代码所示：

<div id="root">
    <h2>欢迎来到{{name}}学习h2>
    
    <button @click="showInfo1($event, 22)">点我提示信息1button>
div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        methods: {
            showInfo1(event, number) {
                // event表示事件对象，number表示接收的实参
                console.log(event.target)
                console.log('参数数字是' + number)
            },
        }
    })
script>

运行结果：

总结：

methods 中定义的方法属于被 Vue 实例所管理的方法：

如果使用箭头函数，this 表示 window
如果使用普通函数，this 表示 Vue 实例或者组件实例对象

9.3 事件修饰符

事件修饰符有6种：

prevent：阻止事件的默认行为
stop：阻止事件冒泡（使用在内部标签上）
- 事件冒泡：内部标签的事件触发时，外层标签如果有相同的事件，那么这个外部标签的事件会被自动触发
once：事件只触发一次
self：只关心自己标签上触发的事件，不监听事件冒泡
capture：使用事件的捕获模式
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

9.3.1 prevent事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息a>
    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){
                alert('同学你好！')
            }
        }
    })
script>

点击之后只弹出提示信息，没有跳转到百度页面。

9.3.2 stop事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <div @click = "showInfo">
            
            
            <button @click.stop = "showInfo"> 按钮 button>
        div>

    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){
                alert('同学你好！')
            }
        }
    })
script>

只弹出一次提示信息，如果不阻止事件冒泡，则会弹出两次提示信息。

9.3.3 once事件


<button @click.once="showInfo"> 按钮 button>

9.3.4 self事件



<div @click.self = "showInfo">
    <button @click= "showInfo"> 按钮 button>
div>

点击了按钮之后，只弹出一次提示信息。

注意：事件修饰符可以连续写，比如：@click.prevent.stop = "method" 表示既阻止事件的默认行为又阻止事件冒泡的发生。

9.4 按键修饰符

使用方式：@事件名.按键修饰符名称 = "要执行的方法"
作用：用来和按键事件绑定在一起，修饰特定按键事件
- click：点击事件
- keyup：按键抬起事件
- keydown：按键按下事件
常用的按键修饰符有9个
- enter：回车
- delete：删除或退格
- esc：退出
- space：空格
- tab：换行（键盘按下就会失去焦点，所以必须配合 keydown 使用）
- up：上
- down：下
- left：左
- right：右

代码示例：

<body>
    <div id="root">
        
        <input type="text" placeholder="请按下对应的按键" @keyup.enter="showInfo">input>
    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        methods:{
            showInfo(event){
                alert(event.target.value)
            }
        }
    })
script>

获取按键名

<script type="text/javascript">
    new Vue({
        methods:{
            // event是事件对象
            showInfo(event){
                //获取按键名
                console.log(event.key)
                //获取按键编码
                console.log(event.keyCode)
            }
        }
    })
script>

可以使用上述方式得到所有按键的按键名，故可以使用的按键修饰符不仅仅是默认的9个。

注意：如果想要使用非默认的9个按键修饰符，使用时必须将对应的按键名进行转换，比如：CapsLock 转换成 caps-lock。

十、计算属性

10.1 基本概念

如果一个属性要通过已有的属性计算出来，那么可以使用计算属性。计算属性的读取和修改必须通过定义 getter/setter 来进行。

注：计算属性的底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter 来完成读取和修改

代码示例：

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/>
        名：<input type="text" v-model="lastName"> <br/><br/>
        
        全名：<span>{{fullName}}span> <br/><br/>
        全名：<span>{{fullName}}span>
    div>
body>

<script type="text/javascript">

    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        methods: {
        },

        // 定义计算属性必须使用computed对象
        computed:{
            // 一个新的属性fullName，需要通过已有的属性计算出来
            fullName:{
                // 读取计算属性的值
                get(){
                    console.log('计算属性被调用了')
                    // this表示Vue实例，读取data中的属性
                    // 计算属性fullName依赖已有的属性
                    return this.firstName + '-' + this.lastName
                },
                // 修改计算属性的值
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    // 修改data中的属性（依赖的已有属性）
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
script>

运行结果1：

可以直接在 View 中读取计算属性：

运行结果2：

初始时，尽管调用了两次计算属性，但是控制台仅显示一次提示，也就是计算属性只调用了1次 get 方法。

原因：计算属性使用了缓存机制，如果已经有了计算属性的值，之后读取的都是缓存值（效率更高）。

运行结果3：

修改输入框内容的同时计算属性的 get 方法会被多次调用。

原因：get 方法何时被调用？（不使用缓存）

第一次读取计算属性时
当依赖的已有属性值发生变化时

运行结果4：

修改计算属性的值时，set 被调用，然后由于修改所依赖的已有的属性值，故 get 方法也会随之调用。

10.2 简写形式

当计算属性只读不改的时候可以使用简写形式。

代码示例：

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        computed:{

            //完整写法
            /* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					}
				} */

            //简写
            //fullName直接当作get方法来用
            fullName(){
                console.log('get被调用了')
                return this.firstName + '-' + this.lastName
            }
        }
    })
script>

注意：

使用简写形式之后，fullName 仍然是一个属性而不是方法，所以调用的时候不能加小括号。

你可能感兴趣的:(前端知识,vue,前端框架,vue.js,html)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
强大的销售团队背后竟然是大数据分析的身影蓝儿唯美数据分析
Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡 keepalived haproxy 高可用
我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过服务器资源 10.7
eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
基础篇--resources资源不懂事的小屁孩 android
最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml 字符串资源涉及国际化问题 http://www.2cto.com/kf/201302/190394.html string-array
接上篇补上window平台自动上传证书文件的批处理问卷酷的飞上天空 window
@echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
企业物联网大潮涌动：如何做好准备？蓝儿唯美企业
物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
spring学习——数据库（mybatis持久化框架配置） a-john mybatis
Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
Java静态代理、动态代理实例 aijuans Java静态代理
采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。按照代理类的创建时期，可以分为：静态代理和动态代理。所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。一、静态代理类实例： 1、Serivce.ja
Struts1与Struts2的12点区别 asia007 Struts1与Struts2
1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
初学者要多看看帮助文档不要用js来写Jquery的代码百合不是茶 jquery js
解析json数据的时候需要将解析的数据写到文本框中, 出现了用js来写Jquery代码的问题; 1, JQuery的赋值有问题代码如下: data.username 表示的是: 网易 $("#use
经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenu tree Richfaces
组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。 Ubuntu上安装Red
JSONObject转换JSON--将Date转换为指定格式白糖_ JSONObject
项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式： {"nanos":0,"time":-27076233600000,
JavaScript语言精粹读书笔记 braveCS JavaScript
【经典用法】： //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
编程之美-找符合条件的整数用字符串来表示大整数避免溢出 bylijinnan 编程之美
import java.util.LinkedList; public class FindInteger { /** * 编程之美找符合条件的整数用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
读书笔记 chengxuyuancsdn 读书笔记
1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
[通讯与电力]光网城市建设的一些问题 comsci 问题
信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........
oracle 空间RESUMABLE daizj oracle 空间不足 RESUMABLE 错误挂起
空间RESUMABLE操作转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。这一篇简单介绍空间RESUMABLE的例子。第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
重构第一次写的线程池 dieslrae 线程池 python
最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
C语言学习六指针 dcj3sjt126com c
初识指针，简单示例程序： /* 指针就是地址，地址就是指针地址就是内存单元的编号指针变量是存放地址的变量指针和指针变量是两个不同的概念但是要注意：通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }
timertask shuizhaosi888 timertask
java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
Spring Security（13）——session管理 234390216 session Spring Security 攻击保护超时
session管理目录 1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护
公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodb session nodejs
http://www.upopen.cn 一、前言书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
pojo.vo.po.domain区别 LiaoJuncai java VO POJO javabean domain
　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。　　　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
Windows Error Code OhMyCC windows
0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
在storm集群环境下发布Topology roadrunners 集群 storm topology spout bolt
storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。 1、打包打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
为什么不允许代码里出现“魔数” tomcat_oracle java
　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。　　很多开发者在这个检查方面都有问题，这可以从结果
zoj 3511 Cake Robbery(线段树) 阿尔萨斯线段树
题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&