这么好用的Vue你还不会？

最新推荐文章于 2024-04-24 09:27:42 发布

Bug本身

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/ZhiCun_java/article/details/108078130

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue基础语法一

代码及注释
- 下载js文件
- 代码
网页效果

一个一个代码的试，不要一起直接复制了，不然你怎么看效果，数据有些是和下面的 script绑定的，还有方法也是，注意同步，有些效果可能要网页控制台才能看出效果。

代码及注释

代码里有注释和-------**li **表明了，就不说明了，代码在下面，记得去Vue官网下载js开发文件或者直接用在线的也可以，把调用的js注释换一下就可以了，我下面用的是本地js文件。

下载js文件

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>-->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 1、插值 -->
		<div id="app">
			<ul>
				<li>
					<p>
						title={{title}},ts={{ts}}
					</p>
				</li>
				<li>1.2 html</li>
				<div v-html="html"></div>
				<li>1.3 属性</li>
				<div>
					<a href="https://www.baidu.com">百度</a>
					<a v-bind:href='href'>新浪</a>
				</div>
				<li>1.4 表达式</li>
				<div>
					{{str.substr(0,6).toUpperCase()}}<br />
					{{sbz + 1 }}<br />
					{{ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</div>
				<h3>2.1 核心指令</h3>
				<li>v-if|v-else|v-else-if</li>
				<div v-if="sex=='boy'">
					aaaa
				</div>
				<div v-else-if="">
					bbbb
				</div>
				<div v-else>
					ccc
				</div>
				<li>v-show</li>
				<input type="checkbox" v-model="show" />隐藏显示
				<div v-show="show">
					asdad
				</div>
				<li>v-for</li>
				<div v-for="st in students">
					{{st.name}}
				</div>
				<li>v-model/v-for</li>
				<div v-for="st in students">
					<input type="checkbox" v-medlel="st.id" value="st.id" />{{st.name}}
				</div>
				<li>监听属性 watch</li>
				KB:<input type="text" name="kb" v-model="kb" /><br />
				MB:<input type="text" name="mb" v-model="mb" /><br />
				<li>简写</li>
				<div>
					<a v-on:click="onclick">点</a>
					<a @click="click">屁</a>
				</div>
				<div>
					var 作用于整个vm 全局变量定义
					let 作用于最近的一对{} 局部变量定义
					常用let来声明对象，避免用var全局变量导致数据污染
				</div>
				<a v-bind:[attributename]="url">asd</a><br />
				{{str|qwe}}
			</ul>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: function() {
				return {
					title: 'hello Vue',
					ts: new Date().getTime(),
					html: '<input type="text" value=0>',
					href: 'http://www.sina.com',
					str:'hello vue!',
					sbz:10,
					ok:true,
					id:22,
					sex:'boy',
					show:true,
					students:[
						{id:1,name:'zs',fs:85},
						{id:2,name:'ls',fs:23},
						{id:3,name:'ww',fs:64},
						{id:4,name:'zl',fs:100}
					],
					mb:1,
					kb:1024,
					attributename:'href',
					url:'https://www.baidu.com'
				}
			},
			methods: {
				onclick: function() {
					alert(111);
				},
				click: function() {
					alert('sb');
				},
			},
			watch:{
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			},
			filters:{
				'qwe':function(str){
					alert('str');
				}
			}
		});
	</script>
</html>

网页效果

因为有过滤器的原因会弹出很多次这个弹出框，所以建议把最下面的注释掉，我上面的代码已经注释了，建议每个一小段代码的复制去看每一个的效果。
在这里插入图片描述

Bug本身

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
这么好用的Vue你还不会？

Vue基础语法一代码及注释下载js文件代码网页效果一个一个代码的试，不要一起直接复制了，不然你怎么看效果，数据有些是和下面的script绑定的，还有方法也是，注意同步，有些效果可能要网页控制台才能看出效果。代码及注释代码里有注释和-------**li **表明了，就不说明了，代码在下面，记得去Vue官网下载js开发文件或者直接用在线的也可以，把调用的js注释换一下就可以了，我下面用的是本地js文件。下载js文件代码<!DOCTYPE html><html> &lt
复制链接

扫一扫