【Vue 基础】01-初识Vue

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

<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue  引入后即可使用全局的Vue对象   -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        初识Vue:
            1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
            2.root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;
            3.root容器里的代码被称为[Vue模板];
            4.Vue实例和容器是一一对应的;
            5.真实开发中只有一个Vue实例，并且会配合着组件一起使用;
            6.{
   
   {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
            7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;

            注意区分js表达式 和 js代码
                1.表达式:一个表达式会生成一个值，可以放在任何一个需要值的地方:
                    (1).a
                    (2).a+b
                    (3).demo(1)
                    (4).x === y ?a' : 'b
                2.js代码(语句)
                    (1).if(){}
                    (2). for(){}
     -->

    <!-- 容器 -->
    <div id="root">
        <h1>名字： {
   
   {name}}</h1>
        <h1>年龄：{
   
   {age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: "#root", // el用于指定当前Vue实例为哪个容器服务，值为css选择器字符串，这里选择的容器是id为root的容器。 相当于：   el:document.getElementById("root")
            data: { // data中用于存储数据，数据el所指定的容器去使用，值我们暂时先写成一个对象
                name: "czc",
                age: 28
            }
        }) // 创建Vue实例
    </script>
</body>

</html>
【Vue 基础】01-初识Vue

猜你喜欢
