Vue.js框架笔记

1. 初识 Vue.js

1. 遇见 Vue.js

1.1 为什么要学习 Vue.js

• 组件化
  • 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展
• 天然分层: jQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层，代码解耦更易于读写
• 生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案

1.2 前端开发的复杂化

• Vue (读音 /vjuː/，类似于 view)，不要读错
• Vue是一个渐进式的框架
  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
  • 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统
  • 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求

1.3 Vuejs 特点

• Vue有很多特点和Web开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

2. 安装 Vuejs

2.1 直接 CDN 引入

• 可以选择引入开发环境版本还是生产环境版本

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

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

2.2 下载和引入

• 开发环境 https://vuejs.org/js/vue.js
• 生产环境 https://vuejs.org/js/vue.min.js

2.3 NPM 安装

2.4 CLI 和 NPM 结合使用

3. 体验 Vuejs

3.1 Hello Vuejs

• 创建Vue对象的时候，传入了一些options：{}
  • {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
    • 这些数据可以是我们直接定义出来的，比如像message这样
    • 也可能是来自网络，从服务器加载的
• 浏览器执行代码的流程：
  • 执行显然出对应的HTML
  • 执行创建Vue实例，并且对原HTML进行解析和修改
• 并且，目前我们的代码是可以做到响应式的

<div id="app">{{message}}div>
<script src="../vue.js" charset="utf-8">script>
<script type="text/javascript">
  // 编程范式：声明式编程
  const app = new Vue({
    el:'#app', // 用于挂载要管理的元素
    data:{ // 定义数据
      message:'hello Vue.js'
    }
  })
script>

3.2 Vue 显示列表

• 展示一个更加复杂的数据：数据列表。
  • 比如我们现在从服务器请求过来一个列表
  • 希望展示到HTML中
• HTML代码中，使用v-for指令
• 不需要在JavaScript代码中完成DOM的拼接相关操作
• 更重要的是，它还是响应式的
  • 也就是说，当我们数组中的数据发生改变时，界面会自动改变

<div id="app">
        <ul>
            <li v-for="item in movies">{{item}}li>
        ul>
    div>

    <script src="../vue.js">script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
            }
        })
    script>

3.3 实现计数器

• 新的属性：methods，该属性用于在Vue对象中定义方法。
• 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

<div id="app">
      <h1>计数器：{{count}}h1>
      <button type="button" name="button" v-on:click='jia'>+button>
      <button type="button" name="button" @click='jian'>-button>
    div>
    <script src="../vue.js" charset="utf-8">script>
    <script type="text/javascript">
      // 编程范式: 声明式编程
      const app = new Vue({
        el:'#app', // 用于挂载要管理的元素
        data:{ // 定义数据
          count:0
        },
        methods:{
          jia:function(){
            this.count++;
          },
          jian:function(){
            this.count--;
          }
        }
      })
    script>

4. MVVM 架构

4.1 data 和 Vue 对象的分离

• 计数器的MVVM
  • 我们的计数器中就有严格的MVVM思想
    • View依然是我们的DOM
    • Model就是我们我们抽离出来的obj
    • ViewModel就是我们创建的Vue对象实例
  • 它们之间如何工作呢？
    • 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示
    • 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据
• 有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作

4.2 Vue 中的 MVVM

• View层：
  • 视图层
  • 在我们前端开发中，通常就是DOM层。
  • 主要的作用是给用户展示各种信息。
• Model层：
  • 数据层
  • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
  • 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
• VueModel层：
  • 视图模型层
  • 视图模型层是View和Model沟通的桥梁。
  • 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data

4.3 创建Vue实例传入的 options

• 我们在创建Vue实例的时候，传入了一个对象options
• 这个options中可以包含哪些选项呢？
  • 详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
• 目前掌握这些选项：
  • el:
    • 类型：string | HTMLElement
    • 作用：决定之后Vue实例会管理哪一个DOM
  • data:
    • 类型：Object | Function （组件当中data必须是一个函数）
    • 作用：Vue实例对应的数据对象
  • methods:
    • 类型：{ [key: string]: Function }
    • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

4.4 Vue 的生命周期

• https://vue.docschina.org/images/lifecycle.png

2. Vue 基础语法

1. 插值语法

1.1 Mustache语法

• 如何将data中的文本数据，插入到HTML中呢？
  • 我们已经学习过了，可以通过Mustache语法(也就是双大括号)
  • Mustache: 胡子/胡须.
• 我们可以像下面这样来使用，并且数据是响应式

<div id="app">
  <h2>{{message}}h2>
  <h2>{{message}}, 李银河!h2>

  
  <h2>{{firstName + lastName}}h2>
  <h2>{{firstName + ' ' + lastName}}h2>
  <h2>{{firstName}} {{lastName}}h2>
  <h2>{{counter * 2}}h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    }
  })
script>

1.2 v-once语法

• 在某些情况下，我们可能不希望界面随意的跟随改变
  • 这个时候，我们就可以使用一个Vue的v-once指令
• 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
• 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<div id="app">
  <h2>{{message}}h2>
  <h2 v-once>{{message}}h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

1.3 v-html语法

• 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出
  • 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容
• 如果我们希望解析出HTML展示
  可以使用v-html指令
  - 该指令后面往往会跟上一个string类型
  - 会将string的html解析出来并且进行渲染

<div id="app">
  <h2>{{url}}h2>
  <h2 v-html="url">h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '百度一下'
    }
  })
script>

###### 1.4 v-text语法

• v-text作用和Mustache比较相似：都是用于将数据显示在界面中
• v-text通常情况下，接受一个string类型
• v-text不够灵活，会将标签中的文本内容覆盖

