更新

teaching/jwl/课件/vue/ceshi/src/App.vue

@@ -1,14 +1,16 @@
 <template>
   <div id="app">
-   <div>{{str}}</div>
-   <div v-html="str"></div>
-   name<input type="text" v-model="name">{{name}}
-    <div v-if="age>=18">欢迎光临</div>
-    <!-- <div v-else-if="sss"></div> -->
-     <div v-else>禁止进入</div>
-     <div v-for="(i,j) in arr" :key="j">
-       {{i}}{{j}}
-     </div>
+    <nava ming="xxx"></nava>
+      <table>
+        <tr>
+          <th>姓名</th>
+          <th>序号</th>
+        </tr>
+        <tr v-for="(item,index) in arr" :key="index">
+          <td>{{item.name}}</td>
+          <td>{{index}}</td>
+        </tr>
+      </table>
   </div>
 </template>
 
@@ -17,20 +19,26 @@
 // v-on(@)绑定是事件  v-bind(:) 绑定属性
 // v-html  解析html    v-if  v-else  v-else-if 条件
 // 循环语句  v-for
-// npm 命令  npm run serve    
+// npm 命令  npm run serve   
+
+
+// app引用了 nava   
+// nava 被app 引用  
+//  被引用的是子组件   引用的是父组件 
+// 父组件引用子组件
+
+
+import nav from "./components/nav" 
 export default {
   name: 'App',
   data(){
     return{
-       str:"<p>罗小黑</p>",
-       name:"",
-       age:16,
-       arr:[1,2,3]
+      arr:[{name:"asd"},{name:"小明"},{name:"小红"},{name:"小兰",age:21}]
     }
    
   },
-  methods:{
-
+  components:{
+    "nava":nav   //组件名字不能和html标签一样
   }
 }
 </script>

teaching/jwl/课件/vue/ceshi/src/components/nav.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="nav">
+      <ul>  
+          <li>首页</li>
+          <li>关注</li>
+          <li>推荐</li>
+          <li>热点</li>
+          <li>个人中心</li>
+      </ul>
+        {{ming}}
+  </div>
+</template>
+
+<script>
+export default {
+    name:"nav",
+    props:{
+        ming:{
+            type:String,
+            default:""  //默认值
+        }
+    }
+
+}
+</script>
+
+<style>
+ul{
+    list-style: none;
+    display: flex;
+}
+li{
+    width:40px;
+    height:30px;
+}
+</style>