本文目录一览：
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
如何在 Vue.js 中使用第三方js库
在 Vue.js 中使用第三方库的方式有：
1.全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.
2.在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.
vue如何使用vuex，vuex是vuex.js文件吗
vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的…除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便开发vue非常好的融合了react的组件化思想和angular的指令思想。一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改Axios在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：axios.get(url).then((res)={this.data=res.data})Vuexvue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。比如存储一些公共变量或者是不同组件间的数据处理等。这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})Vue-Routervue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的，跳转页面只需要router.push('test')获取元素节点vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如testjscodethis.$ref.testHook组件间的通信一。如果是和子组件通信，则使用ref就可以实现，如：jscodethis.$ref.testHook.add()//调用test子组件的add方法二。使用emit来发送广播vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：比如想要给test组件发送一个“相加”广播:exportdefault{method:{click(){Vue.$emit('add',{})//第二个参数可作为传递数据传送到监听端口，不需要则传空对象}}}那么test组件中就需要监听，在created方法里写exportdefault{created(){Vue.$on('add',this.add)},method:{add(){this.count++}}}除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个starHah）
如何在.vue文件中引入外部js
Vue 的 createElement 方法，简单的封装一个组件解决问题。
解决方法
第一版代码（直接在操作 Dom ）如下：
export default {
mounted() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '';
document.body.appendChild(s);
},
}
使用 createElement 方法：
export default {
components: {
'dingtalk': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: '',
},
},
);
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 remote-js 实现：
export default {
components: {
'remote-js': {
render(createElement) {
return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
},
props: {
src: { type: String, required: true },
},
},
},
}
使用方法：
remote-js src=""remote-js