<div id="app">
  <h2>{{message}}, Vue.js!h2>
  <h2 v-text="message">, Vue.js!h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

1.4 v-pre语法

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法
• 比如下面的代码：
  • 第一个h2元素中的内容会被编译解析出来对应的内容
  • 第二个h2元素中会直接显示{{message}}

<div id="app">
  <h2>{{message}}h2>
  <h2 v-pre>{{message}}h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

1.5 v-cloak语法

• 在网络不佳或者加载js卡顿情况下，我们浏览器可能会直接显然出未编译的Mustache标签
• 当Vue实例加载出来的时候，再显示html
• cloak: 斗篷

<style>
  [v-cloak] {
    display: none;
  }
style>
<div id="app" v-cloak>
  <h2>{{message}}h2>
div>

<script src="../../vue.js">script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
script>

2. 绑定属性

2.1 v-bind 介绍

• 除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性
• 这个时候，我们可以使用v-bind指令：
  • 作用：动态绑定属性
  • 缩写：:
  • 预期：any (with argument) | Object (without argument)
  • 参数：attrOrProp (optional)

2.2 v-bind 基础

• v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
• 在开发中，有哪些属性需要动态进行绑定呢？
  • 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
• 比如通过Vue实例中的data绑定元素的src和href

<div id="app">
  
  
  
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下a>
  

  
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下a>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
      aHref: 'http://www.baidu.com'
    }
  })
script>

2.3 v-bind 语法

• v-bind有一个对应的语法糖，也就是简写方式
  • 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁
• 简写方式如下：

<div id="app">
	<a :href="link">Vue.js官网a>
	<img :src="logoURL" alt="">
div>

2.4 动态绑定 class

• 很多时候，我们希望动态的来切换class，比如：
  • 当数据为某个状态时，字体显示红色。
  • 当数据另一个状态时，字体显示黑色。
• 绑定class有两种方式：
  • 对象语法
  • 数组语法
• 绑定方式：对象语法
  • 对象语法的含义是:class后面跟的是一个对象
• 对象语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello Worldh2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello Worldh2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello Worldh2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello Worldh2>

• 绑定方式：数组语法
  • 数组语法的含义是:class后面跟的是一个数组
• 数组语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello Worldh2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, ‘line']">Hello Worldh2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello Worldh2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello Worldh2>

2.5 动态绑定样式 style

• 我们可以利用v-bind:style来绑定一些CSS内联样式
• 在写CSS属性名的时候，比如font-size
  • 我们可以使用驼峰式 (camelCase) fontSize
  • 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
• 绑定class有两种方式：
  • 对象语法
  • 数组语法
• 绑定方式：对象语法
  • style后面跟的是一个对象类型
    • 对象的key是CSS属性名称
    • 对象的value是具体赋的值，值可以来自于data中的属性

<h2 :style="{color: currentColor, fontSize: fontSize + 'px'}">{{messages}}h2>

• 绑定方式：数组语法
  • style后面跟的是一个数组类型
    • 多个值以，分割即可

<div v-bind:style="[baseStyles, overridingStyles]">div>

3. 计算属性

3.1 计算属性的介绍

• 在模板中可以直接通过插值语法显示一些data中的数据。
• 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
  • 比如我们有firstName和lastName两个变量，我们需要显示完整的名称
  • 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
• 我们可以将上面的代码换成计算属性：
  • 计算属性是写在实例的computed选项中的

<div id="app">
	<h2>{{firstName}}{{lastName}}h2>
div>
<script>
	const vm = new Vue({
		el: '#app',
		data: {
			firstName: 'Kobe',
			lastName: 'Bryant'
		}
	})
<script>

• 替换为：

<div id="app">
	<h2>{{fullName}}h2>
div>
<script>
	const vm = new Vue({
		el: '#app',
		computed: {
			fullName(){
				return this.firstName + '' + this.lastName
			}
		}
	})
<script>

3.2 计算属性的复杂操作

<div id="app">
  <h2>总价格: {{totalPrice}}h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result
      }
    }
  })
script>

3.3 计算属性的setter和getter

• 每个计算属性都包含一个getter和一个setter
  在上面的例子中，我们只是使用getter来读取
  在某些情况下，你也可以提供一个setter方法（不常用）
  在需要写setter的时候，代码如下：

computed: {
  fullName: {
    set: function(newValue) {
      // console.log('-----', newValue);
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    },
    get: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
}

3.4 计算属性的缓存

• methods和computed区别
  • 计算属性computed会进行缓存，如果多次使用时，计算属性只会调用一次
  • 而方法属性methods会多次调用

<div id="app">
	<div>{{fullName}}div>
	<div>{{fullName}}div>
	<div>{{fullName}}div>
	<div>{{getFullName()}}div>
	<div>{{getFullName()}}div>
	<div>{{getFullName()}}div>
div>

computed: {
	fullName(){
		console.log('执行fullName的计算属性');
		return this.firstName + ' ' + this.lastName;
	}
},
methods: {
	getFullName(){
		console.log('执行getFullName的方法');
		return this.firstName + ' ' + this.lastName;
	}
}

4. 事件监听

4.1 v-on介绍

• 在前端开发中，我们需要经常和用于交互
  • 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
  • 在Vue中使用v-on指令监听事件
• v-on介绍
  • 作用：绑定事件监听器
  • 缩写：@
  • 预期：Function | Inline Statement | Object
  • 参数：event

4.2 v-on基础

• 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
  • 下面的代码中，我们使用了v-on:click="counter++”
  • 另外，我们可以将事件指向一个在methods中定义的函数

<div id="app">
  <h2>点击次数: {{counter}}h2>
  <button v-on:click="counter++">按钮点击button>
  <button v-on:click="btnClick">按钮点击button>
div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick(){
      	this.counter++
      }
    }
  })
