first commit

历届学生/逯帅帅/项目开发/学生项目/谢文军/Vues熟练/component.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="app">
+    <h3>{{ '哈哈哈哈哈' | spl }}</h3>
+    <button @click="a">哈哈哈</button>
+    <lb-hello>
+        <template v-slot:back>
+            <h1>返回按钮</h1>
+        </template>
+        <template v-slot:action>
+            <h1>喜欢 和 分享</h1>
+        </template>
+    </lb-hello>
+
+    <lb-swiper @sclick="getData"></lb-swiper>
+    <h2>qdqwdwq</h2>
+    <lb-footer ref="footer" :footer-arr="tabs"></lb-footer>
+</div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+  // 组件？
+  // 就是使用频率搞的html代码块  js  function
+  // 全局组件
+  // 局部组件
+  // 父子组件之间的数据传递
+  // 父 ---> 子 props
+  // 子 ---> 父 $emit
+  // 父 访问 子 的方法  $refs
+  // 反过来？ 和 兄弟之间的相互访问 $parent $root
+
+  // 生命周期
+
+  Vue.component('lb-hello', {
+    template: `
+      <div>
+        <div class="back">
+          <slot name="back"></slot>
+        </div>
+        <h2>全局组件</h2>
+        <div class="action">
+          <slot name="action"></slot>
+        </div>
+      </div>
+    `,
+    data() {
+      return {}
+    },
+    methods: {}
+  })
+
+  var footer = {
+    template: `
+     <div>
+         <p>{{test}}</p>
+         <lb-hello></lb-hello>
+         <ul>
+           <li v-for="(item,index) in footerArr || footer">{{item.title}}</li>
+         </ul>
+     </div>
+    `,
+    props: {
+      footerArr: {
+        type: Array,
+        default: () => []
+      },
+      test: {
+        type: String,
+        default: '这默认数值'
+      }
+    },
+    data () {
+      return {
+        footer: [
+          { title: '商城' },
+          { title: '购物车' },
+          { title: '订单' },
+          { title: '返回首页' },
+        ]
+      }
+    },
+    created() {
+      // console.log("======: ",this.$parent.$data.tabs)
+      console.log(this.$parent.$children[1])
+    },
+    methods: {
+      footertest() {
+        console.log("footer 子组件的方法")
+      }
+    }
+  };
+
+  var swiper = {
+    template: `
+      <button @click="setSata">点我</button>
+    `,
+    data() {
+      return {
+        arr: 'swiper的数据'
+      }
+    },
+    methods: {
+      setSata() {
+        this.$emit('sclick', this.arr)
+      }
+    }
+  }
+
+  // 代码片段
+  var mix = {
+    data () {
+      return {
+        page: 0,
+        totalPage: 100
+      }
+    },
+    methods: {
+    }
+  };
+
+  new Vue({
+    el: '.app',
+    mixins: [mix],
+    data: {
+      tabs: [
+        { title: '首页' },
+        { title: '门店' },
+        { title: '商城' },
+        { title: '我的' },
+      ]
+    },
+    created() {
+      console.log(this.page)
+    },
+    methods: {
+      getData(res) {
+        console.log(res)
+      },
+      testf(res) {
+        console.log(res)
+      },
+      a () {
+        this.$refs.footer.footertest()
+      }
+    },
+    filters: {
+      spl(val) {
+        return val.substr(0,1)
+      }
+    },
+    components: {
+      'lb-footer':footer,
+      'lb-swiper':swiper,
+    }
+  })
+
+</script>
+</html>

历届学生/逯帅帅/项目开发/学生项目/谢文军/Vues熟练/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div class="header" v-cloak>
+    <p>{{ sb }}</p>
+    <ul v-once>
+        <li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
+    </ul>
+    <ul>
+        <li v-for="(v,a) in cva">{{ a }} {{ v }}</li>
+    </ul>
+    <img v-bind:src="img" alt="">
+    <p v-if= "isLogin" >deli</p>
+    <p v-else>asdfvb</p>
+    <h2 v-show="isShow">v-show</h2>
+    <div v-text="content"></div>
+    <input type="text"  v-model="userName" placeholder="请输入号码">
+    {{userName}}
+    <button @click="test">登录</button>
+</div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    new Vue({
+        el: '.header',
+        data:{
+            sb: '你是个啥',
+            list: [
+                {id:1,name:'123'},
+                {id:2,name:'123345'},
+                {id:3,name:'1234353543'},
+                {id:4,name:'1235438373873'},
+            ],
+            cva:{
+                id:5,
+                name:5646
+            },
+            img:'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
+            isLogin:false,
+            isShow: true,
+            content: '<h2>这是测试标题</h2>',
+            userName: '张三',
+        },
+        methods:{
+            test() {
+                this.test2();
+            },
+            test2(){
+                alert(this.userName)
+            }
+        }
+
+    })
+</script>
+</html>

