第十周学习笔记

最新推荐文章于 2024-08-31 01:33:31 发布

我爱拜仁慕尼黑

最新推荐文章于 2024-08-31 01:33:31 发布

阅读量103

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46096384/article/details/118348794

版权

第十周学习笔记

认识vue

认识vue

1.1vue简介

Vue.js本质是将数据和内容展现的视图分开，即所谓的MV模式，代码可以分为三个板块：模型(Model)，逻辑控制(*)，视图(View)，模型板块负责数据，视图板块负责样式，逻辑控制负责将视图和数据关联。这样的好处是，当需求发生变动时，只需要修改对应的板块。

1.2vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h4>site : {{site}}</h4>
		<h4>url : {{url}}</h4>
		<h4>{{details()}}</h4>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "三梁涧本绝，千仞路犹通。",
				url: "https://www.shicimingju.com/",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + "  即此神山内，银牖映仙宫。";
				}
			}
		})
	</script>
</body>
</html>

在这里插入图片描述

1.3vue.js模板语法-修改属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例-属性</title>
</head>
<style>
.class1{
  background:grey;
  color: white;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    蜗角虚名，蝇头微利，算来著甚干忙。事皆前定，谁弱又谁强。且趁闲身未老，尽放我、些子疏狂。百年里，浑教是醉，三万六千场。
思量。能几许，忧愁风雨，一半相妨，又何须，抵死说短论长。幸对清风皓月，苔茵展、云幕高张。江南好，千钟美酒，一曲满庭芳。
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

在这里插入图片描述

1.4vue.js条件语句-随机数判断大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例-条件语句</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
    <div v-if="Num > 0.5">
      随机数为{{ Num}} > 0.5
    </div>
    <div v-else>
     随机数为{{ Num}} < 0.5
    </div>
</div>
<script>
new Vue({
  el: '#app',
  data:{
       Num:Math.random()
    }
})
</script>
</body>
</html>

在这里插入图片描述

1.5vue.js循环语句-5*5乘法表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例-循环语句(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <b v-for="n in 5">
		 <div v-for="m in n">
     {{ n }}*{{ m }}={{ m*n }}
    </div>
	  </b>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>