script>

• 注：v-on也有对应的语法糖：
  • v-on:click可以写成@click

<div id="app">
  <h2>点击次数: {{counter}}h2>
  <button @click="counter++">按钮点击button>
  <button @click="btnClick">按钮点击button>
div>

4.3 v-on参数

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加
  • 注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
• 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<div id="app">
  <h2>点击次数: {{counter}}h2>
  <button @click="handleAdd">+1button>
  <button @click="handleAddTen(10,$event)">+10button>
div>

methods: {
	handleAdd(event){
		console.log(event);
		this.counter++
	},
	handleAddTen(count,event){
		console.log(event);
		this.counter += 10;
	}
}

4.4 v-on修饰符

• 在某些情况下，我们拿到event的目的可能是进行一些事件处理
• Vue提供了修饰符来帮助我们方便的处理一些事件：
  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
  • .native - 监听组件根元素的原生事件
  • .once - 只触发一次回调

1. 停止冒泡
<button @click.stop="doThis">button>
2. 阻止默认行为
<button @click.prevent="doThis">button>
3. 阻止默认行为，没有表达式
<form @submit.prevent>form>
4. 串联修饰符
<button @click.stop.prevent="doThis">button>
5. 键修饰符，键别名
<input @keyup.enter="onEnter">
6. 键修饰符，键代码
<input @keyup.13="onEnter">
7. 点击回调只会触发一次
<button @click.once="doThis">button>

5. 条件和循环

5.1 条件渲染

• v-if、v-else-if、v-else
  • 这三个指令与JavaScript的条件语句if、else、else if类似。
  • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
• 简单的案例演示：

<div id="app">
  <h2 v-if="score>=90">优秀h2>
  <h2 v-else-if="score>=80">良好h2>
  <h2 v-else-if="score>=60">及格h2>
  <h2 v-else>不及格h2>
div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99
    }
  })
script>

• v-if的原理：
  • v-if后面的条件为false时，对应的元素以及其子元素不会渲染
  • 也就是根本没有不会有对应的标签出现在DOM中

5.2 v-show指令

• v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
• v-if和v-show对比
• v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
  • v-if当条件为false时，压根不会有对应的元素在DOM中
  • v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
• 开发中如何选择呢？
  • 当需要在显示与隐藏之间切片很频繁时，使用v-show
  • 当只有一次切换时，通过使用v-if

<div id="app">
  <button @click="toggle">切换显示button>
  <h2 v-show="isShow">我要不要显示呢h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
    	toggle() {
    		this.isShow = !this.isShow
    	}
    }
  })
script>

5.3 v-for指令

• 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成
  • v-for的语法类似于JavaScript中的for循环
  • 格式如下：item in items的形式
• 我们来看一个简单的案例：
• 如果在遍历的过程中不需要使用索引值
  • v-for="movie in movies"
  • 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
• 如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
  • 语法格式：v-for=(item, index) in items
  • 其中的index就代表了取出的item在原数组的索引值

<div id="app">
	<ul>
		<li v-for="item in movies">{{item}}li>
		<li v-for="(movie,index) in movies">{{index+1}}.{{movie}}li>
	ul>
div>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			movies: [
				'星际穿越','盗墓笔记','大话西游','少年派'
			]
		}
	})
script>

• v-for可以用户遍历对象：
  • 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来

<div id="app">
	<ul>
		<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}li>
	ul>
div>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			info: [
				name: 'xxx',
				age: 18,
				height: 1.80
			]
		}
	})
script>

5.4 组件的key属性

• 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性
• 为什么需要这个key属性呢（了解）？
  • 这个其实和Vue的虚拟DOM的Diff算法有关系。
  • 这里我们借用React’s diff algorithm中的一张图来简单说明一下：
• 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
  • 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
  • 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
• 所以我们需要使用key来给每个节点做一个唯一标识
  • Diff算法就可以正确的识别此节点
  • 找到正确的位置区插入新的节点
• 所以一句话，key的作用主要是为了高效的更新虚拟DOM
  

5.5 检测数组更新

• 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新
• Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

methods: {
	updateData: function(){
		// 响应式数组方法
		// 1. push方法
		this.names.push('xxx','zs')
		// 2. pop方法
		this.names.pop()
		// 3. unshift方法
		this.names.unshift('xxx','zs')
		// 4. shift方法
		this.names.shift()
		// 5. splice方法
		// 传递一个参数(index):将对应index，以及后面的所有数据删除掉
		this.names.splice(2)
		// 6. sort排序数据
		this.names.sort()
		// 7. reverse反转数据
		this.names.reverse()

		// 注意: 通过索引值修改数组中的元素(不可响应式)
        this.letters[0] = 'bbbbbb';
        // 通过以下方法
        this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        Vue.set(this.letters, 0, 'bbbbbb')		

6. 表单绑定

6.1 基本使用

• 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
• Vue中使用v-model指令来实现表单元素和数据的双向绑定
• 案例的解析：
  • 当我们在输入框输入内容时
  • 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
  • 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
  • 所以，通过v-model实现了双向的绑定。
• 当然，我们也可以将v-model用于textarea元素

<div id="app">
  <input type="text" v-model="message">
  {{message}}
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

6.2 v-model原理

• v-model其实是一个语法糖，它的背后本质上是包含两个操作：
  • v-bind绑定一个value属性
  • v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
等于下面代码
<input type="text" :value="message" @input="message = $event.target.value">

6.3 v-model 绑定其他属性

• v-model: radio
  • 当存在多个单选框时

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  label>
  <h2>您选择的性别是: {{sex}}h2>
div>

<script src="../../vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: '女'
    }
  })