历届学生/逯帅帅/项目开发/学生项目/谢文军/Vues熟练/tabs.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        .title {
+            color: red;
+        }
+        .content li {
+            display: none;
+        }
+        .content-active {
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+<div class="header">
+    <ul>
+        <li v-for="(item,index) in tabs"
+            v-bind:class="index == currentIndex ? 'title' : ''"
+            @click="tabChange(index)">
+            {{ item.title }}</li>
+    </ul>
+    <ul class="content">
+        <li v-for="(item,index) in tabs" v-bind:class="index == currentIndex ? 'content-active' : ''">{{ item.content }}</li>
+    </ul>
+    <h2>{{dddd}}</h2>
+    <h3>{{dddd}}</h3>
+</div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script>
+    new Vue({
+        el:'.header',
+        data: {
+            currentIndex: 0,
+            tabs: [
+                { title: '社会', content: '社会的内容' },
+                { title: '社会1', content: '社会的内容1' },
+                { title: '社会2', content: '社会的内容2' },
+            ]
+        },
+        methods:{
+            tabChange(i) {
+                this.currentIndex = i;
+            }
+        },
+        watch: {
+            currentIndex (newval,oldval) {
+                console.log("newval: ", newval)
+                console.log("oldval: ", oldval)
+            }
+        },
+        computed: {
+            dddd() {
+                console.log(11111)
+                return this.currentIndex
+            }
+        }
+    })
+</script>
+</html>

历届学生/逯帅帅/项目开发/学生项目/谢文军/Vues熟练/vue-router.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        .router-link-exact-active {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+
+<div id="app">
+    <h1>Hello App!</h1>
+    <p>
+        <!-- 使用 router-link 组件来导航. -->
+        <!-- 通过传入 `to` 属性指定链接. -->
+        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
+        <router-link to="/index">首页</router-link>
+        <router-link to="/about">我的</router-link>
+    </p>
+    <!-- 路由出口 -->
+    <!-- 路由匹配到的组件将渲染在这里 -->
+    <div class="content">
+        <router-view></router-view>
+    </div>
+</div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="./vue-router.js"></script>
+<script>
+  // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
+
+  // 1. 定义 (路由) 组件。
+  // 可以从其他文件 import 进来
+  const Index = {
+    template: `
+      <div>
+        <ul>
+          <router-link tag="li" :to="{ path: '/info', query: { id: item.id } }" v-for="item in newsList" >
+            {{item.title}}
+         </router-link>
+        </ul>
+      </div>
+    `,
+    data() {
+      return {
+        newsList: [
+          { id: 1, title: '哈哈'},
+          { id: 2, title: '哈哈'},
+          { id: 3, title: '哈哈'},
+        ]
+      }
+    },
+    methods: {
+      goInfo(id) {
+        this.$router.push({
+          path: '/info',
+          query: {
+            id: id
+          }
+        })
+      }
+    }
+  }
+  const About = {template: '<div>我的</div>'};
+  const Login = {
+    template: '<div @click="LoginSub">登录</div>',
+    methods: {
+      LoginSub() {
+        localStorage.setItem("token","W3456754567UIUYTFRDGFHNGRE7")
+        if (this.$route.query.hasOwnProperty("from")) {
+          this.$router.replace({
+            path: this.$route.query.from
+          })
+        }
+      }
+    }
+  };
+
+  const Info = () => {
+    return {
+      template: `
+      <div>
+        详情 {{ $route.query.id }}
+      </div>
+    `,
+      created() {
+        console.log(this.$route.query.id)
+      }
+    }
+  };
+
+  const routes = [
+    {
+      path: '/index',
+      component: Index,
+      meta: {
+        title: '首页',
+        isLogin: false
+      }
+    },
+    {
+      path: '/about',
+      component: About,
+      meta: {
+        title: '我的',
+        isLogin: true
+      }
+    },
+    {
+      path: '/login',
+      component: Login,
+      meta: {
+        title: '登录',
+        isLogin: false
+      }
+    },
+    {
+      path: '/info',
+      component: Info(),
+      name: 'info',
+      meta: {
+        title: '详情页',
+        isLogin: false
+      }
+    },
+  ]
+
+  // 3. 创建 router 实例，然后传 `routes` 配置
+  // 你还可以传别的配置参数, 不过先这么简单着吧。
+  const router = new VueRouter({
+    routes
+  });
+
+  router.beforeEach((to, from, next) => {
+    document.title = to.meta.title;
+    if (to.meta.isLogin) {
+      // 是否登录
+      if (localStorage.getItem("token") != null) {
+        next()
+      } else {
+        next({
+          path: '/login',
+          query: {
+            from: to.path
+          }
+        })
+      }
+    } else {
+      next()
+    }
+  })
+
+  // 4. 创建和挂载根实例。
+  // 记得要通过 router 配置参数注入路由，
+  // 从而让整个应用都有路由功能
+  const app = new Vue({
+    router,
+    el: '#app',
+
+  });
+</script>
+</html>