vue3邂逅--基本语法学习1

1、vite方式构建vue3项目：

1、npm init vite-app <project name>
2、cd <project name>
3、npm install 
4、npm run dev

2、vue基本语法

1、mustache语法：{{}}
2、v-model：数据双向绑定
3、v-once：执行一次性插值，改插值不随数据改变而更新
4、v-html：使得内容可以插入html代码
5、v-bind：绑定属性的内容，缩写符“：”
6、v-on：绑定事件，缩写符“@”

3、JavaScript表达式用于mustache语法模板内

<template>
  <h2>{{msg}}</h2>
  <!-- 可在mustache语法模板内使用js表达式，http://c.biancheng.net/view/5481.html -->
  <h2>{{msg.split('')}}</h2>
  <h2>{{msg.split('').reverse}}</h2>
</template>

4、动态参数

<template>
    1、动态绑定属性,用[]括起来，如果你的组件实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href
 <div :[abbritubeName]="id"></div>
	2、动态绑定事件,用[]括起来，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus
 <div @[eventName]="changeColor"></div>
</template>

5、computed

1、computed与methods执行函数内容的得到的结果是一样的。
2、区别在于：
	（1）使用methods时：每次触发重新渲染，调用方法总会再次执行函数。
    （2）而使用computed时：只有相关的响应式依赖发生变化时，才会重新执行函数进行求值，而如果函数表达式未发生变化，计算属性会立即返回之前的计算结果，而不必再次执行函数，即computed属性对计算结果进行了缓存。

6、watch
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。可用于监听变量变化等。

7、Class的多种绑定方式,style内联同理

1、放置字符串：<h2 class="wy1"></h2>
2、放置对象：<h2 :class="{active: isActive}"></h2>
3、放置数组：<h2 :class="arr"></h2>  --arr在date属性中为数组如：arr:['swiper', 'active']
4、放置数组和对象结合：<h2 :class="[className, {active: isActive}"></h2> 

8、v-if和v-show条件渲染

v-if与v-show对v-if都是对表达式进行判断是否展示内容，
不同的是：v-if直接替换标签进行展示
		v-show是为不展示的标签设置display：none;

9、v-for

v-for：对数组，对象，数组对象进行迭代
	<h2 v-for="(item, index) in 数组对象" :key="index">{{}}</h2>，
			迭代内容使用mustache语法展示,建议绑定一个key值

10、事件修饰符，事件与参数

1、阻止事件冒泡：  .stop
2、阻止默认事件： .prevent （例：表单默认提交）
3、事件只执行一次： .once 

4、按键修饰符： .enter/.tab/.delete/.esc/.space/.up/.down/.left/.right
5、系统修饰符： .ctrl/.alt/.shift/.meta，在Windows系统键盘meta对应windows徽标键(⊞)
<input type="text" @keydown.修饰符="事件名称"></input>
<input type="text" @keyup.修饰符="事件名称"></input>

6、鼠标按钮修饰符
.left　　点击鼠标左键即可触发事件
.right　　点击鼠标右键即可触发事件
.middle　　按下滑轮触发事件
@click.鼠标按钮修饰符="addNumber()"

7、 .lazy：当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。
8、 .number:将字符串转为number类型
9、 .trim: 去掉空格


1、默认传递事件对象event
@click="addNumber()"，
2、传递参数
@click="addNumber(num)"
3、同时传递参数和事件对象event
@click="addNumber(num,$event)"