1.VUE的介绍
| 框架 | 介绍 |
| ------- | ------------------------------------------------------------ |
| vue | 尤雨溪,渐进式的JavaScript框架 |
| react | Facebook公司，里面的高阶函数非常多，对初学者不用好 |
| angular | 谷歌公司，目前更新到6.0，学习angular得需要玩一下typescript
Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |
2.VUE的基本引入和创建
1.下载
cdn方法下载
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.引包
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3.实例化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--模板语法渲染页面-->
<h2>{{ msg }}</h2>
<h2>{{ "哈哈哈" }}</h2>
<h2>{{ 1+1 }}</h2>
<h2>{{ {'name':'alex'} }}</h2>
<h2>{{ person.name }}</h2>
<h2>{{ 1>2? "true":"false" }}</h2>
<h2>{{ msg2.split('').reverse().join('') }}</h2>
<div>{{ text }}</div>
</div>
<script src="vue.js"></script>
<script>
//实例化对象
new Vue({
el:'#app',
data:{
msg:'黄瓜',
person:{
name:"alex"
},
msg2:"HELLO vue",
text:'<h2>yuan</h2>>'
}
})
</script>
</body>
</html>
VUE的模板语法可以插入你想插入的任何内容,除了if-else if -else用三元运算符代替