script>

• v-model: checkbox
  • 复选框分为两种情况：单个勾选框和多个勾选框
    • 单个勾选框：
      • v-model即为布尔值
      • 此时input的value并不影响v-model的值
    • 多个复选框：
      • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组
      • 当选中某一个时，就会将input的value添加到数组中

<div id="app">
	
	<label for="check">
		<input type="checkbox" id="check" v-model="checked">同意协议
	label>
  	<p>是否选中: {{checked}}p>

	
	<label><input type="checkbox" v-model="hobbies" value="篮球">篮球label>
	<label><input type="checkbox" v-model="hobbies" value="足球">足球label>
	<label><input type="checkbox" v-model="hobbies" value="台球">台球label>
	<p>您选中的爱好: {{hobbies}}p>
div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      checked: false, // 单选框
      hobbies: [], // 多选框
  })
script>

• v-model：select
  • 和checkbox一样，select也分单选和多选两种情况
  • 单选：只能选中一个值。
    • v-model绑定的是一个值。
    • 当我们选中option中的一个时，会将它对应的value赋值到mySelect中
  • 多选：可以选中多个值。
    • v-model绑定的是一个数组。
    • 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<select name="abc" v-model="mySelect">
  <option value="苹果">苹果option>
  <option value="香蕉">香蕉option>
  <option value="榴莲">榴莲option>
  <option value="葡萄">葡萄option>
select>
<h2>您选择的水果是: {{mySelect}}h2>


<select name="abc" v-model="mySelects" multiple>
  <option value="苹果">苹果option>
  <option value="香蕉">香蕉option>
  <option value="榴莲">榴莲option>
  <option value="葡萄">葡萄option>
select>
<h2>您选择的水果是: {{mySelects}}h2>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      mySelect: '香蕉',
      mySelects: []
    }
  })
script>

6.4 值绑定

• 值绑定就是动态的给value赋值而已：
  • 我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的
  • 但是真实开发中，这些input的值可能是从网络获取或定义在data中的
  • 所以我们可以通过v-bind:value动态的给value绑定值

  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  label>
  <script>
	  const app = new Vue({
	    el: '#app',
	    data: {
	      hobbies: [], // 多选框,
	      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
	    }
	  })
script>

6.5 修饰符

• lazy修饰符：
  • 默认情况下，v-model默认是在input事件中同步输入框的数据的
  • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
  • lazy修饰符可以让数据在失去焦点或者回车时才会更新：
• number修饰符：
  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
  • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
  • number修饰符可以让在输入框中输入的内容自动转成数字类型：
• trim修饰符：
  • 如果输入的内容首尾有很多空格，通常我们希望将其去除
  • trim修饰符可以过滤内容左右两边的空格

<input type="text" v-model.lazy="message">
<h2>{{message}}h2>


<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}h2>


<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}h2>

3. 组件化开发

1. 认识组件化

1.1 什么是组件化

• 人面对复杂问题的处理方式：
  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
  • 但是，我们人有一种天生的能力，就是将问题进行拆解
  • 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解
• 组件化也是类似的思想：
  • 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
  • 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了
    
    
• 我们将一个完整的页面分成很多个组件
• 每个组件都用于实现页面的一个功能块
• 而每一个组件又可以进行细分

1.2 Vue组件化思想

• 组件化是Vue.js中的重要思想
  • 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  • 任何的应用都会被抽象成一颗组件树
    
• 组件化思想的应用：
  • 有了组件化的思想，我们在之后的开发中就要充分的利用它
  • 尽可能的将页面拆分成一个个小的、可复用的组件
  • 这样让我们的代码更加方便组织和管理，并且扩展性也更强

2. 组件化基础

1. 注册组件

1.1 注册的基本步骤

• 组件的使用分成三个步骤：
  • 创建组件构造器
  • 注册组件
  • 使用组件
• 我们来看看通过代码如何注册组件
• 查看运行结果：
  • 和直接使用一个div看起来并没有什么区别。
  • 但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用来完成

<div id="app">
  
  <my-cpn>my-cpn>
div>
<script>
// 1.创建组件构造器对象(步骤一）
const myComponent = Vue.extend({
  template: `
    

      
组件标题
      
我是组件中的一个段落内容
    
`
})

// 2.注册组件，并且定义组件标签的名称（步骤二）
Vue.component('my-cpn', myComponent)

const app = new Vue({
  el: '#app'
})
script>

1.2 注册组件步骤解析

• Vue.extend()
  • 调用Vue.extend()创建的是一个组件构造器
  • 通常在创建组件构造器时，传入template代表我们自定义组件的模板
  • 该模板就是在使用到组件的地方，要显示的HTML代码
  • 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础
• Vue.component()
  • 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称
  • 所以需要传递两个参数：
    • 注册组件的标签名
    • 组件构造器
• 组件必须挂载在某个Vue实例下，否则它不会生效

2. 全局和局部组件

• 当我们通过调用Vue.component()注册组件时，组件的注册是全局的
  • 这意味着该组件可以在任意Vue示例下使用
• 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
• 全局组件

<div id="app">
  <my-cpn>my-cpn>
div>
<div id="app2">
  
  <my-cpn>my-cpn>
