最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
- {{ index }}: {{ value }}
（2）对象，接收的参数上可以是三个，顺序是value, key, index
- {{ index }}. {{ key }} : {{ value }}
-
对于插值表达式中涉及到的复杂计算，建议用计算属性computed来替代。在new Vue时可以使用computed属性。
// html中
{{ reversedMessage }}
// vue实例中
computed: {
reversedMessage: function() {
return this.testMessage.split(‘’).reverse().join(‘’);
}
}
这里只是一个倒序的算法，不算很复杂，只是举例说明。
我们可以使用watch来进行侦听，来响应数据的变化。上面计算属性的应用，我们也可以改用watch来写：
watch: {
testMessage: function() {
this.reversedMessage = this.testMessage.split(‘’).reverse().join(‘’);
}
}
这里，我们通过侦听testMessage的变化来做出响应，用于改变reversedMessage的值。
ps：那么computed和watch的应用场景怎么区分？
个人认为，computed更适合做一些数据值的计算，而涉及到侦听某变量需要做一些业务处理时，建议使用watch。
与class绑定类似，支持键值对语法（css键值对），也支持数组（多个样式对象同时作用）。
这一特性与angular的[(ngModel)]是一致的。通常用于表单元素。
Message is: {{ message }}
不过v-model还支持很多修饰符，如
（1）.lazy
（2）.number
自动将用户的输入值转为数值类型
（3）.trim
自动过滤用户输入的首尾空白字符
看名字就知道了，同步的意思，如果绑定的属性加上这个修饰符，就实现了双向绑定。.sync破坏了单向数据流，于2.0 中移除，但又在 2.3.0 版本后以语法糖形式重新引入。
父组件通过属性传递数据给子组件props，而子组件以this.$emit(eventname, data)的方式发事件给父组件，父组件模板中需要绑定对应事件。
// 父组件模板，通过绑定greet传递数据给子组件，@replay接收来自子组件的事件。
<child :greet=“greetMsg” @reply=“showReply”>
// 子组件props属性接收
props: [‘greet’]
// 子组件模板
Greet from Father Component: {{greet}}
<button @click=“replyToFather”>Reply
// 点击button时调用replyToFather方法，通过$emit发送事件给父组件。
methods: {
replyToFather: function() {
this.$emit(‘reply’, this.replyInfo);
}
}
类似angular的ng-content。父组件可以将想要的内容插在子组件的插槽中。子组件slot标签通过name属性区分插槽，如name=“slot1”，不写name属性的就是默认插槽了；而父组件要在传递给插槽的标签中加上slot属性来区分插在哪个槽中，如slot=“slot1”，如果不加slot属性，则自动插在默认插槽中。slot标签中的内容都被视为备用内容，如果父组件不给子组件传入内容，则会显示子组件slot标签中的备用内容。使用如下：
Message From Father
For Head
For Foot
Other information...
head content…
Backup content…
foot content…
官方提供的说明我不太看得懂，根据我个人的理解，一个很重要的应用场景就是用来抽象列表式组件。比如一个展示性的列表组件，但是具体展示图文，还是其他的，需要由其父组件来指定。我这里写了一个demo。
- {{ props.item.moviename }}
近期热映
使用要点：
（1）父组件通过属性绑定将数据（一般是数组，毕竟是用于列表展示嘛）传递给子组件。
（2）父组件传递给子组件的内容用template标签包裹，template标签具备slot-scope=“props”，props来源于子组件slot标签绑定的属性集，而本例中slot标签绑定了item属性，所以template中的内容可以调用props.item下的属性。
利用component标签及其is属性可以动态切换组件。curComponent的值为组件名。
keep-alive标签
利用keep-alive标签包裹component标签可以让切换组件保留在内存中，可以保留它的状态，避免重新渲染。
ref属性实现了组件的引用，不过应当避免使用ref。
this.$refs.refComp.refValue += ‘a’;
在组件外包裹一层transition标签，name标识transition，即可为组件加上过渡效果。如：
Fade
在进入/离开的过渡中，会有 6 个 class 切换，默认 class 名称格式如下。
-
fade-enter // 进入过渡开始，一般在这个class下定义-过渡开始时的css状态
-
fade-enter-active // 进入过渡活跃状态，一般在这个-class下定义进入过渡过程中的动画
-
fade-enter-to // 进入过渡结束，一般在这个class下定义过渡结束时的css状态。ps：离开过渡不再说明，类似开始过渡。
-
fade-leave // 离开过渡开始
-
fade-leave-active // 离开过渡活跃状态
-
fade-leave-to // 离开过渡结束
我们也可以自定义过渡类名，需要增加transition标签的属性，这样就可以使用第三方的动画库了。用法如下：
Fade
过渡效果主要的应用场景有：
-
v-if
-
v-show
-
动态组件
transition有着一系列javascript钩子函数，从字面意思可以与过渡的class对应起来，如下所示：
<transition
:css=“false”
@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
@enter-cancelled=“enterCancelled”
@before-leave=“beforeLeave”
@leave=“leave”
@after-leave=“afterLeave”
@leave-cancelled=“leaveCancelled”
…
钩子函数都有参数el，用于引用添加了transition包裹的元素。enter和leave钩子函数中额外有一个参数done，done是一个回调函数，是必须在最后调用的。否则，它们会被同步调用，过渡会立即完成。
enter: function (el, done) {
// …
done();
}
有了js钩子函数，那么我就可以不使用class来定义过渡的效果了，我可以使用js动画库，如velocity.js，这个时候最好添加v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
我们可以给元素设置初始渲染的过渡效果。
appear拥有相同的class钩子和js钩子，也可以自定义类名。
transition中多个元素过渡时，可以这样写，给每个元素加上key属性来作为唯一标识：
Save
Edit
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
transition中多个元素过渡时，可以这样写，给每个元素加上key属性来作为唯一标识：
Save
Edit
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
