男女做网站,如何在百度上发表文章,seo实战密码完整版,网站的对比笔记内容转载自 AcWing 的 Web 应用课讲义#xff0c;课程链接#xff1a;AcWing Web 应用课。 CONTENTS 1. 实现用户信息模块2. 实现关注用户功能3. 实现历史动态模块4. 实现发动态模块 1. 实现用户信息模块
用户动态页面可以划分为三个模块#xff1a;用户信息部分、发动…笔记内容转载自 AcWing 的 Web 应用课讲义课程链接AcWing Web 应用课。 CONTENTS 1. 实现用户信息模块2. 实现关注用户功能3. 实现历史动态模块4. 实现发动态模块 1. 实现用户信息模块
用户动态页面可以划分为三个模块用户信息部分、发动态部分如果是自己才有发动态功能、历史动态展示部分因此我们可以用三个组件来实现在 components 目录下创建 UserNewsInfo.vue、UserNewsSend.vue 以及 UserNewsPosts.vue 三个组件。
其中 UserNewsInfo 内容如下
templatediv classcarddiv classcard-bodydiv classrowdiv classcol-md-4imgclassimg-fluidsrchttps://cdn.acwing.com/media/user/profile/photo/82581_lg_e9bdbcb8aa.jpg//divdiv classcol-md-8div classusernameAsanoSaki/divdiv classfans粉丝123/divbutton typebutton classbtn btn-secondary btn-sm关注/button/div/div/div/div
/templatescript
export default {name: UserNewsInfo,
};
/scriptstyle scoped
img {border-radius: 50%;
}button {padding: 2px 4px;font-size: 14px;width: 70px;
}.username {font-size: 20px;font-weight: bold;
}.fans {font-size: 14px;color: gray;
}
/styleUserNewsPosts 内容如下
templatediv classcarddiv classcard-body/div/div
/templatescript/scriptstyle scoped/style然后我们在 UserNewsView 中先将这两个组件添加进去
templateCard title用户动态div classrowdiv classcol-md-3UserNewsInfo //divdiv classcol-md-9UserNewsPosts //div/div/Card
/templatescript
// is an alias to /src
import Card from /components/Card.vue;
import UserNewsInfo from /components/UserNewsInfo.vue;
import UserNewsPosts from /components/UserNewsPosts.vue;export default {name: UserNewsView,components: {Card: Card,UserNewsInfo: UserNewsInfo,UserNewsPosts: UserNewsPosts,},
};
/script现在我们的网页是静态的用户头像、名字这些内容应该都是参数每个用户是不一样的且用户发动态后需要在历史动态组件中展示因此这几个组件都是需要数据交互的。
一般情况下我们会将数据存到需要交互的这几个组件的最顶层组件中即 UserNewsView。我们可以使用 setup() 函数初始化变量当前页面的用户一般是不会变的因此可以定义一个 reactive注意 reactive 只能接收对象。未来我们需要在模板中用到的属性都需要从 setup() 函数中 return 出去。在 UserNewsView 中传递数据给 UserNewsInfo
templateCard title用户动态div classrowdiv classcol-md-3UserNewsInfo :useruser //divdiv classcol-md-9UserNewsPosts //div/div/Card
/templatescript
// is an alias to /src
import Card from /components/Card.vue;
import UserNewsInfo from /components/UserNewsInfo.vue;
import UserNewsPosts from /components/UserNewsPosts.vue;
import { reactive } from vue;export default {name: UserNewsView,components: {Card: Card,UserNewsInfo: UserNewsInfo,UserNewsPosts: UserNewsPosts,},setup() {const user reactive({username: AsanoSaki,fansCount: 1,is_followed: false, // 是否关注这个用户});return {user: user,}},
};
/scriptVue 中传递数据的方式类似于 React父组件通过 props 传递属性给子组件子组件通过调用函数事件给父组件传递信息。可以使用 : 或 v-bind: 给子组件绑定属性其后是一个表达式而非普通字符串。子组件需要将接受的数据放在 props 中接受的 user 数据类型为 Object且是必填的 required。
如果某个数据是动态被计算出来的可以使用 computed。在 UserNewsInfo 中接收并使用数据
templatediv classcarddiv classcard-bodydiv classrowdiv classcol-md-4imgclassimg-fluidsrchttps://cdn.acwing.com/media/user/profile/photo/82581_lg_e9bdbcb8aa.jpg//divdiv classcol-md-8div classusername{{ user.username }}/divdiv classfans粉丝{{ doubleFansCount }}/divbutton typebutton classbtn btn-secondary btn-sm关注/button/div/div/div/div
/templatescript
import { computed } from vue;export default {name: UserNewsInfo,props: {user: {type: Object,required: true,},},setup(props) {let doubleFansCount computed(() props.user.fansCount * 2);return {doubleFansCount: doubleFansCount,}},
};
/scriptstyle scoped
...
/style2. 实现关注用户功能
当没有关注当前用户时才会显示加关注的按钮否则应该显示取消关注按钮。我们可以使用 v-if 属性判断某个表达式是否成立即可以判断 user.is_followed 是否为 true 来动态显示关注和取关按钮。
还有就是当我们点击按钮时需要更改 user.is_followed 的状态需要定义一个事件处理函数并绑定使用 v-on:click 或 click到按钮的 click 属性上。
由于状态是从父组件 UserNewsView 中传过来的因此不能直接在子组件中修改状态而是需要在父组件中定义好函数并绑定使用 到子组件上
templateCard title用户动态div classrowdiv classcol-md-3UserNewsInfo followfollow unfollowunfollow :useruser //divdiv classcol-md-9UserNewsPosts //div/div/Card
/templatescript
// is an alias to /src
import Card from /components/Card.vue;
import UserNewsInfo from /components/UserNewsInfo.vue;
import UserNewsPosts from /components/UserNewsPosts.vue;
import { reactive } from vue;export default {name: UserNewsView,components: {Card: Card,UserNewsInfo: UserNewsInfo,UserNewsPosts: UserNewsPosts,},setup() {const user reactive({username: AsanoSaki,fansCount: 1,is_followed: false, // 是否关注这个用户});const follow () {if (user.is_followed) return;user.is_followed true;user.fansCount;};const unfollow () {if (!user.is_followed) return;user.is_followed false;user.fansCount--;};return {user: user,follow: follow,unfollow: unfollow,}},
};
/script然后由子组件触发绑定的函数来修改父组件中的状态其 API 为 context.emit()setup() 函数中可以接收第二个参数 context
templatediv classcarddiv classcard-bodydiv classrowdiv classcol-md-4imgclassimg-fluidsrchttps://cdn.acwing.com/media/user/profile/photo/82581_lg_e9bdbcb8aa.jpg//divdiv classcol-md-8div classusername{{ user.username }}/divdiv classfans粉丝{{ user.fansCount }}/divbutton clickhandleFollow v-if!user.is_followed typebutton classbtn btn-secondary btn-sm关注/buttonbutton clickhandleUnfollow v-ifuser.is_followed typebutton classbtn btn-secondary btn-sm取消关注/button/div/div/div/div
/templatescript
import { computed } from vue;export default {name: UserNewsInfo,props: {user: {type: Object,required: true,},},setup(props, context) {let doubleFansCount computed(() props.user.fansCount * 2);const handleFollow () {context.emit(follow);};const handleUnfollow () {context.emit(unfollow);};return {doubleFansCount: doubleFansCount,handleFollow: handleFollow,handleUnfollow: handleUnfollow,}},
};
/scriptstyle scoped
...
/style3. 实现历史动态模块
我们先在 UserNewsView 中创建几条动态并传给 UserNewsPosts 子组件
templateCard title用户动态div classrowdiv classcol-md-3UserNewsInfo followfollow unfollowunfollow :useruser //divdiv classcol-md-9UserNewsPosts :postsposts //div/div/Card
/templatescript
// is an alias to /src
import Card from /components/Card.vue;
import UserNewsInfo from /components/UserNewsInfo.vue;
import UserNewsPosts from /components/UserNewsPosts.vue;
import { reactive } from vue;export default {...setup() {const user reactive({id: 1, // 给每个用户一个唯一编号username: AsanoSaki,fansCount: 1,is_followed: false, // 是否关注这个用户});const posts reactive({count: 3,posts: [{id: 1,userId: 1,content: 今天天气真好,},{id: 2,userId: 1,content: 随便发个动态,},{id: 3,userId: 1,content: 今天吃些什么,},],});...return {user: user,follow: follow,unfollow: unfollow,posts: posts,}},
};
/script在子组件 UserNewsPosts 中我们就需要循环渲染出每条动态可以使用 v-for 实现注意循环时类似于 React需要绑定一个不重复的 key 属性
templatediv classcarddiv classcard-header text-center历史动态/divdiv classcard-bodydiv v-forpost in posts.posts :keypost.iddiv classcard postdiv classcard-body{{ post.content }}/div/div/div/div/div
/templatescript
export default {name: UserNewsPosts,props: {posts: {type: Object,required: true,},},
};
/scriptstyle scoped
.post {margin: 10px 0;
}
/style4. 实现发动态模块
Vue 可以使用 v-model 获取 textarea 的内容并绑定到某个变量上我们先在父组件 UserNewsView 中导入子组件 UserNewsSend然后创建发动态的函数传递给子组件
templateCard title用户动态div classrowdiv classcol-md-3UserNewsInfo followfollow unfollowunfollow :useruser /hr /UserNewsSend sendsend //divdiv classcol-md-9UserNewsPosts :postsposts //div/div/Card
/templatescript
// is an alias to /src
import Card from /components/Card.vue;
import UserNewsInfo from /components/UserNewsInfo.vue;
import UserNewsPosts from /components/UserNewsPosts.vue;
import UserNewsSend from /components/UserNewsSend.vue;
import { reactive } from vue;export default {name: UserNewsView,components: {Card: Card,UserNewsInfo: UserNewsInfo,UserNewsPosts: UserNewsPosts,UserNewsSend: UserNewsSend,},setup() {...const posts reactive({count: 3,posts: [{id: 1,userId: 1,content: 今天天气真好,},{id: 2,userId: 1,content: 随便发个动态,},{id: 3,userId: 1,content: 今天吃些什么,},],});...const send (content) {posts.count;posts.posts.unshift({ // 在数组末尾加元素是push()在首部加元素是unshift()id: posts.count,userId: 1,content: content,});}return {user: user,follow: follow,unfollow: unfollow,posts: posts,send: send,}},
};
/script最后是实现 UserNewsSend
templatediv classcarddiv classcard-bodylabel forinput classform-label发一条动态吧~/labeltextareav-modelcontentclassform-controlidinputrows3/textareadiv classtext-endbuttonclickhandleSendtypebuttonclassbtn btn-outline-primary发送/button/div/div/div
/templatescript
import { ref } from vue;export default {name: UserNewsSend,setup(props, context) {let content ref();const handleSend () {if (content.value) { // 输入框不为空才发送动态context.emit(send, content.value); // 调用父组件的send函数content.value ; // 发送后输入框的内容应该清空}};return {content: content,handleSend: handleSend,};},
};
/scriptstyle scoped
button {margin-top: 15px;border-radius: 20px;width: 90px;
}
/style我们理一下执行过程首先点击发送按钮后会触发绑定的 UserNewsSend 组件中的 handleSend 函数该函数会调用父组件 UserNewsView 传递过来的 send 事件参数是 content.value父组件触发 send 事件后会调用其定义的 send 函数这个函数会在父组件的 post 对象中添加数据由于 post 对象是 reactive 类型的因此当这个对象发生变化时引用了该对象的组件就会重新渲染即重新渲染 UserNewsPosts。
