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