Vue.js 学习日志——第一个Vue实例（一）

最新推荐文章于 2024-05-14 07:15:10 发布

不会爬树的程序猿

最新推荐文章于 2024-05-14 07:15:10 发布

阅读量3.4k

点赞数 9

分类专栏： Vue.js 学习文章标签： Vue Vue.js

本文链接：https://blog.csdn.net/a646698961/article/details/94737427

版权

Vue.js 学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="../static/vue.min.js"></script>
</head>
<body>
  <div id="vue_data">
    <h1>title : {{title}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{info()}}</h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#vue_data',
      data: {
        title: "Vue.js",
        url: "https://cn.vuejs.org"
      },
      methods: {
        info: function() {
          return  this.title + " - 坚持学习！";
        }
      }
    })
  </script>
</body>
</html>

1、每个Vue应用都需要实例化Vue来实现

var vm = new Vue({
    //*******
})

2、el参数

在上面实例中的id为vue_data，在div元素中：

<div id="vue_data"></div>

意味着所有的改动均在这个id为vau_data的div中，外部不受影响。

3、定义数据对象

data用于定义属性，在上述实例中有2个属性，分别为：title、url。

methods用于定义函数，可以通过return来返回函数值。

{{ }}用于输出对象属性和函数返回值。

当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="../static/vue.min.js"></script>
</head>
<body>
  <div id="vue_data">
    <h1>title : {{title}}</h1>
    <h1>url : {{url}}</h1>
  </div>
  <script type="text/javascript">
    //数据对象
    var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
    var vm = new Vue({
      el: '#vue_data',
      data: data
    })
		
    //设置属性会影响到原始数据
    vm.title = "spring";
    document.write(data.title + "<br>");
		
    //同样
    data.url = "https://spring.io";
    document.write(vm.url);
  </script>
</body>
</html>

Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。

document.write(vm.$data === data) // true

不会爬树的程序猿

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
Vue.js 学习日志——第一个Vue实例（一）

实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="../static/vue.min.js"></script></head><b...
复制链接

扫一扫