数据绑定

数据可以通过原始对象、Vue对象、Vue.$data进行绑定，见 value1

Vue的属性或方法用 $ 前缀，用于区分普通的属性或方法

数据监听，只触发一次，newVal 指最新的值，见 vm.$watch

绑定的数据可以是多层的，见 value2

Vue实例化之后，无法动态绑定未声明的变量，见 value3

解析变量中的HTML语法，见 value4

模板中可以使用运算符、函数等，见 value5 累加、 "3" + 4 字符串拼接、 value6 三元、 value7 函数。

阻止修改数据，见 Object.freeze(data)，打开注释后后续修改都无效

v-once 数据只绑定一次，后续操作无效，效果与 Object.freeze(data) 类似

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
        <!-- <div id="app" v-once> -->
            <p>{{value1}}</p>
            <p>{{value2.v2}}</p>
            <p>value3出不来{{value3}}</p>
            <p v-html="value4"></p>
            <p>{{value5 + 1}}</p>
            <p>{{"3" + 4}}</p>
            <p>{{value6 > 10 ? "ok" : "not ok"}}</p>
            <p>{{value7.split("").reverse().join("")}}</p>
        </div>
    </body>

    <script type="text/javascript">
        var data = {"value1" : "zhangsan", "value2" : {"v2": "lisi"}, "value4" : "<h1>html显示</h1>"};
        data.value5 = 5;
        data.value6 = "6";
        data.value7 = "hello world";
        // Object.freeze(data);
        var vm = new Vue({
            el: "#app",
            data: data
        });
        vm.$watch("value1", function(newVal, oldVal) {
            console.log(oldVal + " -- " + newVal);
        });
        data.value1 = "zhangsan -> wangwu";
        vm.value1 = "zhangsan -> wangwu -> maliu";
        data.value3 = "无效";
        vm.$data.value1 = "zhangsan -> wangwu -> maliu -> wangba";
    </script>
</html>

vue是数据驱动的框架，任何直接更改DOM的行为都是在作死

数据来源（单向的）

  • 来自父元素的属性
  • 来自组件自身的状态 data
  • 来自状态管理器，如 vuex Vue.observable

状态（data） vs 属性（props）

  • 状态是组件自身的数据
  • 属性是来自父组件的数据
  • 状态的改变未必会触发更新
  • 属性的改变也未必会触发更新
<template>
  <div>
    <p>
      <button @click="handleNameChange">change this.name</button>
      <button @click="handleInfoChange">change this.info</button>
      <button @click="handleListChange">change this.list</button>
    </p>
    <PropsAndData :name="name" :info="info" :list="list" />
  </div>
</template>
<script>
import PropsAndData from "./PropsAndData";
let name = "world";
export default {
  components: {
    PropsAndData
  },
  data() {
    this.name = name;
    return {
      // name: name,
      info: {},
      // info: {
      //   number: undefined
      // },
      list: []
    };
  },
  methods: {
    handleNameChange() {
      this.name = "vue" + Date.now();
      console.log("this.name 发生了变化，但是并没有触发子组件更新，没有放在return的对象里面，把name相关的注释代码调整下即可", this.name);
    },
    handleInfoChange() {
      this.info.number = 1;
      // this.$set(this.info, 'number', 1)
      console.log("this.info 发生了变化，但是并没有触发子组件更新，number未定义，把info相关的注释代码调整下即可", this.info);
    },
    handleListChange() {
      this.list.push(1, 2, 3);
      console.log("this.list 并没有发生变化，但是触发了子组件更新", this.list);
    }
  }
};
</script>

<template>
  <div>
    <p>props.info: {{ info }}</p>
    <p>props.name: {{ name }}</p>
    <p>props.list: {{ list }}</p>
    <p>data.a: {{ a }}</p>
    <p>
      <button @click="handleBChange">change data.b</button>
    </p>
  </div>
</template>
<script>
export default {
  name: "PropsAndData",
  props: {
    info: Object,
    name: String,
    list: Array
  },
  data() {
    return {
      a: "hello",
      b: "world"
    };
  },
  updated() {
    console.log("触发 PropsAndData updated");
  },
  methods: {
    handleBChange() {
      this.b = "vue" + Date.now();
      console.log("data.b 发生了变化，但是并没有触发组件更新，因为模板中暂没有用到b，所以不会通知组件去更新", this.b);
    }
  }
};
</script>

results matching ""

    No results matching ""