码迷,mamicode.com
首页 > Web开发 > 详细

vuejs 1—基础

时间:2020-09-10 23:00:35      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:挂载   数据   message   head   code   nbsp   显示   创建   char   

创建Vue对象的时候,传入了一些options : { }

  • { }中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上
  • { }中包含了data属性:该属性中通常会存储一些数据
    • 这些数据可以是我们直接定义出来的,比如像上面这样。
    • 也可能是来自网络,从服务器加载的。
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <div id="app">
            <h2>{{message}}</h2>
            <h1>{{name}}</h1>
        </div>
        <div>{{message}}</div>
        <div</div>
            <script src="../js/vue.js"></script>
            <script>
                // let(变量)/const (常量)
                // 编程范式:声明式编程
                const app = new Vue({
                    el: #app, //用于挂载要管理的元素
                    data: { //定义数据
                        message: "你好啊",
                        name: coderwhy
                    }
                })

                // 元素js的做法(编程范式:命令式编程)
                // 1.创建div元素,设置id属性
                // 2.定义一个变量叫message
                // 3.将message变量放在前面的div元素中显示
                // 4.修改message的数据:今天天气不错!
                // 5.将修改后的数据再次替换到div元素
            </script>
    </body>

</html>

 

vuejs 1—基础

标签:挂载   数据   message   head   code   nbsp   显示   创建   char   

原文地址:https://www.cnblogs.com/stu-jyj3621/p/13584728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!