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

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

不会爬树的程序猿

3486人浏览 · 2019-07-05 16:10:32

不会爬树的程序猿 · 2019-07-05 16:10:32 发布

实例

<!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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^