当前位置：首页>后端>正文

vue项目总结

后端2024-04-30 07:19:15

MYVUE_ADDNAME项目

在main.js中

这段代码是用于Vue.js框架的配置，它的作用是关闭生产环境下的提示信息。

Vue.config.productionTip = false

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中

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>

watch 方法的使用

watch: {
    items: {
      handler: function (items) {
        // 监控li的变化, 将新增的值存入sessionStorage中,
        // sessionStorage中的数据将在页面关闭后删除
        Storage.save(items);
      },
      // 深度监视, 只要items有一点改变就会触发回调函数
      deep: true
    }
  }

在localstorage.js中

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

JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '[]')

my_cnode项目

在main.js中

定义全局方法formatDate

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

在App.vue中

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>

自定义模板cn-header的使用

<script>
// ./表示当前目录; ../表示当前目录的上一级别目录
import cnHeader from './components/Header.vue'
export default {
  //  name: 'app' 是在Vue.js组件中定义的选项，
  // 用于给组件指定一个名称。它是为了组件的标识和区分而设置的。
  name: 'App',
  components: {
    cnHeader,
  }
}
</script>

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

路由注册特点: 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

1. 无参的路由跳转:

如果将<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>

1. css相关知识点:

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

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

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

PostList.vue

1. <router-link>标签是Vue Router提供的用于生成路由链接的组件。它会自动渲染成一个<a>标签，用于在应用程序中进行路由导航。
2. <img src> 是标准的 HTML 语法，而 <img :src> 是 Vue.js 中的数据绑定语法，用于将图像的 URL 动态地从 Vue.js 数据中获取。在实际使用中，两种写法的效果是一样的。
  <img src="具体的url">
```
<router-link :to="{ name: 'user_info', params: { name: post.author.loginname }}" :title="post.author_id">
             <img :src="post.author.avatar_url">
             // <img src="具体的url"> 
</router-link>
```
1. 过滤方法使用
  {{ post.last_reply_at | formatDate }} formatDate为方法名,post.last_reply_at为参数传入方法formatDate中,通过连接符'|'连接,返回的结果显示在页面中
<mark>css相关知识点:</mark>
1. display: inline-block;: 将元素以内联块级元素的方式显示，使其具有块级元素的特性，同时保留了内联元素的排列特性。
  内联元素的特性：内联元素不会独占一行，它们会在同一行内根据文档流从左到右排列。
  内联元素的宽度由其内容决定，不能设置宽度、高度和垂直方向的边距。
2. margin: 0 10px margin属性设置
  margin: 上右下左;
  margin: 10px;：设置所有边距为相同的值。
  margin: 10px 20px;：设置上下边距为 10 像素，左右边距为 20 像素。
  margin: 10px 20px 30px;：设置上边距为 10 像素，左右边距为 20 像素，下边距为 30 像素。
3. .PostList .posts a:visited {color: #858585;} 如果是浏览过则执行此css属性

Article.vue

id和class表示元素的区别
区别: id用于唯一标识一个元素，而class用于指定一个或多个类名，
用于选择一组相关的元素或应用样式。在选择元素时，可以使用#id选择器选择id属性，
或使用.class选择器选择class属性。

    // for id  html代码部分
    <div id="reply">
    //css代码部分
    #reply {
      display: flex;
      flex-direction: column;
    }

    // for class html代码部分
    <div class="article">
    //css代码部分
    .article {
      background: white;
      margin-bottom: 10px;
      padding-left: 20px;
      padding-top: 10px;
   }

1. section和div和区别: 唯一区别是应用于其内部内容的语义(根据语义上分块区分) 样式上无区别

computed: {} 方法:
在computed中,可以定一些属性, 这些属性叫做计算属性,计算属性的本质就是一个方法,只不过我们在使用这些计算属性的时候是吧它们的名称直接当做属性来使用的,并不会把计算属性当做方法去调用

computed: {
  postTab () {
    var type = this.post.tab;
    if (type === 'ask') {
      return '问答'
    };
    if (type === 'share') {
      return '分享'
    };
    if (type === 'job') {
      return '招聘'
    }
    if (type === 'good') {
      return '精华'
    }
  }
},

axios访问网络请求的两种方法:

第一种无需全局配置,只需要在当前文件导入axios包即可

// 获取文章信息
 axios.get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`, {
   params: {
     mdrender: true
   }
 })
   .then(response => {
     console.log('Article response.data.success=' + response.data.success)
     if (response.data.success === true) {
       this.post = response.data.data;
       this.loading = false
     }
   })
   .catch(function (error) {
     console.log('Article: ' + error);
   })

第二种需要在main.js中配置 Vue.prototype.$http = axios
具体使用如下:

this.$http({
  // ES6语法 ${}是一种模板字符串的语法，用于在字符串中插入表达式的值。它通常与反引号（`）一起使用，形成模板字符串
  url: `https://cnodejs.org/api/v1/topic/${this.$route.params.id}`,
  method: 'get',
  params: {
    mdrender: true
  }
})
  .then((response) => {
    console.log('Article response.data.success=' + response.data.success)
    if (response.data.success === true) {
      this.post = response.data.data;
      this.loading = false
    }
  })
  .catch(function (error) {
    console.log('Article: ' + error);
  });

