2021-07-08 山东大学软件学院暑期项目实训-day8&day9

学习目标：

学习前端知识，将模糊的知识点搞清楚

1. 带参数跳转页面
2. v-model,v-bind,v-on的区别
3. 组件的设计及props的用处
4. 前后端交互

---

学习内容：

1. 带参数跳转页面，参考链接：添加链接描述
   具体实现方法：

步骤	代码
点击按钮	<el-button size="mini" @click="signStatistics(scope.row)">签到统计</el-button>
方法实现	signStatistics(row){this.$router.push("/activitysign"+row.act_id);}
页面响应	created:function (){this.actId=this.$route.params.act_id }

2. v-model,v-bind,v-on的区别

名称	用法	缩写
v-model	使用在表单控件中(或者自定义组件），双向绑定，绑定的是表单控件的值
v-bind	绑定一个或多个attribute或一个组件 prop到表达式，单向绑定	：value
v-on	绑定事件	@click

MVVM开发模式：
参考链接添加链接描述
Model-View-ViewModel的缩写，核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与Model层通过接口请求进行数据交互

层	特点
View层	View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建
Model层	Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开
ViewModel层	在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环

双向绑定：
数据模型和视图之间的双向绑定，当定义的变量发生改变时，页面中所调用的该对象展现的值，也跟着改变，即用户在视图上的修改会自动同步到数据模型中。
单向绑定：
数据模型和视图之间的单向绑定，一旦HTML代码生成好后，就没有办法再进行改变了，如果有新的数据出现，那就必须要先把之前的HTML代码删掉，然后重新把新的数据和模板一起整合形成新的HTML代码，再插入到文档流中

3. 组件的设计及props的用法
   （1）组件的用法：

<div id="app">
	//使用组件
	<my-component></my-component>
<div>
<script>
	//声明组件，其中template的DOM元素必须被**一个元素**包含。
	Vue.component('my-component',{
		template:'<div>这里是组件的内容</div>'
	});
	var app=new Vue({
		el:'#app'
	})
</script>

在特殊情况下组件模板会受到限制（比如在table中，可以使用特殊的属性来挂载组件<tbody is="my-component"></tbody>
（2）props的用法
通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作，这个正向传递数据的过程就是通过props来实现的。
接收一个来自父级的数据并在组件模板中渲染：

<div id="app">
	<my-component message="来自父组件的数据"></my-component>
<div>
<script>
	Vue.component('my-component',{
		props:{'message'},
		template:'<div>message</div>'
	});
	var app=new Vue({
		el:'#app'
	})
</script>

有时候可以使用v-bind来动态绑定props的值：

<div id="app">
	//v-model与vm中的parentMessage双向绑定，输入框中的修改可以修改vm中的parentMessage的值
	//v-bind单向绑定vm中的parentMessage，并将值传给my-component组件模板并渲染
	<input type="text" v-model="parentMessage">
	<my-component :message="parentMessage"></my-component>
<div>
<script>
	Vue.component('my-component',{
		props:{'message'},
		template:'<div>message</div>'
	});
	var vm=new Vue({
		el:'#app'
		data:{
			parentMessage:''
		}
	})
</script>

4. 与后端交互实例：
   （1）
   View层：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

ViewModel层：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

服务端的Model层（省略业务逻辑处理，只描述对外接口）

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

（2）
axios：参考
await和asynchronous：参考

---