div>
<script>
	const cpnC = Vue.extend({
		template: `
			

				
组件标题
				
组件内容
			
`
	})
		
	Vue.component('my-cpn',cpnC)
	
	const app = new Vue({
	    el: '#app'
	})
script>

• 局部组件

<div id="app">
  <my-cpn>my-cpn>
div>
<script>
	const cpnC = Vue.extend({
		template: `
			

				
组件标题
				
组件内容
			
`
	})
	
	const app = new Vue({
	    el: '#app',
	    components: {
	    	my-cpn: cpnC
	    }
	})
script>

3. 父组件和子组件

• 在前面我们看到了组件树：
  • 组件和组件之间存在层级关系
  • 而其中一种非常重要的关系就是父子组件的关系
• 我们来看通过代码如何组成的这种层级关系：

<div id="app">
  <cpn2>cpn2>
  
div>

<script src="../vue.js">script>
<script>
  // 1.创建第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      

        
我是子组件
      
    `
  })
  // 2.创建第二个组件构造器(父组件)
  const cpnC2 = Vue.extend({
    template: `
      

        
我是父组件
        
      
    `,
    components: {
      cpn1: cpnC1
    }
  })
  // root组件
  const app = new Vue({
    el: '#app',
    components: {
      cpn2: cpnC2
    }
  })
script>

• 父子组件错误用法：以子标签的形式在Vue实例中使用
  • 因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
  • 该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
  • 是只能在父组件中被识别的
  • 类似这种用法，是会被浏览器忽略的

4. 注册组件语法糖

• 在上面注册组件的方式，可能会有些繁琐
  • Vue为了简化这个过程，提供了注册的语法糖
  • 主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替
• 语法糖注册全局组件和局部组件：
• 全局组件

// 2.注册组件
Vue.component('cpn1', {
  template: `
    

      
我是标题1
      
我是内容, 哈哈哈哈
    
  `
})

• 局部组件

// 2.注册局部组件的语法糖
const app = new Vue({
  el: '#app',
  components: {
    'cpn2': {
      template: `
        

          
我是标题2
          
