vue 入门一

参考：丁丁的哔哩哔哩

1.使用vue

1.1 使用CDN的方式使用Vue
mount和<div id="counter">关联起来
1.2 vue中的createApp

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

vue中的createApp方法将App组件挂载到id=app的HTML页面中。

2.模板语法

2.1 针对HTML元素的内容

// 最基本的数据绑定形式:文本插值，“Mustache”语法
<p>{{ msg }}</p>
// v-once:当数据改变时，插值处的内容不会更新
<p v-once> {{ userName }} </p>  
// v-html:让内容以HTML的形式展示
<p v-html="userName"></p>

2.2 针对HTML元素的属性(attribute)

// v-bind:动态的绑定属性的内容
<p v-bind:id="id"></p>

2.3 使用js表达式

// 在事件中使用
<p @click="id=1" />
// 插值中使用
<p>{{ num + 1 }}</p>
// v-bind中使用
<p v-bind:id="id+1"></p>

2.4 指令

指令是带有v-前缀的特殊attribute，指令还有参数，冒号:后面的即为参数；
指令的值是单个js表达式

2.5 语法糖

// 监听dom事件
v-on:click  --> @click
// 动态绑定HTML元素属性
v-bind:id --> :id

2.6 动态参数

// 原始形式
<p v-bind:id="id+1"></p>
// 动态属性
const attrName="id";
<p v-bind:[attrName]="id+1"></p>
// 动态事件
const mouseOver="click";
<p v-on:[mouseOver]="change"></p>

3.data属性和方法

// data是一个函数，methods是一个对象
export default {
	data(){ return {} }, // 让每一个组件对象都返回一个新的对象，不会造成数据污染
	methods:{}
}

Vue 自动为 methods绑定this ，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this指向。在定义 methods 时应避免便用箭头函数，因为这会阻止 Vue 绑定恰当的this 指向。

4.计算属性 — 模板语法不适宜复杂表达式时

• 计算属性调用时，没加括号，把他当作属性调用；
• 有依赖值，依赖值不变，就不会重新计算，有缓存

<p> {{ wordFlag }} </p>
const wordFlag=computed(()=>{
	return wordFlag ==1 ? true : false
})

5.侦听器

和计算属性类似，在响应数据变化时(依赖值变化)，侦听器适用在需要执行异步或开销较大的操作时。

简单示例

const message=ref("");
watch(message, (newValue,oldValue) => { // 一个数据影响多个数据，而计算属性只能影响一个数据
		console.log(newValue);
		console.log(oldValue);
		// 执行一些异步操作
	})

立即执行 初始化时就调用函数

watch(
  source,
  (newValue, oldValue) => {
    // 立即执行，且当 `source` 改变时再次执行
  },
  { immediate: true }
)

深度监听 适用于响应式对象中的属性
vue3 隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。

<p>{{msg.name}}</p>

const msg = reactive({
  name: "hello world",
  home:{
    mother:"mother",
    father:"father"
  }
})
watch(msg, (newValue)=>{
  console.log(newValue.name)
  console.log("msg change")
})

当msg.home变化时，不执行回调

// 不执行回调
watch(()=> msg.home, (newValue, oldValue)=>{
  console.log("深度监听生效",newValue.mother)
})

加上 deep 选项，强制转成深层侦听器，可以执行回调

watch(()=> msg.home, (newValue, oldValue)=>{
  console.log("深度监听生效",newValue.mother)
}, {deep:true})

vue2深度监听

data(){
	return {
		user:{
			name:"张三",
			age:11
			}
			}
	}
// 监听响应式对象所有属性
user:{
	handler : function(newValue){
	console.log(newValue);
	}
	//表示是否深度监听，侦听器会一层层的向下遍历，给对象每个属性都加上侦听器；性能开销大
	deep:true,
}
// 单独监听某一属性
"user.name":{ //使用字符串的形式
	handler:function(newValue){
	console.log(newValue);
	}
	deep:true，//表示是否深度监听，侦听器会一层层的向下遍历，给对象每个属性都加上侦听器
}

6.class与style绑定

在将v-bind 用于 class 和 style时，表达式结果的类型除了`字符串`之外，还可以是`对象或数组`。

class绑定

• :class里面可以是对象

const isActive = ref(true)
<div :class="{ active: isActive }"></div>

• class 和 :class 可以共存

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

• 绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div>

