PART Ⅰ
——vue的基础构建
1、先看东西
Style me!
Style me inline!
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、怎么关联
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的话我们大概可以明白输出有两个部分——作为标签内容输出、作为标签属性输出。标签内容极其简单
{{VUE-EXP}}
标签属性需要将属性绑定，加v-bind：或简写为：
文章图片
2)动态输入（事件）
通过添加事件监听器——v-on:或者@
注意这个VUE—EXP主要指函数，用函数获取值传到后台但细节之后再补充,这里链一个简单的
表单输入绑定 — Vue.js 中文文档 (bootcss.com)
3）优化动态，当vue需要重新渲染时所有methods都要重新运行但computed不用，computed其实看作一个属性只是它是由data计算来的所以命名应该像属性。
4、给html动态样式 总体思路非常简单在css中写好类然后选择类名就可以了，从技术实现上来说绑定class
111
一个基本方法是放入一个对象{类名:返回boolean的函数、计算属性、表达式}
111
还有放入一个数组
111
会分别渲染
【vue的PARTⅠ】还可以在VUE-EXP中直接放一个函数或者是计算属性（这里函数必须带括号），返回一个对象。
