vue学习--一步一步来1

最新推荐文章于 2023-05-11 16:00:05 发布

苗苗大佬

最新推荐文章于 2023-05-11 16:00:05 发布

阅读量142

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_39349045/article/details/120098558

版权

el: vue接管的div元素，只能接管一个，可以认为是vue的盒子

data: 数据

methods: 方法

你好小福宝页面

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

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">{{msg}}</div>
   <!-- //所有vue代码会填充到div里面，div认为是容器-->
      <script>
          //new一个对象，
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ msg :'hello 小福宝'}
       
              
          },
          //el是整个vue的主体，
          })
          
      </script>

  
    
</body>
</html>

在这里插入图片描述
data是一个方法；

注意使用单引号

在这里插入图片描述

点击打印日志

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

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">{{msg}}
    <input type="button" value="hello" @click="clickme">
  </div>
  
      <script>
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ msg :'小福宝 '}
       
              
          },
          methods: {
            clickme() {
              console.log("我爱你")
            }
                  } 
         

          })
           
      </script>

  
    
</body>
</html>

在这里插入图片描述

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习--一步一步来1

你好小福宝页面<!DOCTYPE html><html lang="en"><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app">{{msg}}</div> <!-- //所有vue代码会填充到div里面，d
复制链接

扫一扫