Vue3学习_html-js-css

Vue3新特性
更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计Vue3带来的变化(性能)
Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的；这种方式存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；
Vue3是使用Proxy进行数据劫持。Vue初体验

<div id="app">div>
<script src="https://unpkg.com/vue@next">script>
<script>
  //第一种写法
  /* const why = {
    template: "嗨"
  }
  const app = Vue.createApp(why);
  app.mount("#app") */

  //第二种简写 
  Vue.createApp({
    template: `嗨嗨嗨`
  }).mount("#app") 
script>

template属性
方式一：使用script标签，并且标记它的类型为 x-template；

<script type="x-template" id="why">
  <div>
    <h2>{{counter}}</h2>
    <button @click='increment'>+1</button>
    <button @click='decrement'>-1</button>
  </div>
script>

方式二：通常使用template标签，因为不会被浏览器渲染，设置id；

<template id="why">
 <div>
   <h2>{{counter}}h2>
   <button @click='increment'>+1button>
   <button @click='decrement'>-1button>
 div>
template>

在createApp的对象中，我们需要传入的template以 # 开头：如果字符串是以 # 开始，那么它将被用作 querySelector，并且使用匹配元素的 innerHTML 作为模板字符串;

data属性
Vue3必须传入一个函数，并且该函数需要返回一个对象。
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理，所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据methods属性
methods属性是一个对象，通常我们会在这个对象中定义很多的方法：这些方法可以被绑定到 template 模板中；在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
注意：不能使用箭头函数来定义methods函数（例如plus: => this.a++）。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向组件实例，this.a将是undefined。
不使用箭头函数的情况下，this到底指向的是什么?vue3的源码
下载源代码，第一步安装Vue源码项目相关的依赖，执行yarn install；第二步对项目执行打包 *** 作，执行yarn devVSCode设置代码片段
左上角Code——首选项——用户片段——选择html
具体的步骤如下:
第一步：复制自己需要生成代码片段的代码；
第二步：https://snippet-generator.app/在该网站中生成代码片段；
第三步：在VSCode中配置代码片段；Mustache双大括号语法
data返回的对象是有添加到Vue的响应式系统中，当data中的数据发生改变时，对应的内容也会发生更新，当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式、调用methods中的函数、三元运算符。


<h2>{{message}}h2>


<h2>{{counter * 2}}h2>


<h2>{{getReverseMessage()}}h2>


<h2>{{isShow ? "哈哈哈" : "" }}h2>
<button @click="toggle">切换button>

基本指令（主要是将值插入到模板内容中）
v-once用于指定元素或者组件只渲染一次：当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过。
v-text用于更新元素的 textContent等价于{{message}}，v-text缺点是不够灵活。
v-html解析html内容，message: "哈哈哈 "
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
v-cloak用于保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。v-bind绑定属性
v-bind的语法糖是:
可动态绑定的属性：如图片的链接src、网站的链接href、动态绑定一些类、样式等

①绑定属性img、href

<a :href="link">百度一下a>
<img :src="imgSrc" alt="">

②绑定class有两种方式：对象语法；数组语法；



<div :class="{'active': isActive}">哈哈哈div>
<button @click="toggle">切换button>


<div :class="{'active': isActive, 'titles': true}">哈哈哈div>


<div class="haha hehe" :class="{'active': isActive, 'titles': true}">哈哈哈div>


<div class="haha hehe" :class="classObj">哈哈哈div>


<div class="haha hehe" :class="getClassObj()">哈哈哈div>
<script>
data() {
  return {
    isActive: true,
    classObj: {
      active: true,
      titles: true,
      ceshi: true
    }
  }
},
methods: {
  toggle() {
    this.isActive = !this.isActive
  },
  getClassObj() {
    return {
      active: true,
      titles: true,
      ceshi: true,
      lala: true
    }
  }
}
script>



<div :class="['active', titles]">哈哈哈div>


<div :class="['active', titles, isActive? 'active2': '']">哈哈哈div>


<div :class="['active', titles, {active3 :isActive}]">哈哈哈div>
<script>
data() {
  return {
    titles: 'cba',
    isActive: true
  }
}
script>

③绑定style有两种方式：对象语法；数组语法；
CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名;
注意：class名用-拼接的属性key需要加引号；value值必须加引号。



<div :style="{color: textColor, fontSize: '30px', 'background-color': 'blue'}">哈哈哈div>


<div :style="{color: 'red', fontSize: size+'px', 'background-color': 'blue'}">哈哈哈div>


<div :style="styleObj">哈哈哈div>


<div :style="getStyleObj()">呵呵呵div>

<script>
data() {
  return {
    size: '18px',
    textColor: 'green',
    styleObj: {
      fontSize: '50px',
      fontWeight: 700,
      backgroundColor: 'red'
    }
  }
},
methods: {
  getStyleObj() {
    return {
      fontSize: '60px',
      fontWeight: 700,
      backgroundColor: 'red'
    }
  }
}
script>


<div :style="[style1Obj, style2Obj]">哈哈哈div>
<script>
data() {
  return {
    style1Obj: {
      color: 'red',
      fontSize: '30px'
    },
    style2Obj: {
      textDecoration: "underline"
    }
  }
}
script>

④动态绑定属性：属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义

<h2 :[name]="value">{{message}}h2>
<script>
data() {
 return {
   message: '加油',
   name: 'why',
   value: 'kobe'
 }
}
script>

⑤绑定一个对象：将一个对象的所有属性，绑定到元素上显示所有属性。
案例：info对象会被拆解成div的各个属性

<h2 v-bind="info">{{message}}h2>
<script>
data() {
  return {
    message: '呵呵',
    info: {
      name: 'why',
      age: 18,
      height: 188
    }
  }
}
script>

v-on绑定事件
监听用户发生的事件：比如点击、拖拽、键盘事件等等
v-on指令，语法糖（缩写）是@，v-on:click可以写成@click

①基本使用



<h2 v-on:click="counter++">{{counter}}h2>


<h2 @click="btnClick">{{counter}}h2>


<h2 @mousemove="mouseMove">{{counter}}h2>


<h2 v-on="{click: btnClick, mousemove:mouseMove}">特殊按钮h2>

<script>
data() {
  return {
    counter: 100
  }
},
methods: {
  btnClick() {
    console.log("btnClick")
  },
  mouseMove() {
    console.log("mouseMove")
  }
}
script>

②参数传递
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件



<button @click="btn1Click">按钮1button>


<button @click="btn2Click($event, 'coderwhy', 18, 188)">按钮2button>
<script>
methods: {
  btn1Click(event) {
    console.log(event);
  },
  btn2Click(event, name, age, height) {
    console.log(event, name, age, height);
  }
}
script>

③v-on的修饰符
修饰符相当于对事件进行了一些特殊的处理：
.stop - 调用 event.stopPropagation()；停止冒泡。
.prevent - 调用 event.preventDefault()；阻止默认事件。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 p.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器。


<div @click="divClick">
  <button @click.stop="btnClick">按钮button>
div>

<input type="text" @keyup.enter="enterKeyup">
    
<script>
methods: {
	divClick() {
	  console.log("divClick")
	},
	btnClick() {
	  console.log("btnClick")
	},
	enterKeyup() {
    console.log("enterKeyup", event.target.value)//拿到输入的内容
  }
}
script>