前端框架基础 vue02
手动安装vue-router默认安装出来的版本是4.x版本,4.x版本是为vue3.x匹配制作的,导致我们vue2.x核心的项目无法使用
warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
"export 'computed' was not found in 'vue'
解决方案:重装低版本的vue-router
npm un vue-router //删除已经安装的
npm i vue-router@3.x. //安装指定版本 3.x
采用构建编译的方式开发项目,经常会遇到依赖与依赖之间版本匹配的问题,特征是代码不报错,项目报错出在依赖中。解决方案是尝试更换不同的依赖版本,一般是降版本
列表渲染
- 基本渲染 普通arr
- item 是数组元素,命名可以是任意,底层代码是数组遍历内部函数形参
- i 是数组元素下标
- key 属性用于表示当前列表元素的唯一性,一般动态传入数组下标。或者元素ID
<div class="item" v-for="(item,i) in listData" :key="i">
{{item}}
</div>
<script>
export default {
data(){
return {
listData : [ "中国队进不了世界杯","中国女足没问题","中国国少还可以"],
}
}
}
</script>
- 固定次数重复渲染
<button v-for="i in 5" :key="i">{{i}}</button>
+ i 是从1开始
+ 5 表示重复渲染结构多少次
- 复合数据渲染
<div class="item" v-for="item in prolist" :key="item.id">
<h1>{{ item.id }}</h1>
<p>{{ item.name }}</p>
</div>
<script>
export default {
data(){
return {
prolist : [
{"id":"001","name": "网球"},
{"id":"002","name": "篮球"},
{"id":"003","name": "棒球"}
]
}
}
}
</script>
:key=“item.id” 原因是这次遍历没有放入下标i,因此需要从item中找一个不重复的属性来代替,一般选item.id
- 嵌套渲染
<div class="item" v-for="item in prolist" :key="item.id">
<h1>{{ item.id }}</h1>
<p>{{ item.name }}</p>
<div class="comments">
<span v-for="(co,i) in item.comment" :key="i">
{{ co }}
</span>
</div>
</div>
<script>
export default {
data(){
return {
prolist : [
{
"id":"001",
"name": "网球",
comment: ["质量好","价格低廉"]},
{
"id":"002",
"name": "篮球",
comment: ["质量好","价格低廉"]},
{ "id":"003",
"name": "棒球",
comment: ["质量好","价格低廉"]}
]
}
}
}
</script>
- 列表选中的行操作
- 跟v-for一同写入行间点指令,均表示每行都使用该指令
<div @click="fn(i)" v-for="i in 5"></div>
效果: 生成5行div,点击哪行,调用fn(行号)
样式操作
<div :class="{active : index == i}" v-for="i in 5">
- v-if 与 v-for混合使用的问题
<!-- v-if 与 v-for混合
一般不允许 v-if 和 v-for同时写在一个标签的行间
原因是:v-if做的DOM增删操作,v-for又是创建动作
这个在性能上有一定冲突,可能导致运行缓慢。
所以如果在遍历时,选择性显示 一般使用v-show来替换
v-if
-->
<div class="wrap5">
<div v-show="index == i" v-for="i in 3" :key="i">{{ i }}</div>
</div>
<h1 v-show="show1">show</h1>
<h1 v-show="!show1">eles</h1>
<button @click="show1 = !show1">dd</button>