写在前面:本人大二在读,优快云的第一篇学习笔记,一切贵在坚持✊希望早日实现全栈自由🆓如有错误之处,欢迎指正!当然也欢迎大家讨论学习,共同进步!
今日学习内容:
- 创建vue项目
npm init vue@latest
- vue项目目录
node_modules——vue项目运行依赖文件
public——资源文件夹
src——源码文件夹
.gitignore——git忽略文件
index.html——入口文件
package——信息描述文件
README——注释文件
vite.config.js——配置文件
- 文本差值
<template>
<h3>
<p>{{msg}}</p>
</h3>
</template>
<script>
export default{
data(){
return{
msg: 'Hello Vue.js!'
}
}
}
</script>
- 模版语法
<template>
<h3>
<!-- {{}}中return的内容已定要有具体的表达值,因此建议把运算这些都放在return中,不建议放在{{}}中 -->
<p>{{msg}}</p>
<p>{{number+1}}</p>
<p>{{ok?'YES':'NO'}}</p>
<!-- 反转操作 -->
<p>{{message.split('').reverse().join('')}}</p>
<!-- 嵌套标签,超链接 -->
<p v-html="rawHtml"></p>
</h3>
</template>
<script>
export default{
data(){
return{
msg: 'Hello Vue.js!',
number:10,
ok: true,
message: 'Hello Vue.js!',
// 嵌套标签,超链接
rawHtml: "<a href='https://www.baidu.com'>百度</a>"
}
}
}
</script>
- 属性绑定
<template>
<div v-bind:id="dynamicID" v-bind:class="msg">测试</div>
//简写
<div :id="dynamicID" :class="msg">测试</div>
</template>
<script>
export default{
data(){
return{
msg: "active",
dynamicID: "appid"
}
}
}
</script>
- 条件渲染
<template>
<div>
<h3>条件渲染</h3>
<div v-if="isShow">显示</div>
<div v-else>隐藏</div>
<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-show="isShow">你能看见我吗?</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
type: 'A'
}
}
}
</script>
v-if:如果说初始值为false,那么页面不渲染
v-show:始终渲染【通过css的display属性(如block等等)】
若果需要频繁切换,建议使用v-show
- 列表渲染
简单数据的渲染如下:
<template>
<h3>列表渲染</h3>
<!-- item代表names中的每一项 -->
<p v-for="item in names">{{ item }}</p>
</template>
<script>
export default{
data(){
return{
names: ['张三', '李四', '王五']
}
}
}
</script>
但大部分时候,渲染的数据来源于后端,以json格式为主,此时的处理方式如下:
<template>
<div>
<h3>列表渲染</h3>
<!-- item代表names中的每一项 -->
<p v-for="item in names">{{ item }}</p>
<div v-for="item in result">
<p>{{ item.name }}</p>
<img :src="item.avator" :alt="item.name" />
</div>
</div>
</template>
<script>
export default{
data(){
return{
names: ['张三', '李四', '王五'],
result: [
{"id":234,
"name":"张三",
"avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
},
{"id":235,
"name":"李四",
"avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
},
{"id":236,
"name":"王五",
"avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
}
]
}
}
}
</script>
这个时候代码可能会报错,但是不影响正常运行,这是因为Elements in iteration expect to have 'v-bind:key' directives.没有key属性,也就没有办法确定唯一索引
<template>
<div>
<h3>列表渲染</h3>
<p v-for="item in names" :key="item">{{ item }}</p>
<div v-for="item in result" :key="item.id">
<p>{{ item.name }}</p>
<img :src="item.avator" :alt="item.name" />
</div>
</div>
</template>
以上就是今天所有的内容! 🤭
coding的过程中还出现了其他的error,如下:
[plugin:vite-plugin-vue-inspector] Element is missing end tag. /Users/alisa/Desktop/baseball/baseball/src/App.vue
该报错表明
App.vue
文件中存在未闭合的标签,要格外注意的是.vue文件的格式问题,这里提供一个正确的格式
<script setup>
import Helloworld from './components/Helloworld.vue'
import Ifdemo from './components/Ifdemo.vue'
</script>
<template>
<div>
<Helloworld/>
<Ifdemo/>
</div>
</template>
错误格式也写在下方:
<script setup>
import Helloworld from './components/Helloworld.vue'
import Ifdemo from './components/Ifdemo.vue'
</script>
<template>
<Helloworld/>
<Ifdemo/>
</template>
错误原因分析:
如果直接使用
<template>
包裹组件,而没有使用v-if
、v-for
或插槽等特殊指令,Vue 会将其视为一个普通的模板块。在这种情况下,<template>
本身不会生成任何 DOM 元素,但它的内容会被渲染。如果<template>
内部的结构有问题(例如未闭合的标签),Vue 会报错。使用
<div>
包裹组件时,<div>
会被渲染为一个普通的 HTML 元素,其内部的组件也会被正常渲染。只要内部的组件和标签没有问题,就不会报错。
学习资料如下(供参考🤝🏻):
Vue.js - 渐进式 JavaScript 框架 | Vue.js