实例演示vue框架知识，享受交互体验，学技术像玩一样high起...

实例演示vue中的常用属性,如计算属性,过滤器,侦听器等

vue模版语法案例：

模板语法

关键源码：

<body>
    <div class="app">
      <p>{{words}}</p>
      <p v-html="site"></p>
      <p>{{code}}</p>
      <p v-html="name"></p>
      <p>30 + 40 = {{30 + 40}}</p>
      <p>{{true ? '不爽': '棒棒'}}</p>
      <!-- 直接输出字符串 -->
      <p>{{'Zhang Fugen'.split('').reverse().join('')}}</p>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data: {
          site: "Hello <strong style='color:red'>zhangfugen.cn</strong>",
          name: "<strong>张福根</strong>",
        },
      });
    </script>

vue计算属性(computed)和过滤器(filters)：

计算属性和过率器

关键源码：

<body>
    <div class="app">
      <p>{{words.split('').reverse().join('') }}</p>
      <p>{{sites | wordsToCase |substring}}</p>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data: {
          words: "ABCDEF",
          sites: "zhangfugen.cn",
        },
        // 计算属性,
        computed: {
          reverseWords() {
            return this.words.split("").reverse().join("");
          },
        },
        // 过滤器属性
        filters: {
          wordsToCase(str) {
            return str.toUpperCase();
          },
          substring(str) {
            return str.substr(2, 5);
          },
        },
      });
    </script>
  </body>

vue侦听器(watch)实例

小小加法器

<body>
    <p>小小加法器</p>
    <div class="app">
      <!-- v-model: 双向数据绑定 -->
      <input type="number" v-model="add1" name="" id="" /> +
      <input type="number" v-model="add2" name="" id="" /> =
      <span>{{counts}}</span>
      <script>
        const vm = new Vue({
          el: ".app",
          data: {
            add1: 0,
            add2: 0,
            counts: 0,
          },
          //   方法
          methods: {
            add(x, y) {
              this.counts = x * 1 + y * 1;
            },
          },
          // 侦听器属性
          watch: {
            add1(newVal) {
              this.add(newVal, this.add2);
            },
            add2(newVal) {
              this.add(newVal, this.add1);
            },
          },
        });
        console.log(vm.add1);
      </script>
    </div>
  </body>

vue知识总结：

mvvm

Vue挂载点：为作用域
Vue的作用：创建可维护性和可测试性更强的代码库
Vue与MVVM模型的关系：Vue的角色是viewmodel

vue模版语法案例：

关键源码：

vue计算属性(computed)和过滤器(filters)：

关键源码：

vue侦听器(watch)实例

vue知识总结：

相关文章