Vuejs-01初体验

最新推荐文章于 2022-05-05 00:39:50 发布

52Tiramisu

最新推荐文章于 2022-05-05 00:39:50 发布

阅读量73

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gsj9086/article/details/115525664

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渐进式框架

示例：

创建Vue对象的时候，传入了一些options:{}
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常存储一些数据
这些数据可以是--我们直接定义出来的；
也可以是来自网络--从服务器加载的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一步：引入vue.js文件-->
<script src="../js/vue.js"></script>

<!--第二步：建立div-->
<div id="app">{{message}}</div>

<!--第三步：建立Vue对象，并管理指定的div，写入信息-->
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello, gengsj'
    }
  })
</script>
</body>
</html>

显示效果：

vue的优点体现

修改message：

说明：

说明如果这个数据是从服务器端获取的，那么就可以显示为对应的值。实现了分离

浏览器执行代码的过程

执行到10-13行代码时，显示出对应上的html

执行到16行代码时，创建Vue实例，并对原html进行解析和修改。

案例：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    当前计数{{counter}}
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>
</body>
</html>

另一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const obj = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      add: function (){
        console.log("add is run");
        this.counter++;
      },
      sub: function(){
        console.log("sub is run");
        this.counter--;
      }
    }
  })
</script>

</body>
</html>

52Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs-01初体验

渐进式框架示例：创建Vue对象的时候，传入了一些options:{}{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，这里是挂载到了id为app的元素上{}中包含了data属性：该属性中通常存储一些数据这些数据可以是--我们直接定义出来的；也可以是来自网络--从服务器加载的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
复制链接

扫一扫