VUE学习之路 1day

关于vue

易学易用

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

性能出色

经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

灵活多变

丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

vue环境安装

下载node.js 版本 1.15以上

安装命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$ cd 指定目录
$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 runoob-vue3-test，其他默认回车即可
✔ Project name: … crrot   //不能有大写或者中文
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/tianqixin/runoob-test/runoob-vue3/runoob-vue3-test...

Done. Now run:

  cd runoob-vue3-test
  npm install
  npm run dev


运行成功后出现

1
2
3
4
5
6
7
  VITE v5.0.11  ready in 372 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
12:25:06 [vite] hmr update /src/App.vue
12:25:46 [vite] hmr update /src/App.vue (x2)

直接访问就好了

模板语法

基本模板使用

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
</template>
<script>
export default {
  data() {
    return{
      msg:"模板语法",
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<h3>语法</h3>
<p>{{ msg }}</p> //输出
<p>{{ ok ? 'yes': 'no' }}</p> //布尔值判断
<p>{{ nub + 1 }}</p>  //模板赋值
<p>{{ message }}</p>
<p v-html="rwhtml"></p> //引用html代码
</template>
<script>
export default {
  data() {
    return{
      msg:"神器的语法",
      nub:10,
      ok:true,
      message:"大家好阿",
      rwhtml:"<a href='https:www.baidu.com/'>百度</a>",
    }
  }
}
</script>

输出

1
2
3
4
5
6
7
8
9
10
语法
神器的语法

yes

11

大家好阿

百度

属性赋值

将 class值赋值给 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<p :class="class">{{msg}}</p> // :class 也可写成 v-bind:class
</template>
<script>
export default{
    data(){
        return{
            msg:"Hello",
            class:'carrot',
        }
    }
}
</script>

多动态赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<p v-bind="object">{{msg}}</p> // :class 也可写成 v-bind:class
</template>
<script>
export default{
    data(){
        return{
            msg:"Hello",
            object:{
                class:"carrot",
                id:"carrot",
            },
        }
    }
}
</script>

结果图！

条件渲染

在vue中提供了很多条件渲染 类似javascript 的条件语句

  • v-if
  • v-else
  • v-else-if
  • v-show

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <h1>{{msg}}</h1> 
    <div v-if="ok">
        弹出东西来咯
    </div>
</template>
<script>
export default{
    data(){
        return{
            msg:"if条件练习",
            ok:false,  //控制条件
        }
    }
}

</script>

用布尔型控制标签显示与不显示

v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <h1>{{msg}}</h1> 
    <div v-if="ok">
        弹出东西来咯
    </div>
    <div v-else="ok">
        上面看不到可以看到我哦
    </div>
</template>
<script>
export default{
    data(){
        return{
            msg:"if条件练习",
            ok:false,  //控制条件
        }
    }
}

</script>

如果上面 v-if 为ture 那么就显示 弹出东西来咯 如果v-if 为false 就显示 上面看不到可以看到我哦

v-else-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <h1>{{msg}}</h1> 
    <div v-if="ok">弹出东西来咯</div>
    <div v-else-if="nub==10">等于10</div>
    div v-else-if="nub==20">等于20</div>
</template>
<script>
export default{
    data(){
        return{
            msg:"if条件练习",
            ok:false,
            nub:10,
        }
    }
}

</script>

输出等于10

v-show

与v-if 差不多 但是 v-show没有条件，只能判断 ture and false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <h1>{{msg}}</h1> 
    <div v-if="ok">弹出东西来咯</div>
</template>
<script>
export default{
    data(){
        return{
            msg:"v-show条件练习",
            ok:false,  //控制条件
        }
    }
}

</script>

列表渲染

可以用 v-for 来渲染数组列表，类似于遍历数组

v-for 指令的值需要使用项目中的项目 item in items 形式的特殊语法其中 items 是源数据的数组，而 item 是选代项的别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 列表渲染 -->
<template>
<h3>{{ msg }}</h3>
<p v-for="item in name">{{ item }}</p>
</template>
<script>
export default{
    data(){
        return{
            msg:'列表渲染',
            name:['carrot','我爱网安','世界第一']
        }
    }
}
</script>

输出结果

1
2
3
4
5
6
列表渲染
carrot

我爱网安

世界第一

输出下标

1
<p v-for="(item,index) in name">{{ item }}-{{ index }}</p>
1
2
3
4
5
6
输出：
carrot-0

我爱网安-1

世界第一-2

渲染网页json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 渲染列表 -->
<template>
<h3>{{ msg }}</h3>
<p v-for="item in name">{{ item }}</p>

<div v-for="web in webjs">
    <p>标题:{{ web.title }}</p>
    <p>内容:{{ web.text }}</p>
</div>
</template>
<script>
export default{
    data(){
        return{
            msg:'列表渲染',
            name:['carrot','我爱网安','世界第一'],
            webjs:[{"id":1,title:"Carrot",text:"这是来自carrot的内容，收到请回答"}],
        }
    }
}
</script>

输出：

1
2
3
标题:Carrot

内容:这是来自carrot的内容，收到请回答

遍历对象

有三个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 渲染列表 -->
<template>
<h3>{{ msg }}</h3>
<p v-for="(item,index) in name">{{ item }}-{{ index }}</p>

<div v-for="web in webjs">
    <p>标题:{{ web.title }}</p>
    <p>内容:{{ web.text }}</p>
</div>
<!-- 遍历对象 -->
<p v-for="(value,key,index) in userifo">{{ value }}-{{ key }}-{{ index }}</p> //key对应的是键值 value 是内容 idnex 是下标
</template>
<script>
export default{
    data(){
        return{
            msg:'列表渲染',
            name:['carrot','我爱网安','世界第一'],
            webjs:[{"id":1,title:"Carrot",text:"这是来自carrot的内容，收到请回答"}],
            userifo:{
                name:"carrot",
                age:"10086",
                sex:"male",
            }
        }
    }
}
</script>

输出

1
2
3
4
5
carrot-name-0

10086-age-1

male-sex-2
1
2
3
//key添加唯一索引 vue3中不报错  在vue2中必须添加key

<p v-for="(item,index) in name" :key="index">{{ item }}-{{ index }}</p>