vue3.0基础语法

• vue的开发模式是单组件模式开发，全部是小的组件 ***.vue
• 组件的写法格式
• < template>< /template>
• < script>< /script>
• < style>< /style>
• 注意：template模板里面只能存在一个子元素。

一、数据绑定指令

• vue的组件上如何声明变量，在js模块内部声明
• 每个组件都存在data属性
• 每个组件都有当前指针对象(也就是this问题)

指令	绑定格式
v-bind	属性绑定数据的格式
v-text	元素的文本值指令绑定
v-html	元素的html内容绑定指令
{{}}	数据绑定模板
v-model	表单元素的数据绑定

• v-bind 指令进行元素的属性值绑定的
• eg:v-bind:title=“msg”; 简写 :title=“msg”

 <div id="app">
   <!--vue的相关指令-->
   <!--数据的相关绑定-->
   <p>{{msg}}</p>
   <p>{{txt}}</p>
   <p v-text='txt'></p>
   <p v-html='txt'></p> 
   <!--元素属性绑定以及简写-->
   <h3 v-bind:title="title">属性绑定全写格式</h3>
   <h3 :title="title">属性绑定简写格式</h3>
   <!--表单元素的value绑定-->
   <input type="text" :value="value">
   <input type="text" v-model="value">
 </div>

• vue里面存在数据双向绑定原理：
• 具体见https://blog.csdn.net/qq_45806781/article/details/115544542?spm=1001.2014.3001.5502
• v-bind属性绑定是单向数据绑定
• v-model 表单数据是绑定数据双向绑定

二、数组（集合）渲染

• v-for指令 循环谁给谁添加指令，并且当前元素需要绑定唯一key值，使用的是:key=“index”。

	<ul>
     <li v-for="(item,index) in arr" :key="index">
       {{item+"--"+index}}
     </li>
   </ul>
   <ul>
     <li v-for="(item,index) in stu" :key="index">
       {{item.name}}
     </li>
   </ul>

三、元素显示隐藏指令

	<!-- 元素的显示隐藏 -->
   <button v-show="isshow">按钮</button>

• v-show 值可能是变量，也可能是表达式。

四、元素的如果指令

• v-if v-else-if v-else 可以使用标签，也可以使用模板

		<button v-if="isshow">按钮</button>
   	<template v-if="ifhas">
     		<h1>h1标签</h1>
   	</template>
   	<template v-else-if="ifelse">
     		<h2>h2标签</h2>
   	</template>
   	<template v-else>
     		<h3>h3标签</h3>
   	</template>

• 当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级，所以不推荐同时使用 v-if 和 v-for。

五、元素的class属性绑定、style绑定

    <!-- 元素的class绑定 -->
   	<div :class="{box:true,add:isaddClass}"></div>
   	<div class="box" :class="{add:isaddClass}"></div>
   	<!-- 元素的样式绑定 -->
   	<div :style="{width:w,height:h,border:b}"></div>
   	<div :style="style"></div>