乐趣区

关于vue.js:vue的PARTⅠ

jiezi

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

退出移动版