Vue.js学习小结

最新推荐文章于 2023-12-21 14:34:21 发布

努力努力再努力U

最新推荐文章于 2023-12-21 14:34:21 发布

阅读量533

点赞数

分类专栏：前台文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42980244/article/details/106439340

版权

前台专栏收录该内容

10 篇文章 0 订阅

订阅专栏

入门，下载vue.js到本地，用<script type="text/javascript" src="js/vue.js" ></script>引入。

vue.js是一个允许采用简洁的模板来声明式地将数据渲染到Dom的一个系统。

每个Vue应用都是通过Vue函数来创建一个新的Vue实例开始的

Vue是一个构建用户界面的框架，通过简单的api实现响应式的数据绑定和组合。

v-html属性添加html文本

v-bind:class属性绑定样式

v-if属性判断（可用来是否显示）

v-model属性用在input、select、textarea、checkbox、radio等表单元素上创建双向数据绑定

v-on:click属性唤醒方法

v-eles-if 属性

v-else 属性

v-show 属性是否显示

v-for属性循环指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<style>
	.class1{
	  background: #444;
	  color: #eee;
	}
	</style>
	<body>
		<div id="app">
			<h1>{{a}}</h1>
			<div v-html="message1"></div>
			<label for="r1">修改颜色</label><input type="checkbox" v-model="usea" id="r1">
			<br><br>
			<div v-bind:class="{'class1': usea}">v-bind:class 指令
			</div>
			<p v-if="seedn">aaaaa</p>
			<template v-if="ok">
		      <h1>教程</h1>
		      <p>学的想！</p>
		      <p>打字辛苦啊！！！</p>
		    </template>
		    
		    <p>{{ message }}</p>
    		<button v-on:click="reverseMessage">反转字符串</button>
    		<hr />
    		{{ message2 | capitalize }}
    		
    		<div v-if="Math.random() > 0.5">
			  Sorry
			</div>
			<div v-else>
			  Not sorry
			</div>
			
			
			 <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>
			<h1 v-show="ok">Hello!</h1>
			
			<ol>
		    <li v-for="site in sites">
		      {{ site.name }}
		    </li>
  			</ol>
  			
  			<ul>
		    <li v-for="(value, key) in object">
		    {{ key }} : {{ value }}
		    </li>
		  </ul>
		  
		  <ul>
		    <li v-for="(value, key, index) in object2">
		     {{ index }}. {{ key }} : {{ value }}
		    </li>
		  </ul>
		  <hr />
		  <ul>
		    <li v-for="n in 10">
		     {{ n }}
		    </li>
		  </ul>
		</div>
		
		<script type="text/javascript">
			
			var vm = new Vue({
				el :'#app',
				data : {
					a : '123',
					message : 'asd',
					message1 : '<h1>jaaajj</h1>',
					message2 : 'hello,yulin',
					usea : false,
					seedn : true,
					ok : false,
					type:'a',
					ok : true,
					sites: [
				      { name: 'Runoob' },
				      { name: 'Google' },
				      { name: 'Taobao' }
				    ],
				    object: {
				      name: '教程',
				      url: 'http://www.r.com',
				      slogan: '爱上对方过后'
				    },
				    object2: {
				      name: '教程',
				      url: 'http://www.1234567.com',
				      slogan: '梦想！'
				    }
				},
				methods: {
				    reverseMessage: function () {
				      this.message = this.message.split('').reverse().join('')
				    }
				},
				filters: {
				    capitalize: function (value) {
				      if (!value) return ''
				      value = value.toString()
				      return value.charAt(0).toUpperCase() + value.slice(1)
				    }
				  }
				
			});
			
			vm.$watch('a',function(newVal,oldVal){
				console.log(newVal,oldVal);	
			});
			
		</script>
	</body>
</html>

努力努力再努力U

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习小结

入门，下载vue.js到本地，用<script type="text/javascript" src="js/vue.js" ></script>引入。vue.js是一个允许采用简洁的模板来声明式地将数据渲染到Dom的一个系统。每个Vue应用都是通过Vue函数来创建一个新的Vue实例开始的v-html属性添加html文本v-bind:class属性绑定样式v-if属性判断（可用来是否显示）v-model属性用在input、select、...
复制链接

扫一扫