vue基础02

vue基础02

手动安装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>