学习周记10Vue.js（+实验题）

最新推荐文章于 2024-03-01 10:14:58 发布

1ridescence

最新推荐文章于 2024-03-01 10:14:58 发布

阅读量322

点赞数

分类专栏： html 文章标签： vue

本文链接：https://blog.csdn.net/IR_Mokou/article/details/117082480

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习周记10Vue.js

关于Vue
Vue实现
Vue模板语法
Vue条件语句
Vue循环语句
实验题

关于Vue

Vue类似于 view是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue实现

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

var vm = new Vue({
  // 选项
})

1）在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。（接下来的改动全部在以上指定的 div 内，div 外部不受影响。）

<div id = "vue_det"></div>

2）data 用于定义属性，实例中有三个属性分别为：site、url、alexa。methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

3）当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

Vue模板语法

1）插值文本

<div id="app">
  <p>{{ message }}</p>
</div>

2）Html

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

3）表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

4）指令

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

Vue条件语句

else-if条件

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

Vue循环语句

for循环：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

实验题

1）

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		</head>
		<body>
		<div id="app">
		   请输入1-10：<input type="text"  v-model="type" />
		   <div v-if="type>1&&type<10">
			   true
		   </div>
		   <div v-else>
			   false
		   </div>
		</div>   
		<script>
		new Vue({el: '#app',data: {type:''}
		})
		</script>
		</body>
		</html>

V-Bind

<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<script>
new Vue({el: '#app',data: {activeColor: 'green',fontSize: 50}})
</script>
</body>
</html>

2）实验2

<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active1{width:100px;height:100px;background:red;}
.active2{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{'active1':isActive,'active2':!isActive}"></div>
  <br>
  <button v-on:click="isActive=!isActive">换色</button>
</div>
<script>
new Vue({el: '#app',data: {isActive:true }})
</script>
</body>
</html>

复选框实验

<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({el:'#app',data:{checked:false,checkedNames: []}})
</script>
</body>
</html>

3）实验3

<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
p{width:80%;margin:0 auto;}
input,
select{display:inline-block;width:50%;height:25px;}
select{height:40px;}
button{width:200px;background: rgb(41,135,243);color: red;}
.err_content li{color: red;}
</style>
</head>
<body>
<form id="my_from"@submit="checkFrom">
<div class="err_content"v-if="errMsg.length">
	<b>错误提示：</b>
	<ul>
		<li v-for="err in errMsg">{{err}}</li>
			</ul>
</div>
<p>
	<label for="user_name">姓名：</label>
	<input id="user_name" name="user_name" type="text" v-model="user_name">
</p>
<br>
<p>
	<label for="user_age">学号：</label>
	<input 
	id="user_age"
	name="user_age"
	type="number"
	v-model="user_age"
	min="0"
	max="100"
	>
</p>
<br>
<p>
	<label for="user_like">音乐：</label>
	<select name="user_like" id="user_like" v-model="user_like">
		<option value="0">电子</option>
			<option value="1">古典</option>
				<option value="2">摇滚</option>
				</select>
				</p>
				<br>
				<p>
					<button type="submit">提交</button>
				</p>
				</form>
				
<script type="text/javascript">
new Vue({el:'#my_from',data: function(){
	  return{
		  errMsg:[],
		  user_name:null,
		  user_age:null,
		  user_like:null
	  }
	  },
	  methods:{
		  checkFrom(e){
			  this.errMsg=[]
			  if(!this.user_name){
				  this.errMsg.push('用户名不能为空')
			  }
			  if(!this.user_age){
			  				  this.errMsg.push('学号格式错误')
			  }
			  if(!this.user_like){
			  				  this.errMsg.push('音乐不能为空')
			  }
			  if(!this.errMsg.push){
			  				  return true
			  }
			  e.preventDefault()
		  }
	  }
})
</script>
</body>
</html>

在这里插入图片描述

1ridescence

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记10Vue.js（+实验题）

学习周记10Vue.js关于VueVue实现Vue模板语法关于VueVue类似于 view是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue实现每个 Vue 应用都需要通过实例化 Vue 来实现。var vm = new Vue({ // 选项})1）在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。（接下来的改动全部在以上指定的 div 内，div 外
复制链接

扫一扫