我是内容, 呵呵呵
        
  		`
    }
  }
})

5. 模板的分离写法

• 我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法
• 如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰
• Vue提供了两种方案来定义HTML模块内容：
  • 使用

你可能感兴趣的:(#,前端进阶)

• 2024大厂高级前端面试题汇总！ 前端小羽——互联网大厂 前端react.js前端框架
  以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！阿里使用过的koa2中间件koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍pm2master挂了的话pm2怎
• 前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧 VaporGas 前端前端javascripthtmlhtml5ecmascript开发语言
  表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo
• 350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面 2401_86400095 前端
  **1.HTML2.CSS3.前端基础4.前端核心5.前端进阶6.移动端开发7.计算机基础8.算法与数据结构9.设计模式10.项目11.职业发展12.Hr面**正文HTML1.浏览器页面有哪三层构成，分别是什么，作用是什么?2.HTML5的优点与缺点？3.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?4.HTML5有哪些新特性、移除了哪些元素？5.你做的网页在哪些浏览器测试过,这些
• 前端进阶｜一文理解柯里化的逆操作，什么是反柯里化 anyup_前端梦工厂 精通前端前端javascript
  温故而知新在说反柯里化之前，先来复习下柯里化的基础。之前文章，我们了解了什么是柯里化，以及柯里化的实现原理，同时我们也明白了什么情况下我们使用柯里化，详细阅读参见之前文章《前端进阶｜由浅入深的理解函数柯里化的实现与应用》，今天我们来了解一下反柯里化。那什么是反柯里化呢？？是与柯里化相反吗？？书中对反柯里化的作用做了介绍：反柯里化是为了扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意
• LEARN_前端进阶_深浅拷贝原理 POWER!
  详细解析赋值、浅拷贝和深拷贝的区别赋值（Copy）赋值是将某一数组或对象赋给某个变量的过程，分类下面2部分：基本数据类型：赋值，赋值之后两个变量互不影响引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响对基本类型进行赋值操作，两个变量互不影响。//木易杨leta="muyiy";letb=a;console.log(b);//muyiya="change";console.
• 《前端之路》之 JavaScript 进阶技巧之高阶函数（下） ankuailan3925 前端javascriptViewUI
  目录第二章-03：前端进阶技巧之高阶函数一、防篡改对象1-1：Configurable和Writable1-2：Enumerable1-3：get、set2-1：不可扩展对象2-2：密封的对象2-3：冻结的对象二、自定义事件第二章-03：前端进阶技巧之高阶函数一、防篡改对象JavaScript共享的本质一直是开发人员心头的痛，因为任何对象都可以被在同一个环境中运行的代码修改。ECMAScript5
• DNS寻址过程 ohMyGod_123 DNS寻址网络基础
  用一张图详细的描述DNS寻址的过程，是高级前端进阶的网络篇：主要是第三步要记仔细就行啦，每一步都要详细的记录下来，总结的脉络如下：本地DNS缓存本地DNS服务器根域名服务器顶级域名服务器再次顶级域名服务器权威域名服务器将IP地址返回给本地DNS服务器存储到DNS缓存，并且将IP地址给DNS解析器返回给浏览器如上的简短概括一下，整个的流程要记清楚，方便在面试的时候跟面试官对答如流，字字珠玑，把他给说
• 前端进阶-可视化（echarts） 江南一舟110 前端进阶前端echartsjavascript
  1.引入echarts到vue3工程import*asechartsfrom'echarts'app.config.globalProperties.$echarts=echarts2.各种图形绘制：1.柱状图：<divclass=
• Docker 的基本概念和优势，以及在应用程序开发中的实际应用。 SHOW科技 dockereureka容器
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• 好家伙，这些写 CSS 的新姿势你还不知道？ yck 恺哥 javaweexhtmlreactnativegwt
  点击上方蓝字关注前端真好玩，从此前端进阶不再难现在大部分搞前端的应该还是这样写CSS的：.mock {    margin: auto;    font-size: 16px;    // ...}mock以上代码就是举个例子，大部分情况应该都是写一个类，然后整一堆样式进去。但是这种方式写多了以后，你应该会感受到一些痛点，比如说：取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范
• 前端进阶_狂神Vue笔记_前端核心分析_前端发展史_前后分离的演变史 1017w vue.jsjavascripthtml
  Vue笔记想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。一、前端核心分析1.1、概述Soc原则：关注点分离原则Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数
• vue3、React之父子组件传参 芳草斜阳_晨光 react.js前端前端框架
  提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、vue3父子组件间传值父组件向子组件传值1、父组件传值2、子组件接收数据子组件向父组件传值1、子组件传值2、父组件接收数据二、React父子组件间传值父组件向子组件传值1、父组件传值，子组件接收数据2、子组件传值，父组件接收数据总结前言vue3和react是前端进阶必不可少的工具，其中组件之间的传值更是核心内容。这一篇
• registermodule 微前端_微前端实战看这篇就够了 - Vue项目篇 weixin_39603492 registermodule微前端
  wl-micro-frontends[wl-qiankun]本项目采用vue+qiankun实践微前端落地。同时qiankun是一个开放式微前端架构，支持当前三大前端框架甚至jq等其他项目无缝接入。此项目为了尽可能的简单易上手，以及方便文章讲解，大部分逻辑都在主应用和子应用的main.js来回施展，实际项目应用可不要如此粗暴，要有优雅的架构设计。另有微前端进阶实战项目：基于vue3.0-beta及
• 计算机视觉（CV）技术的优势和挑战 SHOW科技 前端
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• Apache Spark 的基本概念和在大数据分析中的应用。 SHOW科技 spark数据分析大数据
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• 区块链技术的应用场景和优势。 SHOW科技 区块链
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• jq 实现文件下载 SHOW科技 javascript前端html
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• VUE路由跳转传参的七种方法 SHOW科技 vue.jsjavascript前端vue
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• 人工智能在现代科技中的应用和未来发展趋势。 SHOW科技 人工智能
  个人主页：SHOW科技，公众号：SHOW科技‍♂️作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！优质专栏：前端主流技术分享资料领取：前端进阶资料可以找我免费领取摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！————————————————版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC4.0BY-SA版权协议，转载请附
• 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新 weixin_44869631 html5vue.jscss3typescriptreactjs
  文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vuereactnode.js全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css和js热点面试题文档答案Vue面试题生命周期函数面试题1.什么是vue生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具
• 前端面试题精编2020（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新 MingL520 面试html5vue.jscsstypescriptreactjs
  文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vuereactnode.js全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css和js热点面试题文档答案Vue面试题生命周期函数面试题1.什么是vue生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具
• 低代码——前端进阶的必修课 白日梦批发商 低代码前端
  近年来，随着技术的不断发展，前端开发工作变得越来越重要。作为初中级前端工程师，我们始终在追求进步，不断探索新技术、新思路，以提升自己的竞争力。而如今，学习低代码技术已刻不容缓。在这篇文章中，我将为大家介绍前端进阶的高级指南，重点探讨低代码技术在前端开发中的巨大潜力。众所周知，前端开发是一个需要不断创新和迭代的领域。在过去，我们常常需要手动编写大量的代码，从头构建整个系统，这无疑对我们的技术能力提出
• 【组件化开发】前端进阶篇之如何编写可维护可升级的代码 weixin_30567471 前端ui测试ViewUI
  前言我还在携程的做业务的时候，每个看似简单的移动页面背后往往会隐藏5个以上的数据请求，其中最过复杂的当属机票与酒店的订单填写业务代码这里先看看比较“简单”的机票代码：然后看看稍微复杂的酒店业务逻辑：机票一个页面的代码量达到了5000行代码，而酒店的代码竟然超过了8000行，这里还不包括模板（html）文件！！！然后初略看了机票的代码，就该页面可能发生的接口请求有19个之多！！！而酒店的的交互DOM
• 前端进阶必备技能-JS位运算 高灯GFE javascript前端
  1.前言众所周知，位运算是我们学计算机必学的东西，平时的数组运算，其实是要先转换成二进制再进行运算的，而位运算就是直接进行二进制运算，位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并且借助位运算的特性还能实现一些算法。恰当地使用运算有很多好处，前人用二进制、位运算给我们了一个操作简单的计算机，但我们却很少接触位运算了。所有的位运算都是在二进制下来进行运算的，再二进制
• 百家争鸣的低代码平台 前端点线面 可视化大数据编程语言人工智能java
  大家好，我是前端点线面，毕业于华中科技大学，非科班出身的一枚新时代农民工，现在是百度前端研发工程师，著有《前端百题斩》、数十篇学习思维导图（go、React、Redux、Vue、Vuex、操作系统、Linux、设计模式、js、webpack、nginx）以及大量前端进阶文章，大量同学已通过号主的系列内容获取心仪的offer，关注他获取海量资料、交流工作心得并进卧虎藏龙交流群。无论大公司还是小公司，
• 前端进阶-react(3) 努力学习的廖同学 前端react.jsjavascript
  1.安装ts版项目create-react-appmy-app--templatetypescriptts语法//String(原生的构造函数)vsstring(ts中的类型)varmyname:string="字符"varmybool:boolean=falsevarmynumber:number=100varmylist:Array=["111","222","3333"]varmyname2
• 前端进阶|第三天 集合字典全家桶set&weekset&map&weakmap 皮卡球ca
  1set强大数组，可同时存储不同类型的成员，自动去重。构造函数newSet([iterable])consts=newSet();[1,2,3,4,3,2,1].forEach(x=>s.add(x))属性size：元素数量方法：add(value)：新增，相当于array里的pushdelete(value)：存在即删除集合中valuehas(value)：判断集合中是否存在valueclear
• 滴滴前端面试题合集 语无伦次￥！ 前端框架javascript
  前端进阶面试题详细解答DNS记录和报文DNS服务器中以资源记录的形式存储信息，每一个DNS响应报文一般包含多条资源记录。一条资源记录的具体的格式为（Name，Value，Type，TTL）其中TTL是资源记录的生存时间，它定义了资源记录能够被其他的DNS服务器缓存多长时间。常用的一共有四种Type的值，分别是A、NS、CNAME和MX，不同Type的值，对应资源记录代表的意义不同：如果Type=A
• 奇舞周刊第 340 期：前端进阶十日谈 奇舞周刊
  记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■■■前端进阶十日谈月影大大前端进阶课程中的全部例子代码。已star~从构建进程间缓存设计谈Webpack5优化和工作原理本文介绍了Webpack5最令人期待的“长效缓存”功能的前世今生，技术背景以及落地方案。以及Webpack整体构建流程。我在阿里做中后台开发“从懵懂到笃定的过程中，我们搞清了这件事：找到你垂直的场景并发
• 【前端】学习路线和推荐书籍，爆肝1万字，学习不迷路 有请小发菜 前端前端学习
  目录1.前端⻅解2.前端的学习路线2.1前端基础知识2.2建立HTML和CSS基础2.3深入学习JavaScript2.4学习前端工具2.5高级JavaScript和框架2.6前端进阶主题2.7实践项目和部署2.8参与社区和项目3.学习书籍推荐4.总结1.前端⻅解我认为前端是对新入⻔学习编程的同学最为合适的一种技术，没有之一。原因有以下几点:javescript是一种弱类型语言：较为随意，对新手友
• springmvc 下 freemarker页面枚举的遍历输出 杨白白 enumfreemarker
  spring mvc freemarker 中遍历枚举 1枚举类型有一个本地方法叫values（），这个方法可以直接返回枚举数组。所以可以利用这个遍历。 enum public enum BooleanEnum { TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否");
• 实习简要总结 byalias 工作
  来白虹不知不觉中已经一个多月了，因为项目还在需求分析及项目架构阶段，自己在这段 时间都是在学习相关技术知识，现在对这段时间的工作及学习情况做一个总结： （1）工作技能方面 大体分为两个阶段，Java Web 基础阶段和Java EE阶段 1）Java Web阶段 在这个阶段，自己主要着重学习了 JSP, Servlet, JDBC, MySQL，这些知识的核心点都过 了一遍，也
• Quartz——DateIntervalTrigger触发器 eksliang quartz
  转载请出自出处：http://eksliang.iteye.com/blog/2208559 一.概述 simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间，这就导致他有不适合调度的定时任务。例如我们想每天的 1：00AM 执行任务，如果使用 SimpleTrigger，间隔时间就是一天。注意这里就会有一个问题，即当有 misfired 的任务并且恢复执行时，该执行时间
• Unix快捷键 18289753290 unixUnix；快捷键;
  复制，删除，粘贴： dd:删除光标所在的行                             &nbs
• 获取Android设备屏幕的相关参数 酷的飞上天空 android
  包含屏幕的分辨率  以及 屏幕宽度的最大dp 高度最大dp   TextView text = (TextView)findViewById(R.id.text); DisplayMetrics dm = new DisplayMetrics(); text.append("getResources().ge
• 要做物联网？先保护好你的数据 蓝儿唯美 数据
  根据Beecham Research的说法，那些在行业中希望利用物联网的关键领域需要提供更好的安全性。 在Beecham的物联网安全威胁图谱上，展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。 Beecham Research的技术主管Jon Howes说：“之所以我们目前还没有看到与物联网相关的严重安全事件，是因为目前还没有在大型客户和企业应用中进行部署，也就
• Java取模（求余）运算 随便小屋 java
          整数之间的取模求余运算很好求，但几乎没有遇到过对负数进行取模求余，直接看下面代码： /** * * @author Logic * */ public class Test { public static void main(String[] args) { // TODO A
• SQL注入介绍 aijuans sql注入
  二、SQL注入范例 这里我们根据用户登录页面 <form action="" > 用户名：<input type="text" name="username"><br/> 密 码：<input type="password" name="passwor
• 优雅代码风格 aoyouzi 代码
  总结了几点关于优雅代码风格的描述： 代码简单：不隐藏设计者的意图，抽象干净利落，控制语句直截了当。 接口清晰：类型接口表现力直白，字面表达含义，API 相互呼应以增强可测试性。 依赖项少：依赖关系越少越好，依赖少证明内聚程度高，低耦合利于自动测试，便于重构。 没有重复：重复代码意味着某些概念或想法没有在代码中良好的体现，及时重构消除重复。 战术分层：代码分层清晰，隔离明确，
• 布尔数组 百合不是茶 java布尔数组
    androi中提到了布尔数组;   布尔数组默认的是false,  并且只会打印false或者是true   布尔数组的例子;  根据字符数组创建布尔数组 char[] c = {'p','u','b','l','i','c'}; //根据字符数组的长度创建布尔数组的个数 boolean[] b = new bool
• web.xml之welcome-file-list、error-page bijian1013 javaweb.xmlservleterror-page
  welcome-file-list 1.定义： <welcome-file-list> <welcome-file>login.jsp</welcome> </welcome-file-list>  2.作用：用来指定WEB应用首页名称。   error-page1.定义： <error-page&g
• richfaces 4 fileUpload组件删除上传的文件 sunjing clearRichfaces 4fileupload
   页面代码               <h:form id="fileForm">            <rich:
• 技术文章备忘 bit1129 技术文章
  Zookeeper http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV
• org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案 白糖_ Hibernate
  文章摘自：http://blog.csdn.net/yangwawa19870921/article/details/7553181   在编写HQL时，可能会出现这种代码： select a.name,b.age from TableA a left join TableB b on a.id=b.id  如果这是HQL，那么这段代码就是错误的，因为HQL不支持
• sqlserver按照字段内容进行排序 bozch 按照内容排序
  在做项目的时候，遇到了这样的一个需求：           从数据库中取出的数据集，首先要将某个数据或者多个数据按照地段内容放到前面显示，例如:从学生表中取出姓李的放到数据集的前面；          select * fro
• 编程珠玑-第一章-位图排序 bylijinnan java编程珠玑
  import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.Random; public class BitMapSearch {
• Java关于==和equals chenbowen00 java
  关于==和equals概念其实很简单，一个是比较内存地址是否相同，一个比较的是值内容是否相同。虽然理解上不难，但是有时存在一些理解误区，如下情况： 1、 String a = "aaa"; a=="aaa"; ==> true 2、 new String("aaa")==new String("aaa
• [IT与资本]软件行业需对外界投资热情保持警惕 comsci it
        我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...       如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然
• oracle 数据块结构 daizj oracle块数据块块结构行目录
  oracle 数据块是数据库存储的最小单位，一般为操作系统块的N倍。其结构为： 块头－－〉空行－－〉数据，其实际为纵行结构。 块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块（Standard Block）。块的大小和标准块的大小不同的块叫非标准块（Nonstandard Block）。同一数据库中，Oracle9i及以上版本支持同一数据库中同时使用标
• github上一些觉得对自己工作有用的项目收集 dengkane github
  github上一些觉得对自己工作有用的项目收集 技能类 markdown语法中文说明 回到顶部 全文检索 elasticsearch bigdesk elasticsearch管理插件 回到顶部 nosql mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用 C
• 初二上学期难记单词二 dcj3sjt126com englishword
  dangerous 危险的 panda 熊猫 lion 狮子 elephant 象 monkey 猴子 tiger 老虎 deer 鹿 snake 蛇 rabbit 兔子 duck 鸭 horse 马 forest 森林 fall 跌倒；落下 climb 爬；攀登 finish 完成；结束 cinema 电影院；电影 seafood 海鲜；海产食品 bank 银行
• 8、mysql外键(FOREIGN KEY)的简单使用 dcj3sjt126com mysql
  一、基本概念 1、MySQL中“键”和“索引”的定义相同，所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引，但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引，InnoDB不能自动地创建索引。 2、外键可以是一对一的，一个表的记录只能与另一个表的一条记录连接，或者是一对多的，一个表的记录与另一个表的多条记录连接。 3、如
• java循环标签 Foreach shuizhaosi888 标签java循环foreach
  1. 简单的for循环 public static void main(String[] args) { for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) { System.err.println("i=" + i + " y="
• Spring Security（05）——异常信息本地化 234390216 exceptionSpring Security异常信息本地化
  异常信息本地化          Spring Security支持将展现给终端用户看的异常信息本地化，这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息（如配置错误）则是不能够进行本地化的，它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x
• DUBBO架构服务端告警Failed to send message Response javamingtingzhao 架构DUBBO
   废话不多说，警告日志如下，不知道有哪位遇到过，此异常在服务端抛出(服务器启动第一次运行会有这个警告)，后续运行没问题，找了好久真心不知道哪里错了。    WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)
• JS中Date对象中几个用法 leeqq JavaScriptDate最后一天
  近来工作中遇到这样的两个需求 1. 给个Date对象，找出该时间所在月的第一天和最后一天 2. 给个Date对象，找出该时间所在周的第一天和最后一天   需求1中的找月第一天很简单，我记得api中有setDate方法可以使用 使用setDate方法前，先看看getDate var date = new Date(); console.log(date); // Sat J
• MFC中使用ado技术操作数据库 你不认识的休道人 sqlmfc
  1.在stdafx.h中导入ado动态链接库 #import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti
• Android Studio加速 rensanning android studio
  Android Studio慢、吃内存！启动时后会立即通过Gradle来sync & build工程。 （1）设置Android Studio a) 禁用插件 File -> Settings...  Plugins 去掉一些没有用的插件。 比如：Git Integration、GitHub、Google Cloud Testing、Google Cloud
• 各数据库的批量Update操作 tomcat_oracle javaoraclesqlmysqlsqlite
  MyBatis的update元素的用法与insert元素基本相同，因此本篇不打算重复了。本篇仅记录批量update操作的 sql语句，懂得SQL语句，那么MyBatis部分的操作就简单了。 　　注意：下列批量更新语句都是作为一个事务整体执行，要不全部成功，要不全部回滚。 MSSQL的SQL语句 　WITH R AS（ 　　SELECT 'John' as name, 18 as
• html禁止清除input文本输入缓存 xp9802 input
  多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.