vue2 基础 (一)

当你了解这个是怎么用的,是干嘛的,就可以了,更多,更具体的信息可以去vue的官网去看文档;

这里只是用更为直观的方式让你了解一下vue;

---------------------------------------------------------------------------------------------------------------


vue 不支持ie8;


使用vue有多种方式,开发中我们使用npm下载模块,现在我们学习基础,可以直接引入vue.js

就和引入jquery一样,没有什么区别,特别简单;


好吧,什么也别想,什么也别困惑,学着学着就明白了,坚持就行:


第一步:引入我们的vue.js 文件,别把vue看的很难,就当成jquery来学就简单了;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2基础</title>
<!-- 在这里引入我们的vue文件 -->
<script src="vue.js"></script>
</head>
<body>
第一步,先引入vue.js 文件 要自己去下载咯,这里不提供
</body>
</html>


第二步:我们在<body>中添加点内容吧;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2基础</title>
<!-- 第一步 在这里引入我们的vue文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 第二步,在网页中添加点内容吧 -->
<div id="main">
<span>我是静态的内容</span>
</div>
</body>
</html>


第三步:这一步很重要,写法需要记住,就是死的东西,固定好的;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2基础</title>
<!-- 第一步 在这里引入我们的vue文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 第二步,在网页中添加点内容吧 -->
<div id="main">
<span>{{abc}}</span>
</div>

<script>
// 第三步首先new 一个Vue(),这一步是固定的,就这么写就行了,
// 下面首先会设置 el 这个也是固定的,el代表我们这个Vue绑定到哪个元素上,
// 后面写上div的ID就可以了,我们的ID 是 main, 注意加#
// data代表数据,可以理解为一个data对象,这个是固定的,我们在对象里面写了一个 abc 属性
// 并且 abc 的值为:我就是数据部分 ; abc 是随便起的名字,
// 这么简单的设置之后,我们在span 中写上{{ abc }},就可以在span 中显示 abc;
new Vue({
el:"#main",
data:{
abc:"我就是数据部分"
}
});
</script>
</body>
</html>

总结:上面我们学习了

          (1) 如何引入vue ,在<script>标签中引入

          (2) 如何创建vue , new Vue({  .......   }) 

          (3) 然后创建的Vue() 里面的两个东西,一个 el  ,一个data ,以及他们的作用;

                    当然了还有其他的东东,下面会说到;

          

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值