前言

vue是什么？ 官网上是这么说的

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

既然vue这么强，废话不多说，直接开始！

创建vue项目

创建vue-cli项目，使用npm install -g @vue/cli命令安装全局vue-cli包
然后使用vue create $name 就可以创建一个新的vue项目了
在最新版本里，如果node版本在16以上的可以直接执行npm create vue@latest来创建vue-cli项目接下来就可以自行选择你想安装的一些工具

现在官方推荐使用vite来创建vue项目可以直接使用npm create vite@latest 来创建项目
过程和创建vue-cli类似也可以直接 npm create vite@latest my-vue --template vue (-ts)来选择创建是否支持ts版本的vue
详细vite操作：开始 | Vite 官方中文文档 (vitejs.dev)

模板语法

这篇主要就讲模板语法以及一些渲染操作

文本插值

//template 在这里是没有任何含义的
<template>
    //在vue中使用{{}}包裹起来变量会被vue解析 如果name=‘张三’ 等价于下面的js代码
  <span>{{ name }}</span>
</template>

const name='张三'
const span=document.querySelector('span')
span.innerText=name

如果说想想要解析html原始片段可以使用v-html指令之后后面说

//如果此时HTMLDivElement='<div>这里是div</div>' 那么这段代码span就不会被渲染处出来
//渲染出来的则为div元素 显示的内容为   这里是div
<span v-html="HTMLDivElement"></span>

指令

指令是vue中不可或缺的一部分，也是vue的特点

v-bind 数据绑定

vue中所有元素上的属性都可以使用v-bind进行绑定例如：

<img v-bind:src="name" v-bind:alt="f">

都可以使用变量进行动态赋值
v-bind也可以简写为：

<img :src="name" :alt="f">

不仅绑定属性值可以是变量绑定属性可以是变量只需要这样写即可

<!-- 此时name='src'的话 下面两行代码是等价的 -->
  <img :[name]="name" :alt="f">
  <img :src="name" :alt="f">

绑定的属性值可以是变量，也可以是有返回值得函数

 <img :src="srcValue('name')" :alt="f">

既然是动态绑定了，当然也是可以根据条件来进行绑定一些属性值

 <!-- 如果flag为真的话id则为pic 否则为prc -->
  <img :id="flag?'pic':'prc'">
  <!-- 如果flag为真的话 id则为pic 否则id则没有属性值 -->
  <img :id="{'pic':flag}">

如果是绑定了样式，则必须要是用对象形式来写

 <img :style="{ height: '80px', width: flag ? '100px' : '200px' }" />

v-on 事件绑定

都知道在原生js里绑定事件是on+事件名例如dom.onclikc=fn(){} 在vue中可以直接在元素上使用 v-on:事件名来绑定事件
例如：

<!-- 当单击了这个按钮的时候则会弹出333的弹窗 -->
 <button v-on:click="alert(333)">按钮</button>

v-on比较常用，所以也可以简写为@ 所以常用的事件就可以写成一下样式
@click 单击时触发
@dblclick 双击时触发
@mousedown 鼠标按下时触发
@mouseup 鼠标抬起时触发
@mousemove 鼠标划过时触发

在事件绑定的属性值可以是一个函数当触发了这个事件的时候会直接执行这个函数

<!-- 当我们这样写 点击按钮的时候 就会执行setName函数 然后按钮的名字就会改变 -->
  <button @click="setName">{{ name }}</button>
  
  //暂时可以理解为这种 响应数据还没说到
  <script>
   let name="张三"
   //点击按钮后 就会将按钮的张三 改变成李四
   function setName(params) {
     name='李四'
   }
</script>

切记 事件绑定的时候属性值里的函数带括号和不带括有区有区别
当函数没有括号的时候函数的形参默认是当前的dom节点如果加了括号且没有传任何值得时候形参接受的参数就是undefined 如果加了括号还想获取当前dom节点得话可以在括号内加上 $event

