Vue初始 - 爱码网

一、安装 https://cn.vuejs.org/ 官方网站

二、简单实用示例

Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

首先创建一个vue实例，并在创建实例的过程中传入一个对象。

该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。

该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标题</title>
    <script src="static/vue.min.js"></script>      <!--引用vue-->

</head>
<body>

<div id="d1">
    <h1>{{greeting}}</h1>
    <h3>{{app}}</h3>
</div>
<script>
    // 普通插入文本方法
    // let d1 = document.getElementById("d1");  //获取元素
    // d1.innerText = "hello word"  // 文本添加上 hello word 文字
    
    //数据模板引擎
    // Vue插入文本方法
    new Vue(
        {
            el: "#d1",  // 获取元素
            data: {
                greeting: "hello word",   //在元素内添加使用对应的key 之后就应用上value数据
                app: "hello Vue"   //  在元素内使用 相互对应
            }
        }
    )


</script>
</body>
</html>

简单示例