[JavaScript知识库]vue的PARTⅠ

PART Ⅰ

——vue的基础构建

1、先看东西

<section id="assignment">
      <input type="text" v-model="tempName" @keydown:enter=""/>
      <p :class="userClass">Style me!</p>
      <button @click="changeVisble">Toggle Paragraph</button>
      <input type="text" />
      <p>Style me inline!</p>
  </section>

const app = Vue.createApp({
  data() {
    return {
      tempName: "",
      className: "",
      isVisble: true,
    };
  },
  watch: {},
  computed: {
    userClass() {
      return "this.className;";
    },
  },
  methods: {
    changeVisble() {
      this.isVisble = !this.isVisble;
    },
  },
});
app.mount("#assignment");

上面两段代码就是一个一般的vue构件或什么东西，下面首先分几点谈论vue怎样起作用的

1、vue怎么和html相关联

2、vue从哪里去处理html

2、具体处理

1、怎么关联

<section id="assignment">
</section>

const app = Vue.createApp();
//建立一个app
app.mount("#assignment");
//将app和html的部分相关联

2、VUE的基本部分（目前所学，在这一部分是够用的）

const app = Vue.createApp({
  data() {
    return {};
  },
//这个是现代js的简写，其实是
//data:fuction(){},
  watch: {},
  computed: {},
  methods: {},
});

一共四个部分一个函数三个结构体。data函数返回一个结构体里面是数据（这个是真的数据不包含函数），会自动包装成app类中的属性（这个很重要）,在这个部分访问直接this.就行。剩下三个是三个结构体里面都是方法。

这里我们先插入交互问题

3、html与VUE的交互

这里给一个定义，这个定义是我自己给的为了简化叙述。VUE-EXP：表达式、VUE专用（VUE的变量（data）、函数调用(methods)、计算属性(computed)）。（但这个定义因为我知识的匮乏应该会修改）注：函数调用要加（），计算式虽然声明和函数一样但调用时不用加（）。

1）动态输出

如果我们了解html的话我们大概可以明白输出有两个部分——作为标签内容输出、作为标签属性输出。标签内容极其简单

<p>{{VUE-EXP}}</p>

标签属性需要将属性绑定，加v-bind：或简写为：

<img :src="VUE-EXP"/>

2)动态输入（事件）

通过添加事件监听器——v-on:或者@

<button @click="VUE-EXP"></button>

注意这个VUE—EXP主要指函数，用函数获取值传到后台但细节之后再补充,这里链一个简单的

表单输入绑定 — Vue.js 中文文档 (bootcss.com)

3）优化动态，当vue需要重新渲染时所有methods都要重新运行但computed不用，computed其实看作一个属性只是它是由data计算来的所以命名应该像属性。

4、给html动态样式

总体思路非常简单在css中写好类然后选择类名就可以了，从技术实现上来说绑定class

<p :class="VUE-EXP">111</p>

一个基本方法是放入一个对象{类名:返回boolean的函数、计算属性、表达式}

<p :class="{class:test}">111</p>

还有放入一个数组

<p :class="['class1',{c2lass:test}]">111</p>

会分别渲染

还可以在VUE-EXP中直接放一个函数或者是计算属性（这里函数必须带括号），返回一个对象。