<button @click="setName">{{ name }}</button>
function setName(params) {
  //此时得params就是button 节点
  name='李四'
}

//setName加上了()
<button @click="setName()">{{ name }}</button>
function setName(params) {
  //此时得params获得就是undefined
  name='李四'
}

//setName加上了() 还想继续获取dom节点得话
<button @click="setName($event)">{{ name }}</button>
function setName(params) {
  //此时得params获得就是button节点
  name='李四'
}

v-once 仅渲染一次

仅渲染元素和组件一次，并跳过之后的更新，可以用于优化性能！
当元素或组件上用了v-once 则只会在初始化时渲染一次之后不管状态如何变化此元素都不会再改变

v-if v-else v-else-if v-show 条件渲染

v-if v-else v-else-if 看名字就知道是类似于条件判断来执行的使用方法为：

<!-- 当条件成立时才会渲染 否则就渲染最后一个 -->
 <!-- v-if的值不许是布尔值 或者是可以隐式转换为布尔值的值 -->
  <span v-if="1>2">1</span>
  <span v-else-if="2>2">2</span>
  <span v-else>3</span>

v-show 一样是条件渲染他与v-if类似

 <!-- 当条件成立时才会渲染 -->
  <span v-show="2<3">1</span>

既然都是条件渲染都有了v-if了为什么还有v-show 他们有啥区别？

v-if是惰性的当条件不成立时元素是不会被渲染出来的只有条件成立了这个时候元素才会被渲染出来
v-show不管条件有没有被渲染则都会被渲染出来只是当条件不成立则会在这个元素上添加display:none 只是在视图上看不见了而已

用途和使用场景

在浏览器上渲染元素是很费性能呢，如果使用v-if频繁对元素添加删除则会增加了浏览器的负担
但是如果有些元素确实不想要还是用了v-show的话元素首次全被加载了出来首屏加载的速度会受到影响
所以在适当的情况下合理的使用v-if和v-show对项目的优化有很大帮助
以下是v-if条件不成立时，在浏览器中的样子

以下是v-show条件不成立时，在浏览器中的样子

v-for 列表渲染

如果是许多数据进行大量重复的dom渲染就可以使用v-for指令
在使用v-for指令上的元素上一定要加上key 可以优化性能（以后再说）

  此时如果arr是一个数组 则会有两个参数 第一个为数组的值 第二个为数组的索引
  此时如果obj是一个对象 则会有三个参数 第一个为value值 第二个为key值 第三个为索引
  配合v-for的时候一定要在元素上添加key值 为了在重列表新渲的时候提高性能 且不建议key值为索引
  arr=[1,3,7,5]
  <ul>
    <li v-for="(item, index) in arr" :key="item">{{ item }}</li>
  </ul>
  
  渲染出来的元素：
   <ul>
    <li>1</li>
    <li>3</li>
    <li>7</li>
    <li>5</li>
  </ul>
  
  obj={
    name:'张三',
    age:18,
    phone:110,
  }
  <ul>
    <li v-for="(value, key,index) in obj" :key="value">{{ key }}</li>
  </ul>
  
  渲染出来的元素：
   <ul>
    <li>name</li>
    <li>age</li>
    <li>phone</li>
  </ul>

清楚v-if和v-for的优先级
v-if是当条件成立时就不会渲染那么当v-if和v-for写在同一个元素上时哪个会先执行？
vue2中 v-for的优先级比v-if要高所以当他们写在一起时不用考虑到v-if不成立时会影响到v-for的执行
vue3中 v-for的优先级比v-if要低当他们写在一起时v-if的条件是否成立则会影响到v-for的执行
不管在vue2和vue3中官方都不建议v-if和v-for写在一起

v-model 双向帮绑定

后续补上来了
初识vue-基础认识（2） - 掘金 (juejin.cn)

这次就先到这

结尾

后续再慢慢更新，会把vue2到vue3得知识据我所知得更新完的！

初识vue-基础认识（1）

前言