1. watch方法的使用
  使用这个属性,可以监听data中数据的变化,然后触发这个watch中对应的function处理函数,在watch选项中监听 $vue项目总结,route属性的变化，一旦,第1张$ route发生变化，getData()函数就会被调用。这意味着当路由参数发生变化时（例如从一个文章导航到另一个文章），getData()函数将会被触发，以获取新的文章信息。
```
watch: {
  $route () {
    this.getData();
  }
}
```
1. css相关知识点
- scoped属性导致css仅对当前组件生效，而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.如果需要导入其它的css配置,把scoped属性去掉就行了
```
<style>
@import url("../assets/markdown-github.css");
</style>
```
- >h1 表示选择器article下的直接子元素h1
  .ArticleSection .article >h1 {}
- font-weight属性介绍: font-weight: 600;
  常见的取值包括normal（默认字重），bold（粗体），以及一些数字值（如100、200、300、400、500、600、700、800、900等）。不同的数字值对应不同的字重级别，
  具体取值和其对应的字体粗细级别可能因字体和操作系统的不同而有所差异。
  如果你想要设置文本的字体粗细，你可以使用font-weight属性并选择合适的取值，例如font-weight: bold;表示粗体，font-weight: normal;表示默认字重，以此类推
- 选择子元素针对想的配置css属性(a:nth-of-type)
  a:nth-of-type(2)表示选择父元素内的第二个<a>元素。
```
.ArticleSection .replyUp a:nth-of-type(2){
 margin-left: -1rem;
 vertical-align: super;
}
```
- clear: both;属性介绍:
  在DIV + CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，
  但问题出现了，当前面并列的多个 DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，
  这不是我们想要的结果。使用Clear属性正好可以解决这一问题
```
.replySec > p {
padding-left: 50px;
clear: both;
}
```
- rem的使用:
rem（font size of the root element）是指相对于根元素的字体大小的单位
浏览器中html font-size默认值为16px,1rem=16px

UserInfo.vue

如果你希望创建的主题以列表形式呈现，并显示项目符号或小圆点以表示它们的结构，那么可以使用<ul>标签。
如果你希望以普通段落的形式显示每个创建的主题，而不需要明确的列表结构，
则可以不使用<ul>标签。使用ul的列表默认左边有小圆点,否则没有

列表形式呈现的写法:

<div class="topics">
          <p>创建的主题</p>
          <ul>
            <li v-for="topic in userinfo.recent_topics" :key="topic.id">
              <router-link :to="{ name: 'post_content', params: { id: topic.id, name: topic.author.loginname } }" :title="topic.title">
                {{ topic.title }}
              </router-link>
            </li>
          </ul>
</div>

非列表形式呈现的形式

<div class="replies">
          <span>回复的主题</span>
          <div class="replies_content" v-for="reply in userinfo.recent_replies" :key="reply.id">
            <router-link :to="{ name: 'post_content', params: { id: reply.id, name: reply.author.loginname } }" :title="reply.title">
              {{ reply.title }}
            </router-link>
          </div>
</div>

1. css相关知识点
- css属性复用的写法: 中间需要用逗号隔开
```
.topics,
.replies {
  background: white;
  margin-top: 10px;
  margin-left: 200px;
  margin-right: 200px;
  padding: 10px;
}
```
- display: block; 标签的使用: 设置block后 span标签会另起一行显示
```
.message span:nth-of-type(2){
  display: block;
  white-space: pre-wrap;
}
```
- 设置文本居中显示
```
.replies span {
  /* 这个样式只是设置文本水平居中 */
  text-align: center;
  /* 这两个配合设置文本垂直居中显示 */
  line-height: 50px;
  vertical-align: middle;
}
```
- box-sizing: border-box;属性设置的作用
- 当应用了 box-sizing: border-box; 时，元素的总宽度和高度将包括其内边距（padding）和边框（border），而不会增加额外的空间。
- 如果不显式设置 box-sizing: border-box;，则元素的默认盒模型是 content-box。在 content-box 盒模型下，元素的总宽度和高度不包括内边距（padding）和边框（border）
```
  .replies .replies_content{
    box-sizing: border-box;
    //每行底部显示一个高度为1px分割线
    border-bottom: 1px solid #ddd;
  }
```
- 如何控制列表的最后一行的样式
  通过last-child伪类来控制不显示最后一行的线条
```
  .replies .replies_content:last-child{
  border-bottom: none;
  }
```
- 禁止文本自动换行属性: white-space: nowrap;

查看全文

https://www.xamrdz.com/backend/3nb1938993.html

MYVUE_ADDNAME项目

在main.js中

在App.vue中

在localstorage.js中

my_cnode项目

在main.js中

在App.vue中

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

components下具体内容

Header.vue

PostList.vue

Article.vue

UserInfo.vue

相关文章：