前端三大主流框架的对比和Vue的简单使用（1）

（一）

前端框架的特点：

1.组件化

2.社区强大

3.第三方库多

4.浏览器插件debugging

5.单页面友好

为什么使用框架？

为了保持UI和状态同步，原生JS保持同步要写很多代码

原生实现的问题：

用js代码创建UI可读性差

三大框架对比：

Angular:

双向数据绑定：如多级菜单；

依赖注入，使组件之间的耦合度降低，提高代码的可读性；

typeScript是JS的超级；

angular1.0主要面对的是PC端，angular2.0以后才兼容PC端和移动端；

优点：MVVM模式、双向数据绑定、依赖注入

缺点：语法复杂，angular5使用TypeScript，没有向后兼容

React:

如果我们去操作dom的话，性能很低，要重排和重绘；

虚拟dom:用JS去指代dom节点，那么我们的性能就可以大大增加；

JSX语法：我们可以用JS去写HTML和CSS的语法；

我们写习惯了，JSX语法书写出来的代码是很漂亮的；

优点：虚拟DOM,轻量，JSX语法

缺点：官方文档没有体系化，JSX语法

Vue:

优点：使用HTML模板，中文文档，体量小

（二）Vue第一个简单应用：

学习Vue,首先要看它的官网；

打开起步--安装--两种方法(script引入和npm包管理工具)--我们用script引入也有两种方法--我们使用CDN方法；

data:存放变量

1.

2. 双大括号，既可以放变量，也可以放函数

{{xingming+"123"}}

{{sayName()}}

3.

里面也可以是字符串的表达式；

也可以写三目运算符表达式，但是并不可以用if和else这种复杂的表达式；

错误案例：因为vue不会分析字符串里面的语法；

在双括号中直接写链接是没有用的，一定要绑定，不然没办法访问；

我们要借助指令：v-bind需要绑定href这个属性；

{{xingming+"123"}}

{{sayName()}} 百度

4.

v-once指令的使用：

我们h1只是第一次初始化的值，而不会随着name的改变而改变；

v-once后面没有参数，所以不用写；

{{sayName()}} 百度

5.v-html的使用：

vue会把字符串当作数据输出，而不会当作dom节点分析出来；

这个行为可以避免很多的快脚本攻击；

把一个数据当作dom节点去分析，而不是字符串；

v-html会导致安全性问题，不到万不得已，不去使用；

{{sayName()}} 百度