Vue.js 是什么:
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
人话:一款非常好用的前端框架,是目前最主流的前端框架,需要一定的js基础。
在看这一篇文章的时候,你应该是已经初步了解vue了,和有一定的前端基础,启动vue项目不需要安装任何的插件,只需要导入两个js的包:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
导其中的一个就可以了,两个包的区别是,一个有警告,一个没警告;
当你导完包我们就可以开始写vue的第一个html了:
我们现在来写这样一段代码,很简单吧,但这样并不能体现出vue.js的强大和轻便
让我们进入第一个知识点——插值表达式:
vue.js里我们通过插值表达式来渲染数据,官网的叫法是声明式渲染,我比较习惯于叫插值表达式
首先我们来new一个vue的对象,里面的参数有
el表示什么呢?el表示Element,表示元素,用于绑定数据,参考css的选择器
data表示数据,里面存放的是键值对,但是只会给el绑定的数据使用。
我们发现这个时候,我们还是无法对值进行更改
这个时候,我们要把想要放的值,放在html里面,我们这个时候需要对html的代码进行插值的操作,就要用到{{name}},在你想要动态的代码进行一个插值,花括号内是你在vue对象data定义的一个对象。
我们在页面运行一下,看下效果
我们的第一个vue的页面就完成啦。