1,什么是vue?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2,vue的优点?
1.性能会更好
vue中用到的是虚拟dom(vdom)
2.视图和数据是分离的,数据去驱动视图的
3.维护成本更低
3,用法导入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
当然你也可以把源码下载下来
4,怎么用
el:"" 渲染的模板。
data 渲染的数据,可以放所有的数据,注意这里的this指向是window
methods 方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ content }}//差值表达式 </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ content:"hello world", } }) </script> </body> </html>
5,差值表达式
{{ 表达式 }}:注意:表达式为对象的时候前后的空格不能省。
表达式也只能是一些简单的运算,只能是表达式,一元,二元,三元,切记不能使用JavaScript语句
<div id="app"> //渲染的模板
<!-- 插值表达式 -->
<!-- {{ 表达式 }} -->
{{"hello world"}}
{{1}}
{{true}}
{{[1,2,3,4]}}
{{ {a : 1, b : 2} }} <!-- 表达式为对象的时候,前后的空格不能省略,两个花括号为表达式,三个就不认识了 -->
<!-- 简单的数学运算 -->
{{ 1+1 }}
{{ 'hello' + 'world' }}
<!-- {{ var a = 10;return a; }} javascript语句 -->
<!-- {{ if(true){return "a"} }} if语句,JavaScript语句 -->
<!-- 三元表达式 -->
{{ true ? "a" : "b" }}
</div>