网络日志

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中直接放一个函数或者是计算属性(这里函数必须带括号),返回一个对象。