声明：本版块根据B站学习，创建的是vue3项目，用的是vue2语法风格，仅供初学者学习。
目录
一、Vue项目的创建
1.已安装15.0或更高版本的Node.js
2.创建项目
二、 简单认识目录结构
三、模块语法中的指令
1.v-html
1.文本插值（最基本的语法）使用的是双大括号语法
2.双大括号将会将数据插值为纯文本，而不是html。如果想插入html，需要使用v-html
2.v-bind 属性绑定
1.如果绑定值为null或者undefined，该属性就会从渲染的元素上移除。
2. 由于v-bind非常常用，提供了一种简写写法。
3.按钮是否失活，需要将属性定义为布尔属性。
4.绑定多个值，可以用对象来操作
3.条件渲染
1.v-if
编辑 2.v-else
3.v-else-if
4.v-show 与 v-if
4.列表渲染
1.v-for
5.通过key管理状态
一、Vue项目的创建
1.已安装15.0或更高版本的Node.js
node -v #查看版本号2.创建项目
我的出现这种情况是因为淘宝的镜像源证书过期了。
更换镜像源，查看是否更换，再次执行
npm使用国内淘宝镜像（最新地址）_npm最新淘宝镜像-CSDN博客
项目名称小写
后面默认是no，用到什么就选yes,
按照要求执行命令，当执行npm install时出现警告
警告信息就是：required（需要） node.js版本是18.0.0或者20.0.0以上的，但是current（当前）是16.18.1
继续执行npm run dev时开始报错
解决方案：我是去node官网选择20以上版本下载安装的。
环境变量自动配置
安装完毕后查看版本
重新cd 到vue-test目录下执行命令。（把node_modules文件删了，重新执行npm install 和 npm run dev就好了）
到这里，就成功创建Vue3项目了。
二、 简单认识目录结构
Vuex项目目录结构
Npm install的作用就是创建 node_modules文件
三、模块语法中的指令
1.v-html
1.文本插值（最基本的语法）使用的是双大括号语法
2.双大括号将会将数据插值为纯文本，而不是html。如果想插入html，需要使用v-html
javascript"><template><h3>模板语法</h3><p>{{msg}}</p><p>{{n+1}}</p><p>{{ok?"yes":"no"}}</p><p>{{message.split("").reverse().join("")}}</p><p>属性：<span>{{w}}</span></p><p>属性：<span v-html="w"></span></p><!-- 支持单一表达式 -->
</template>
<script >
export default{data(){return{n:1,msg:"语法",ok:true,message:"forever",w:"<a href=www.bilibili.com>bilibili</a>"}}
}
</script>
运行结果
2.v-bind 属性绑定
1.如果绑定值为null或者undefined，该属性就会从渲染的元素上移除。
javascript"><template>
<div class="{{msg}}">hello world!</div>
<div v-bind:class="msg">hello world!</div>
<div v-bind:class="msg1">hello world!</div></template>
<script >
export default{data(){return{
msg:"active",
msg1:null}}
}
</script>
运行结果
2. 由于v-bind非常常用，提供了一种简写写法。
javascript"><div :id=”dynamicId” >动态绑定<div>3.按钮是否失活，需要将属性定义为布尔属性。
javascript">:disabled=“isButtonDisabled”isButtonDisabled : true,4.绑定多个值，可以用对象来操作
javascript"><template><div class="{{msg}}">hello world!</div><div v-bind:class="msg">hello world!</div><div v-bind:class="msg1">hello world!</div><div v-bind="Object">HelloWorld!</div></template><script >export default{data(){return{msg:"active",msg1:null,Object:{class:"appclass",id:"appid"}}}}</script>运行结果
3.条件渲染
1.v-if
该指令用于条件性的渲染一块内容。这块内容只有在指令的表达式返回值为真时才会被渲染。
javascript"><template><span v-if="flag">条件渲染1</span><span v-if="!flag">条件渲染2</span>
</template><script>
export default{data () {return{flag: true}}
}
</script>
运行结果如图，第二个并未被渲染
2.v-else
必须与v-if联合使用，否则会报错
3.v-else-if
javascript"><template><span v-if="!flag">条件渲染1</span><span v-else>条件渲染2</span><span v-if="type==='A'">条件渲染A</span><span v-else-if="type === 'B'">条件渲染B</span><span v-else-if="type === 'C'">条件渲染C</span><span v-else>条件渲染D</span></template><script>
export default{data () {return{flag: true,type:'D'}}
}
</script>
运行结果
4.v-show 与 v-if
javascript"><template><span v-if="!flag">条件渲染1</span><span v-else>条件渲染2</span><span v-if="type==='A'">条件渲染A</span><span v-else-if="type === 'B'">条件渲染B</span><span v-else-if="type === 'C'">条件渲染C</span><span v-else>条件渲染D</span><div v-show="flag">条件渲染 v-show</div><div v-show="!flag">条件渲染 v-show</div></template><script>
export default{data () {return{flag: true,type:'D'}}
}
</script>
运行结果
v-if和v-show的区别：
简而言之就是：
v-if 首次为假时，不做任何事。只有首次为真时，才会被渲染。真变假时，事件监听器和子组件都会被销毁与重建。在运行时条件很少改变，则v-if更加合适。
v-show 始终渲染。频繁切换用v-show。开销低
4.列表渲染
1.v-for
v-for指令基于一个数组来渲染一个列表。V-for指令的值需要使用 item in items 的形式的特殊语法，其中 items 是源数据的的数组，而item是迭代项的别名。
javascript"><template><h2>列表渲染</h2><div><p v-for="i in names" :key="i">{{i}}</p></div><div v-for="i in result" :key="i"><p>{{i.name}}</p><img :title="i.title"></div></template><script>export default{data () {return{names:[1,2,3],result:[{name:"a" ,title :"a"},{name:"b" ,title :"b"},{name:"c" ,title :"c"}]}}}</script>
运行结果
也可以是（value,key,index） 三个值的顺序是默认顺序
可以使用of代替in，更接近JavaScript的迭代器语法。
javascript"><template>
<h2>列表渲染</h2><!-- 三个值的顺序是默认顺序 --><div v-for="(value,key,index) of Student" :key="key">{{value}}-{{key}}-{{index}}</div></template><script>export default{data () {return{Student:{name :"千禧",id: 1,age:18,sex:"man"}}}}</script>
运行结果
5.通过key管理状态
