vue项目总结

2023-08-08  本文已影响0人  小仙女喂得猪呀

MYVUE_ADDNAME项目

在main.js中

  1. 这段代码是用于Vue.js框架的配置，它的作用是关闭生产环境下的提示信息。
Vue.config.productionTip = false
  1. el 属性指定了 Vue 实例挂载的元素的选择器。这里的 #app 表示选择 id 为 "app"(index.html) 的元素作为 Vue 实例的挂载点。
    components : { App }：这是一个对象，用于注册 Vue 组件。这里注册了一个名为 "App" 的组件，可以在模板中使用。
    template: '<App/>' 当 Vue 实例渲染时，它会将 <App/> 替换为 "App" 组件的实际内容。这样，最终渲染到页面中的内容就是 "App" 组件所包含的内容。
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中

  1. item.student为true时, 将style:isStudent应用于该元素上
<ul>
      <li v-for="item in items" :key="item.id" v-bind:class="{isStudent: item.student}" v-on:click="turnRed(item)">{{ item.name }}</li>
    </ul>
  1. watch 方法的使用
watch: {
    items: {
      handler: function (items) {
        // 监控li的变化, 将新增的值存入sessionStorage中,
        // sessionStorage中的数据将在页面关闭后删除
        Storage.save(items);
      },
      // 深度监视, 只要items有一点改变就会触发回调函数
      deep: true
    }
  }

在localstorage.js中

  1. 如果window.sessionStorage.getItem(STORAGE_KEY) 是null或者undefined 则执行'[]'
JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '[]')

my_cnode项目

在main.js中

  1. 定义全局方法formatDate 
Vue.filter('formatDate', function (str) {
  if (!str) return ''
  var date = new Date(str)
  // 现在的时间 - 传入的时间 = 相差的时间 (单位 = ms)
  var time = new Date().getTime() - date.getTime()
})

在App.vue中

  1. router渲染
<div id="app">
    <!-- cnHeader在template模板中的使用方式 -->
    <cn-header></cn-header>
    <!-- 渲染router组件,并将其插入到 <div id="app"> 容器中-->
    <router-view name="main"></router-view>
    <router-view name="sidBar"></router-view>
  </div>
</template>
  1. 自定义模板cn-header的使用
<script>
// ./表示当前目录; ../表示当前目录的上一级别目录
import cnHeader from './components/Header.vue'
export default {
  //  name: 'app' 是在Vue.js组件中定义的选项，
  // 用于给组件指定一个名称。它是为了组件的标识和区分而设置的。
  name: 'App',
  components: {
    cnHeader,
  }
}
</script>

在router下index.js中,用于路由配置

  1. 路由注册特点: path : 用于表示访问路径传参以 :id(id为定义参数名称)
    name: 路由名称用于跳转标识,一个页面唯一只有一个name(需要避免重复)
    components: 组件部分(一个页面可以包含多个组件,组件以数组的形式表现),组件需要在App.vue中渲染
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'root',
      components: {
        main: PostList
      }
    },
    {
      path: '/topic/:id&auther=:name',
      name: 'post_content',
      components: {
        main: Article,
        sidBar: SideBar
      }
    },
    {
      path: '/user/:name',
      name: 'user_info',
      components: {
        main: UserInfo,
      }
    }
  ]
})

components下具体内容

Header.vue

如果将<span><a href="#">关于</a></span>放到<router-link>标签内，从视觉上可能看起来效果相同，但它们在功能上是有区别的。

将<span><a href="#">关于</a></span>放到<router-link>标签内，相当于在路由链接的内容中嵌套了一个超链接。这样做可能会导致一些意外的行为或不符合预期的结果。

<router-link>标签是Vue.js框架中用于创建导航链接的特殊组件，它会拦截点击事件并处理路由导航，以保持应用程序的单页应用体验。当用户点击这个链接时，Vue.js会执行相应的路由导航逻辑，加载新的页面内容，而不是简单地执行超链接的默认行为。

而<a href="#">关于</a>是一个普通的超链接，它的默认行为是在当前页面上触发锚点链接，或者不执行任何操作。

所以，尽管视觉上它们可能看起来相同，但放在<router-link>标签内的超链接会受到Vue.js路由的控制，而独立的超链接则不会。这是它们功能上的区别。 -->
<router-link :to="{name:'root'}">：这是一个router-link标签，它是Vue.js框架中的一部分。
它用于创建一个可点击的链接，该链接可以导航到应用程序中的其他路由。:to是一个Vue.js的绑定语法，它将to属性绑定到一个JavaScript表达式，
这里的{name:'root'}是一个路由对象，表示链接将导航到名为root的路由。

 <div class="Header">
 <router-link :to="{name:'root'}">
   <!-- alt="" 是 img 标签的一个属性，用于提供图像的替代文本。
     如果图像无法加载或无法显示，替代文本将被显示。在这个例子中，alt 属性为空，
     表示没有提供特定的替代文本。 -->
   <img src="../assets/cnodejs_light.svg" alt="">
 </router-link>
 //如果span标签放到router-link内,显示上效果一样,但是超链接点击事件将会被routerlink拦截
 <span><a href="https://baidu.com">关于</a></span>
</div>

<style scoped> 是一个用于在Vue.js组件中应用局部作用域的样式标签。
scoped 属性告诉Vue.js编译器，其中定义的样式只应用于当前组件的模板部分，而不会影响其他组件或全局样式。这可以避免样式冲突和混乱。
text-decoration: none;: 条规则用于去除链接的下划线，将文本装饰设置为无。通常，链接文本会默认带有下划线来表示它们是可点击的，但这条规则会去掉这个下划线装饰。

img属性未设置高度,图片的高度将由其宽度与原始宽高比例决定。

img {
    max-width: 120px;
    margin-left: 50px;
    margin-top: 10px;
  }

PostList.vue

Article.vue

UserInfo.vue

上一篇 下一篇

猜你喜欢

热点阅读