2021-7-08 SDU暑期项目实训日志报告05

最新推荐文章于 2024-09-13 14:34:15 发布

inMyCircle

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量111

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/inMyCircle/article/details/118576797

版权

博主今天主要学习了Vue.js的详细技术，包括生命周期、数据绑定、条件渲染、事件处理等内容，并通过实例代码进行了实践。同时，与后端同学协作，完成了接口参数文档的制定。工作进展顺利，明天计划实现前端界面的可视化操作。

摘要由CSDN通过智能技术生成

学习目标：

本篇博客用于记录我今天的学习工作。
上午：学习vue细节技术，进行练习。
下午：与后端同学讨论，形成接口参数文档。

学习内容：

（一）学习Vue细节技术
按照Vue官网进行学习，形成如下练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id = "app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue(
			{el: '#app',
			data: {msg:'test'},
			beforeCreate:function(){
				console.log('beforeCreate');
				},
			created:function(){
				console.log('created');
			},
			beforeMount:function(){
				console.log('beforemount');
			},
			mounted:function(){
				console.log('mounted');
			},
			beforeUpdate:function(){
				console.log('beforeUpdate');
			},
			updated:function(){
				console.log('updated');
			}
			});
			setTimeout(function(){vm.msg='changed...';},3000);
			
		</script>  
		  
		<div id="app1">
		  {{ message }}
		</div>
		<script type="text/javascript">
		var app = new Vue({
		  el: '#app1',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
		</script>
		<div id="app-2">
		  <span v-bind:title="message">
		    鼠标悬停几秒钟查看此处动态绑定的提示信息！
		  </span>
		</div>
		<script type="text/javascript">
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		    message: '页面加载于 ' + new Date().toLocaleString()
		  }
		})
		</script>
		<div id="app-3">
		  <p v-if="seen">现在你看到我了</p>
		</div>
		<script type="text/javascript">
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		    seen: true
		  }
		})
		</script>
		<div id="app-4">
		  <ol>
		    <li v-for="todo in todos">
		      {{ todo.text }}
		    </li>
		  </ol>
		</div>
		<script type="text/javascript">
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		    todos: [
		      { text: '学习 JavaScript' },
		      { text: '学习 Vue' },
		      { text: '整个牛项目' }
		    ]
		  }
		})
		</script>
		<div id="app-5">
		  <p>{{ message }}</p>
		  <button v-on:click="reverseMessage">反转消息</button>
		</div>
		<script type="text/javascript">
		var app5 = new Vue({
		  el: '#app-5',
		  data: {
		    message: 'Hello Vue.js!'
		  },
		  methods: {
		    reverseMessage: function () {
		      this.message = this.message.split('').reverse().join('')
		    }
		  }
		})
		</script>
		<div id="app-6">
		  <p>{{ message }}</p>
		  <input v-model="message">
		</div>
		<script type="text/javascript">
		var app6 = new Vue({
		  el: '#app-6',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
		</script>
		<div id="app-7">
		  <ol>
		    <!--
		      现在我们为每个 todo-item 提供 todo 对象
		      todo 对象是变量，即其内容可以是动态的。
		      我们也需要为每个组件提供一个“key”，稍后再
		      作详细解释。
		    -->
		    <todo-item
		      v-for="item in groceryList"
		      v-bind:todo="item"
		      v-bind:key="item.id"
		    ></todo-item>
		  </ol>
		</div>
		<script type="text/javascript">
		Vue.component('todo-item', {
		  // todo-item 组件现在接受一个
		  // "prop"，类似于一个自定义 attribute。
		  // 这个 prop 名为 todo。
		  props: ['todo'],
		  template: '<li>{{ todo.text }}</li>'
		})
		var app7 = new Vue({
		  el: '#app-7',
		  data: {
		    groceryList: [
		      { id: 0, text: '蔬菜' },
		      { id: 1, text: '奶酪' },
		      { id: 2, text: '随便其它什么人吃的东西' },
			  { id: 3 ,text: '巧克力蛋糕'}
		    ]
		  }
		})

		</script>
		
	</body>
</html>