是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
怎么用?
小示例 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--挂载点-->
<div id="app">
<h1>{{message}}</h1><br/>
<h2>{{name}}</h2>
</div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 导入通信axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app=new Vue({
el: '#app',
data: {
message: "ksh",
name: "kkk"
}
});
</script>
</body>
</html>
结果
小示例分解
通过上面的这个小示例,大家可以很直观的看到vue实例是如何与试图层进行绑定的。
下面对这个示例进行逐步分解
这个是对试图魔板和结果继续一 一映射,“ksh”->映射的是message这个字段的内容。kkk和上面的方式一样雷同。(如下图所示)
这个是vue实例和视图魔板之间的映射关系
el:
挂载点,指定要把vue实例挂载到那个有 ID选择器的标签上。
data:
给挂载的标签提供数据,例如上面的示例。
《h2》{{name}}《/h2>》
‘ 《h1》{{message}}《/h1》‘ 这种形式专业名词叫:文本插值,还有一种是绑定元素 attribute:
鼠标悬停几秒钟查看此处动态绑定的提示信息!
《h1》标签和《h2》标签提供数据,这两个标签头难过{{}}这种形式获取(挂载的)vue实例提供的数据。
这个data只是属性,还有一个Data()方法(稍后介绍)
上面这个对应到官方文档是“声明是渲染”
官网示例
vue官网文档链接:https://cn.vuejs.org/v2/guide/index.html#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93
这个和其他的语言一样是if判断和for循环,只是使用方式有点区别。
if判断
<div id="app-3">
<p v-if="seen">显示</p>
</div>
<script>
var app3=new Vue({
el: '#app-3',
data: {
seen: true
}
});
</script>
结果:(TRUE)
(false)seen改成FALSE刚才显示的内容就隐藏了
for循环
<!-- for循环-->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var vm1=new Vue({
el: "#app-4",
data: {
todos: [
{"text":'学习 JavaScript'},
{"text":'学习 Vue'},
{"text":'学习 整个牛项目'}
]
}
});
结果: