vue.js的几个极简单实例_vue的js文件例子-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52374211/article/details/115422191

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>vue导航菜单</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
		<style>
			/* nav.Home是nav标签选择器和.Home类选择器同时存在才生效的意思 */
			/* 然后生效后再选择nav标签下包含有.home类的元素 */
			nav.Home .home,
			nav.project .project,
			nav.contact .contact,
			nav.about .about{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<nav v-bind:class="active">
				<a href="#" class="home" v-on:click="choose('Home')">Home</a>
				<a href="#" class="project" @click="choose('project')">Project</a>
				<a href="#" class="contact" @click="choose('contact')">Contact</a>
				<a href="#" class="about" @click="choose('about')">About</a>
			</nav>
			<p>点击了<strong>{{active}}</strong></p>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					active:'Home'
				},
				methods:{
					choose:function(item){
						this.active=item;
					}
				}
			})
		</script>
	</body>
</html>

没有写样式，只写了用法，练手

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue点击弹出编辑框</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
		<style>
			.hid{
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-if="showInput">
				<input v-model="bindText" />
			</div>
			<p v-on:click="toggleShowInput()">点我{{bindText}}</p>
			<input v-bind:class="{hid:state}" v-model="testText"/>
			<p @click="test()">测试{{testText}}</p>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					bindText:'编辑内容',
					showInput:false,
					testText:'我是测试用的',
					state:true
				},
				methods:{
					toggleShowInput:function(){
						this.showInput = !this.showInput
					},
					test:function(){
						this.state = !this.state
					}
				}
			})
		</script>
	</body>
</html>

vue官网上的js引入链接不能用，不知道怎么回事

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>总计</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
		<style>
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<form id="app">
			<ul>
				<li v-for="item in dataList" v-bind:class="{active:item.active}" v-on:click="toggle(item)">
					{{item.name}}{{item.price | toFixed}}
				</li>
			</ul>
			<div>
				total:{{count() | toFixed}}
			</div>
		</form>
		<script>
			/* 自定义过滤器toFixed，加￥符号和保留两位小数 */
			Vue.filter('toFixed',function(v){
				return '￥'+ v.toFixed(2)
			})
			var vm = new Vue({
				el: '#app',
				data: {
					dataList: [
						{
							id:0,
							name: 'The first',
							price: 100,
							active: true
						}, 
						{
							id:1,
							name: 'The second',
							price: 200,
							active: false
						}, 
						{
							id:2,
							name: 'The one',
							price: 300,
							active: false
						}, 
						{
							id:3,
							name: 'The last one',
							price: 400,
							active: false
						}
					]
				},
				methods:{
					count:function(){
						var total = 0;
						this.dataList.forEach(function(item){
							if (item.active) {
								total += item.price
							}
						})
						return total
					},
					toggle:function(item){
						item.active = !item.active
					}
				}
			})
		</script>
	</body>
</html>

分隔符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<form id="app">
			<div>
				<input v-model="searchString" placeholder="请输入搜索内容"/>
			</div>
			<div>输入了：{{searchString}}</div>
			<ul>
				<li v-for="item in filterData">
					<a v-bind:href="item.url">
						<img v-bind:src="item.image"/>
					</a>
					<p>{{item.title}}</p>
				</li>
			</ul>
		</form>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					searchString: '',
					dataList: [
						{
							"title": "What You Need To Know About CSS Variables",
							"url": "https://www.runoob.com/css/css-tutorial.html",
							"image": "https://static.runoob.com/images/icon/css.png"
						},
						{
							"title": "Freebie: 4 Great Looking Pricing Tables",
							"url": "https://www.runoob.com/html/html-tutorial.html",
							"image": "https://static.runoob.com/images/icon/html.png"
						},
						{
							"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
							"url": "https://www.runoob.com/css3/css3-tutorial.html",
							"image": "https://static.runoob.com/images/icon/css3.png"
						},
						{
							"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
							"url": "https://www.runoob.com/css3/css3-tutorial.html",
							"image": "https://static.runoob.com/images/icon/css3.png"
						},
						{
							"title": "Learn SQL In 20 Minutes",
							"url": "https://www.runoob.com/sql/sql-tutorial.html",
							"image": "https://static.runoob.com/images/icon/sql.png"
						},
						{
							"title": "Creating Your First Desktop App With HTML, JS and Electron",
							"url": "https://www.runoob.com/js/js-tutorial.html",
							"image": "https://static.runoob.com/images/icon/html.png"
						}
					]
				},
				computed:{
					filterData:function(){
						var filterDataList = this.dataList
						var inputString = this.searchString
						if (!inputString) {
							return filterDataList
						}
						/* trim()删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等,不会改变原始字符串 */
						/* toLowerCase()字符串变小写 */
						inputString = inputString.trim().toLowerCase();
						filterDataList = filterDataList.filter(function(item){
							if (item.title.toLowerCase().indexOf(inputString) !== -1) {
								return item
							}
						})
						return filterDataList
					}
				}
			})
		</script>
	</body>
</html>

手动分隔符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换布局</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
		<style>
			ul.small div,.active1{
				color:red;
			}
			ul.large div,.active2{
				color: green;
			}
		</style>
	</head>
	<body>
		<form id="app">
			<div>
				<a href="#" v-on:click="layout='small'" v-bind:class="{active1:layout=='small'}">小图排序</a>
				<a href="#" @click="layout='large'" v-bind:class="{active2:layout=='large'}">大图排序</a>
			</div>
			<ul v-if="layout=='small'" class="small">
				<div>此时是：{{layout}}图</div>
				<li v-for="item in dataList">
					<a v-bind:href="dataList.url">
						<img v-bind:src="item.image.small"/>
					</a>
					<p>{{item.title}}</p>
				</li>
			</ul>
			<ul v-if="layout=='large'" class="large">
				<div>此时是：{{layout}}图</div>
				<li v-for="item in dataList">
					<a v-bind:href="item.url">
						<img v-bind:src="item.image.large"/>
					</a>
				</li>
			</ul>
		</form>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					layout: 'small',
					dataList: [
						{
							"title": "HTML 教程",
							"url": "https://www.runoob.com/html/html-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/htmlbig.png",
								"small": "https://static.runoob.com/images/icon/html.png"
							}
						},
						{
							"title": "CSS 教程",
							"url": "https://www.runoob.com/css/css-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/cssbig.png",
								"small": "https://static.runoob.com/images/icon/css.png"
							}
						},
						{
							"title": "JS 教程",
							"url": "https://www.runoob.com/js/js-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/jsbig.jpeg",
								"small": "https://static.runoob.com/images/icon/js.png"
							}
						},
						{
							"title": "SQL  教程",
							"url": "https://www.runoob.com/sql/sql-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/sqlbig.png",
								"small": "https://static.runoob.com/images/icon/sql.png"
							}
						},
						{
							"title": "Ajax 教程",
							"url": "https://www.runoob.com/ajax/ajax-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/ajaxbig.png",
								"small": "https://static.runoob.com/images/icon/ajax.png"
							}
						},
						{
							"title": "Python 教程",
							"url": "https://www.runoob.com/python/python-tutorial.html",
							"image": {
								"large": "https://static.runoob.com/images/mix/pythonbig.png",
								"small": "https://static.runoob.com/images/icon/python.png"
							}
						}
					]
				}
			})
		</script>
	</body>
</html>

仿菜鸟教程

---分享是程序员的美德