00-Vue的引入

视频教程地址:https://www.bilibili.com/video/BV1GL4y1v79M

视频教程案例实现:http://maizuo.18shu.cn/

此系列文章是对学习过程中的各知识点的整理与记录。

Vue可以直接使用script标签引入html页面,引入之后可以直接使用。

没有特殊说明的情况下,引入的vue版本及代码都是基于vue2版本的。

<script src=”https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”></script>

Vue的基本用法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>00-vue的引入</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="box">
        {{mytext}}
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                mytext: "helloworld"
            }
        })
    </script>
</body>

</html>

按照惯例,先在页面上写一个helloworld

首先给div绑定一个id=”box”,在script中new一个Vue实例,用el属性绑定id为box的div,这个div里的内容就可以使用vue的语法。

在data属性中自定义一个mytext的状态,值为”helloworld”,在div中使用双大括号包裹状态字段{{mytext}},浏览器打开页面即可输出helloworld。

基本的使用步骤:

1.引入vue的js文件,使用cdn或者下载到本地使用路径引入都可以。

2.new一个Vue实例,使用el绑定dom节点。

3.在data中定义状态

4.在页面中使用{{}}使用状态值。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论