一、什么是Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
——引用于Vue.js官网
Vue.js介绍以及起步教程:
网址
二、起步练习
通过引入CDN的方式使用vue.js
创建一个.html文件，然后引入下图script代码，即可将vue.js引入项目并使用了
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
文本插值
通过以下代码即创建好了第一个vue应用
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">{{message}}</div>
<script type="text/text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'Jay'
}
}) </script>
</body></html>效果如下:
部分语法解释:
el:全名element，指需要获取的元素，一定是html中的根容器元素。
data:用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
花括号{}：这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。
三、条件与循环
控制切换一个元素是否显示也相当简单：
<div id="app-3"> <p v-if="seen">现在你看到我了</p></div>
var app3 = new Vue({ el: '#app-3', data: { seen: true
}
})继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }} </li>
</ol></div>var app4 = new Vue({ el: '#app-4', data: { todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})学习 JavaScript
学习 Vue
整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。