• 绑定一个计算属性

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value
}))
// 如果箭头函数的返回值是一个对象，可以直接省略 return 和花括号 {}，将对象包裹在小括号 () 中
<div :class="classObject"></div>

• 数组语法 (不常用)

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

// 三元表达式
<div :class="[isActive ? activeClass : '', errorClass]"></div>
// 三元表达式 另一种形式
<div :class="[isActive ? 'active': '', 'text-danger']"></div>
// 数组中嵌套对象
<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

.active {
	font-size:33px;
}
.text-danger {
	color:red;
}

style绑定

• style的属性值是变量

const activeColor = ref('red')
const fontSize = ref(30)

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// 支持短横杠，用引号包含起来
<div :style="{ 'font-size': fontSize + 'px' }"></div>

• 绑定样式对象

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

<div :style="styleObject"></div>

绑定数组

// 绑定多个样式对象
<div :style="[baseStyles, overridingStyles]"></div>

7.条件渲染

• v-if v-else

const awesome = ref(true);

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

• <template> 上的 v-if
  <template>不会被渲染

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

• v-show

v-show 不支持在 元素上使用，也不能和 v-else 搭配使用。

<h1 v-show="ok">Hello!</h1>

• v-if 和 v-show 区别

v-show：会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性；如果需要频繁切换，则使用 v-show 较好；
v-if：只有后面为false,对应的元素以及子元素都不会被渲染，控制dom元素的创建和销毁，运行时条件很少改变，一次性的

8.列表渲染

• v-for 渲染数组
• v-for 渲染对象

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

获取对象的键值

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

获取对象的键名、键值

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

获取对象的索引、键名、键值

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

• 通过 key 管理状态
  当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
  为了给 Vue 一个提示，以 便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，需要为每个元素对应的块提供一个唯一的 key 属性

• 数组变化侦测
  Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

  push()：数组末尾后添加元素
  pop()：删除数组末尾元素
  shift()：删除数组首位元素
  unshift()：数组首位添加元素
  splice()：
  (1): splice(1,2) 在数组索引为1的下标开始删除2个元素
  (2): splice(1,0,5,6) 在数组索引为1的下标开始添加2个元素5和6
  (3): splice(1,2,5,6) 在数组索引为1的下标开始的2个元素替换为5和6
  sort()：默认从小到大排序
  reverse()：翻转数组

9.事件处理

• 内联事件处理器： 简单场景

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

const count = ref(0)

• 方法事件处理器

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

const name = ref('Vue.js')

function greet(event) {
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

• 方法与内联事件判断

foo、foo.bar 和 foo[‘bar’] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。

• 在内联处理器中调用方法

<button @click="say('hello')">Say hello</button>

function say(message) {
  alert(message)
}

• 在内联事件处理器中访问事件参数

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

一个事件，绑定多个处理函数

<button @click="func1(), func2()">
  Submit
</button>

• 事件修饰符

<!-- 单击事件将停止传递到div元素 -->
<div @click="divClick">
	<a @click.stop="doThis"></a>
</div>

<!-- 提交事件将不再重新加载页面，阻止提交事件这个默认行为 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 只触发一次回调 -->
<button @click.once="doThis"></button>

• 按键修饰符

<!-- {keyCode(键盘编码)| keyAlias (键盘的简写)}监听键盘的某个键帽 -->
<input type="text" @keyup.enter="keyUp" />

10.表单输入绑定

• v-model

<input v-model="text">

• v-model的实现原理：

<input
  :value="text"
  @input="event => text = event.target.value">

注意v-model在不同表单控件的用法

• 文本

const message=ref("hello")

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

• 多行文本

const message=ref("")

<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message"></textarea>

• 复选框

const checked=ref(false)

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

• 多选框
  选中某个复选框后，将其value属性对应的值添加到数组checkedNames中

const checkedNames = ref([])

<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

• 下拉选择框

const selected=ref("")

<div>Selected: {{ selected }}</div>
<select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

• 多选

const multiSelected=ref([])

<div>Selected: {{ multiSelected }}</div>

<select v-model="multiSelected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

• 值绑定
  将vlaue值由静态变为使v-bind动态绑定
• 修饰符

1.lazy

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

2.number

<!-- 用户输入自动转换为数字 -->
<input v-model.number="age" />

3.trim

<!-- 默认自动去除用户输入内容中两端的空格 -->
<input v-model.trim="msg" />