52-10000 Vue前端开发的learn 复习 hello world

 

 

  

<!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>第一个Vue程序 vue one</title>
    <!-- 1 best 最简单Vue的引入learn与代码写入练习  -->
    <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
 <!-- 2个重要的部分，
    一个是视图，
    一个是脚本
  应用的创建 ，过程。
 
-->

</head>

<body>
    <div id="app">
        <!-- 变量声明 message  文本插值方式。-->
        {{message}}
        <!-- 添加变量赋值，输出测试 -->
        {{name}}
    </div>
    <!-- 增加测试 -->
    <div id="app2">
        {{test}}
        {{add}}
        <!-- var的变量命名，涉及关键字，所以不能输出这个变量！ -->
        <!-- {{var}}  -->
    </div>
    <!-- JavaScript 脚本
           全局变量Vue
       通过new Vue的方式 ，创建了一个对象。这个对象是aPP。也叫做应用对象。 
      data 用于保存数据 
      应用对象
         
    -->
    <script type="text/javascript">

        var app = new Vue({
            //    el  element 元素单词的缩写。挂载 。 利用id选择器的方式，选中这个div。这里的div，元素增加的
            // 属性是id，id属性名字为 app.  然后#+ID名字，就行了。
            // 这些都是前端开发，必备基础知识点。如果不知道， 那理解起来，就必然感觉到难了。
            el: '#app2',
            // 
            data: {
                message: 'hello vue!',
                name: 'hello 张三',
                // 举一反三就是 1 通过改变id选择器的属性id名字，可以改变变量内容的输出。 
                test: 'hello Add2!',
                add: '添加变量测试',
                // var:'关键字？'
            }
        });
    </script>
</body>

</html>

效果

   

 

posted @ 2021-12-07 10:37  优敏行  阅读(66)  评论(0)    收藏  举报