Vue的简单入门一

news2025/2/20 5:29:17

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

运行结果