Vue01: 基础-模板语法-常用指令

一、vue是什么？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

1.1 什么是渐进式框架？
表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；
1.2 vue3的优点有那些？
更好的性能，更小的包体积，更好的TypeScript继承，更优秀的API设计
1.3 声明式和命令式的区别？
命令式是关注过程比如下代码，自然语言描述能够与代码产生一一对应，描述做事的过程，称之为声明式

const div = document.querySelector('#app') //获取div
div.innerText = 'hello world'; // 设置文本内容
div.addEvenTListener("click",()=>{ // 绑定点击事件
	alert('ok'); 
})		

声明式是类似vue中mesage生命一个变量，具体的设置全部交给了vue内部来完成，称之为声明式，同样的框架还有React、 Angular、小程序等

<template>
	<div>{{mesage}}</div>
</template>

二、常见属性
2.1 data
在vue2中 data是传入一个函数，并且该函数需要返回一个对象
在vue3中 必须传入到一个vue提供的函数中，

	<div id="app">
	  <button @click="count++">
	    Count is: {{ count }}
	  </button>
	</div>

	import { createApp } from 'vue'
	createApp({
	  data() {
	    return {
	      count: 0
	    }
	  }
	}).mount('#app')

2.2 methods
在vue2中就是一个对象，在对象中定义许多方法，再把这些方法绑定到模板中或跟模板的内容产生联系，方法可以通过this关键字访问data中的对象属性（不能再methods中使用箭头函数，否则失去响应式，因为this将指向window）

export default{
	data(){},
	methods:{
		add(){
			console.log('hello world')
		}
	}
}

三、常见的vue模板语法
3.1 mustache : 双大括号（胡子戏法）主要是在template中对变量的输出
常见的用法如下：

<template>
<div>
	<!-- 基本用法 -->
	<p>{{message}}</p>
	<!-- js表达式-->
	<p>{{count *2}}</p>
	<!-- 直接调用函数 （不建议）-->
	<p>domFn(count)</p>
</div>
</template>

3.2 指令：v-once :指定元素或者组件之渲染一次(后面数据变化后也不再有任何变化，类似于给冻住了，没有错就是这个样子)代码如下

<template>
	<h2 v-once>{{count}}</h2>
	<button @click=“addNumber()">数字+1</button>
 <div v-once>
	<h2>{{count}}</h2>
	<button @click=“addNumber()">数字+1</button>
</div>
</template>

3.3 指令：v-text :类似原生中的textContent和vue中的{{}} 直接在标签内替换内容,代码如下

	<template>
		<span v-text="message"></span>
		<!-- 等价于 -->
		<span>{{message}}</span>
	</template>

3.4 指令：v-html 类似innerHtml 跟v-text的区别是可以直接渲染html的标签，属性等代码如下

	<template>
		<div v-html="message"></div>
	</template>

3.5 指定：v-pre 所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。代码如下

<span v-pre>{{ this will not be compiled }}</span>

3.6 指令：v-cloak：由于直接引入vuejs会出现初始加载的时候有时候会出现数据加载部署来，直接出现代码的问题，利用这个可以解决那个闪白的事件，需要结合css一起使用（在脚手架中没有这个问题）代码如下

<style>
	[v-cloak]{
		display:none;
	}
</style>
<div v-clock>{{message}}</div>

3.7 指令：v-bind html属性的绑定，简写 ：
代码如下

<!-- 基本的写法 -->
<a v-bind:href="https://www.baidu.com">百度一下</a>
<!-- 简写 -->
<a :href="https://www.baidu.com">百度一下</a>
<!-- 可以多个属性一起绑定 -->
<a v-bind:href="https://www.baidu.com" :title="baidu">百度一下</a>

3.7.1 class的绑定v-bind:class (简写 :class)

<!-- 基本语法 -->
<div :class="className">{{msg}}</div>
<!-- 对象语法 -->
<div :class="{ncolor:true,'nFontSize':true}">{{msg}}</div>
<div :class="{ active: isActive }">hello world</div>
<div :class="classObj">hello world</div>
<!-- 数组语法 -->
<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>

data() {
  return {
    isActive: true,
    classObj:{
		color:'red',
		fontSize:'15px'
	},
	activeClass: 'active',
    errorClass: 'text-danger'
    
  }
}

3.7.2 绑定style 代码如下

	<!-- 基本用法-->
	<div :style="{color:'red',fontSize:'30px'}">
		Hello world
	</div>
	<!-- 传入一个变量size-->
	<div :style="{color:'red',fontSize:size +'px'}">
		Hello world
	</div>
	<!-- 传入对象-->
	<div :style="styleObj">
		Hello world
	</div>
	<!-- 传入多个对象-->
	<div :style="styleObj1 styleObj2">
		Hello world
	</div>

3.7.3 动态绑定属性名形式如：:[属性名]:“值”，代码如下

	<div :[name]="value">{{msg}}</div>

3.7.3.1 动态绑定所有属性

<div v-bind="obj">{{msgObj}}</div>

import { createApp } from 'vue'

createApp({
  data() {
    return {
      obj: {
		color:'red',
		fontSize:'18px'
	  }
    }
  }
}).mount('#app')

四、事件绑定
4.1 在vue中使用v-on进行事件的绑定，它的缩写是：@，默认参数event，
常见的修饰符有

• .stop 阻止目标元素的冒泡事件
• .prevent 阻止元素默认事件触发，比如a标签的href的跳转事件
• .capture 添加事件监听器
• .self 事件只在本身触发是才触发回调
• .{keyAlias} 按下指定键才触发 例如：@keyup.enter
• .once 支触发一次
• .left 点击鼠标左键触发
• .right 点击鼠标右键触发
• .middle 点击鼠标滚轮触发
• .passive {passive:true} 模式添加侦听器
  具体代码如下

<!-- 基础用法-->
<!-- 表达式-->
<button v-on:click='count++'>+1</button>
<!-- 函数-->
<button v-on:click="objFn">btn</button>
<!-- 简写 -->
<button @click='count++'>+1</button>
<!-- 鼠标移动事件 -->
<button @mousemove='mouseFn'>+1</button>
<!-- 绑定多个事件（不建议这样做，最好一个元素做一件事）-->
<div v-on="{click:btnClick,mousemove:mouseFn}">绑定多个事件</div>

<!-- 参数传递 -->
<button @click="btnFn('str')">参数传递</button>
<!-- 默认会传递event对像，假如跟其他的参数一起传入的话就需要把第一个参数修改为$event 否则是无法传递的-->
<button @click="btnFn($event,'str')">参数传递</button>