Vue记
官方文档上面说Vue是一个JavaScript的渐进式框架。
不同于Jquery ， Vue对数据的更改不必频繁的操作dom ， 虽然说现代的浏览器性能较之以前有了巨大的提升 ， 但是在js中直接操作dom依旧是十分耗费性能的 。
好 ， 话不多说 。学习Vue的你想必已经对前端的基础已经有过了解， 那这里就不再赘述这些了。
接下来 ， 让我们看看Vue的开始吧。
最简单粗暴的直接在html页面中通过script标签的src属性引入,路径根据自己vue存放的位置决定 。
需要注意的是Vue作为一个框架， 提供了两个开发版本和生产版本， 区别在于开发版本中添加了提示信息 ， 而生产版本中去除 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script src = 'vue.js'></script>
</html>
你现在已经引入了vue文件了 ， 那么怎么使用呢？我们一切从简
const vm = new Vue({
});
通过以上代码你创建了一个vue的实例， 名字叫vm ，通过new关键字 ， 给Vue中传入一个对象， 一般情况下一个项目中只有一个vue实例，接下来对页面、数据的操作都在这里完成，要说的一点是 ， vue是一个MVVM框架 。 什么是MVVM？目前阶段可以忽略 ，以免你记得太多，哈哈 。
那么我们如何使用这个实例呢 。
首先你需要通过el属性将这个实例挂载到你需要操作的页面中去 。
//在页面中创建一个div , 给它一个id为app
<body>
<div id = "app"></div>
</body>
<script>
const vm = new Vue({
el:'#app' ,//将实例挂载到div上 ， 这里用挂载对象的class也可以 ， 符号改为 . 即可。
});
</script>
通过以上代码 ， 你已经成功的将创建的实例和div联系起来了 ， 开头我有提到， 在这个实例中可以操作数据,没错 ， 聪明的你一定想到有一个地方是用来存放我们的数据的。这个地方就是data ， 它也是一个对象
const vm = new Vue({
el:'#app',
data:{ //后续的数据将存放在这里 。
//比如有一条数据
msg：‘Hello World'
}
});
数据也有了 ， 那么接下来就是渲染了 。
那么我们怎么把这个数据渲染到页面中呢？这里就需要用到mustache语法了 —>{{}} ， 对， 你没有看错 ， 这两对花括号就是这个东东。
接下来我们在div中这样写：
<div id = "app">{{msg}}</div>
然后把data中的msg放到mustache中， 接下来 ， vue就会在页面中渲染出msg中的数据了，如下图所示
好了 ，以上就是最基础的语法展示， 后面我想想在写吧。
扫一扫
6826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
