Vue的简单入门 一

声明：本版块根据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

<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，该属性就会从渲染的元素上移除。

<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非常常用，提供了一种简写写法。

<div :id=”dynamicId” >动态绑定<div>

3.按钮是否失活，需要将属性定义为布尔属性。

:disabled=“isButtonDisabled”isButtonDisabled : true,

4.绑定多个值，可以用对象来操作

<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 

该指令用于条件性的渲染一块内容。这块内容只有在指令的表达式返回值为真时才会被渲染。 

<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

<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

<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是迭代项的别名。 

<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的迭代器语法。 

<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管理状态