00-Vue的引入-十八叔

00-Vue的引入

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

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

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

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

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

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