vue基础及常用方法细说

vue 基础知识细说

基础：

1. 引入并创建 vue 实例
   使用 vue 挂载实例的话，需要创建一个可以被vue接管的代码片段{{data中的数据对象}}

   什么是 data 中的数据对象，后面的文章会细说。
   html 代码之中的挂载点<p>{{words}}</p>

创建一个 vue 实例，因为 vue 是一个构造函数，所以需要利用new Vue()来创造

// vue官方将vue实例成为vm
      // 创建一个vue实例
      const vm = new Vue({
        // 配置项
        // 1.声明一个挂载点（vue的作用域）
        el: ".app", //===document.querySelector(".app")选择器
        // 2.声明挂载点中的数据对象
        data: {
          words: "我是一个挂载点", //此处的words的内容会挂载到页面之中{{words}}
        },
      });
      //   外部访问data中的数据
      console.log(vm.$data.words);
      //   但是vue官方提供了一个更为简单的方法，可以实现数据（访问代理）
      //   我们就不再需要$data来声明要拿的是哪一个变量，可以直接：
      console.log(vm.words);

1. 模板语法

   先来说一个 vue 指令：v-,以v-为前缀的自定义属性，这样的属性会被 vue 实例接管并解析它的值(js 表达式)

<div class="app">
  <p v-html="words"></p>
  <p v-html="code"></p>
  <!-- vue还支持在html之中插入js表达式 -->
  <p>50+40={{50+40}}</p>
  <p>{{true?'我好舒服':'我好难受'}}</p>
  <!-- 还可以直接输出字符串 -->
  <p>{{'Hello World'.split('').reverse().join('')}}</p>
</div>
<script src="/homework/11/1112_homework/lib/vue.js"></script>
<script>
  const vm = new Vue({
    el: ".app",
    data: {
      words: "其实我：v-html='words' === {{words}}",
      code: "其实我：v-html='code' === {{code}}",
    },
  });
</script>

1. 计算属性

   computed 是data中的方法，但是可以单独写出来，filters也一样
   计算属性，就是讲所有属性统计出来，最后全部应用于某一个变量或者方法上。呈现的效果，类似于 CSS 多个属性叠加。

const str = "hello".split("").reveser().join("")

如果将这个计算属性写到 data 中, 那么这个属性变量在插值中渲染时必须当成函数
此时 html 标签内就不再是{{reverseword}}，而需要使用{{reverseword()}}

<!-- 最终这个属性会与data中的属性变量合并 -->
<div class="app">
  <p>{{words+' ->我是data里面的word'}}</p>
  <p>{{reverseword+'->我是computer计算words属性的最终值'}}</p>
</div>
<script src="/homework/11/1112_homework/lib/vue.js"></script>
<script>
  const str = "hello";
  console.log(str.split("").reverse().join(""));
  const vm = new Vue({
    el: ".app",
    data: {
      words: "ABCD",
      name: "GGGGGGGG",
    },
    // computed: {//可用可不用，但是为了语义化，推荐使用
    // 此时html标签内就不再是{{reverseword}}，而需要使用{{reverseword()}}
    reverseword() {
      //一个函数，调用需要函数名()
      return this.words.split("").reverse().join("");
    },
    // },
  });
  //   不利用computed属性，可以直接写函数方法，也可以达到计算的功能
</script>

1. 过滤器

   filters 是data中的方法，但是可以单独写出来，
   下面演示通过定义一个过滤器，并调用它：

   调用方法：通过|后面跟过滤器方法来实现调用

<p>{{HELLO | toLowerCse}}</p>
创建一个过滤器：

  const vm = new Vue({
    el: ".app",
    data: {
      words: "ABCD",
      name: "GGGGGGGG",
    },
    computed:{reverseword() {
      return this.words.split("").reverse().join("");
    },
    },
    filters:{
        wordsToLowerCase(str){
            return str.toLowerCase();
        }
    }
  });
</script>

调用实例：

<p>{{hello | wordsToLowerCase}}</p>

1. 侦听器

   vue 的侦听器watch其实就是原生 JS 的监听器addEventListener

add1(newVal,oldVal):

简单的累加器：

      const vm = new Vue({
        el: ".app",
        data: {
          add1: 0,
          add2: 0,
          res: 0,
        },
        // methods：定义所有的公共方法，在这里定义所有的你需要用到的函数
        methods: {
          add(x, y) {
            //   数值格式的字符串*1可以自动转为数值
            this.res = x * 1 + y * 1;
          },
        },
        watch: {
          add1(newVal, oldVal) {
            this.add(newVal, this.add2);
          },
          add2(newVal, oldVal) {
            this.add(newVal, this.add1);
          },
        },
      });