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. 计算属性

    computeddata中的方法,但是可以单独写出来,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. 过滤器

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

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

<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);
          },
        },
      });

最后修改:2020 年 11 月 13 日 04 : 59 PM
如果觉得我的文章对你有用,请随意赞赏