VUE基础语法01

最新推荐文章于 2024-02-04 14:52:21 发布

西米露U

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量134

点赞数

分类专栏： vue 笔记文章标签： vue html java

本文链接：https://blog.csdn.net/m0_46699799/article/details/108146074

版权

笔记同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

VUE基础语法01

插值
指令
参数

插值

解释

文本
{{msg}}
html
使用v-html指令用于输出html代码
属性
使用v-bind指令绑定给它赋值
表达式
使用v-bind指令与{{}}配合函数符号

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue的基本语法</title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<!-- 插值 -->
		<div id="app">
			<ul>
				<li>
					<p>
						1.1文本 title={{title}},ts={{ts}}
					</p>
				</li>
				<li>
					<p>
						1.2html 
						<div v-html="html"></div>
					</p>
				</li>
				<li>
					<p>
						1.3 属性
						<div>
							<a v-bind:href=href>百度</a>
							<button v-on:click="onClick">按钮</button>
						</div>
					</p>
				</li>
				<li>
						1.4 表达式
					<p>
						{{str.substr(0,6).toUpperCase()}}
						{{number + 1}}
						{{ok ? 'yes' : 'no'}}
					</p>
				</li>
				<li v-bind:id="'list-' + id">
						我的Id是js动态生成的
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					title:'Hello Vue!!!',
					ts:new Date().getTime(),
					html:'<input type="text" value="0">',
					href:'https://www.baidu.com',
					str:'hello',
					number:10,
					ok:false,
					id:22
				}
			},
			methods:{
				onClick(){
					alert("按钮弹出窗");
				}
			}
		});
	</script>
</html>

运行效果如下在这里插入图片描述

浏览器与HBuilder的代码对比

浏览器的开发者模式将代码自动编译了
在这里插入图片描述

指令

指的是带有“v-”前缀的特殊属性
核心指令

(v-if|v-else|v-else-if)
根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue的基本语法</title>
	</head>
	<script type="text/javascript" src="js/vue.js"></script>
	<body>
		<!-- 插值 -->
		<div id="app">
			<ul>
				<li>
					<div v-if="sex == 'boy'">
						boy
					</div>
					<div v-else-if="sex == 'girl'">
						girl
					</div>
					<div v-else>
						noSex
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					sex:'girl'
				}
			}
		});
	</script>
</html>

效果展示
因为sex的值时girl，所以在判断v-if时不成立于是判断v-else-if成立，显示girl，同时不再向下判断
在这里插入图片描述

v-show
与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue的基本语法</title>
	</head>
	<script type="text/javascript" src="js/vue.js"></script>
	<body>
		<!-- 插值 -->
		<div id="app">
			<ul>
				<li>
					<input type="checkbox" v-model="show"  />隐藏或者显示
					<div v-show="show">
						aaaaaaaaa
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					show:false
				}
			}
		});
	</script>
</html>

效果如下
因为show的值是false，所以默认是隐藏，如果设为true的话，那就默认为显示的
在这里插入图片描述

v-for
类似JS的遍历，可以遍历数组也可以遍历对象
遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>

<div id="app">
	  <h1>v-for循环</h1>
	  <div v-for="s in students">
		  {{s}}
		  {{s.name}}
	  </div>
</div>	

<script type="text/javascript">
	var  vue=new Vue({
		el:'#app',
		data:function(){
			return{
				students:[
					{id:1,"name":"a","sex":"女"},
					{id:2,"name":"b","sex":"女"},
					{id:3,"name":"c","sex":"女"},
					{id:4,"name":"d","sex":"女"},
					{id:5,"name":"e","sex":"女"}
				],
		  }
		}
	});
</script>
</body>
</html>

效果如下
红色部分为对象遍历，蓝色部分是对象的属性遍历
在这里插入图片描述

v-bind
v-on
v-model
用来在input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示
例如:

<a v-bind:href="url">...</a>

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定

<a v-on:click="doSomething">...</a>

在这里click参数是监听的事件名。

动态参数

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<a v-on:[evname]="doSomething"> ... </a>

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

 注1：event.preventDefault()方法的作用？
 该方法将通知Web浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

简写

v-on与v-bind的简写

v-bind:的简写:

v-on:的简写@

 <a v-bind:href="url">...</a>
 <a :href="url">...</a>
  
 <a v-on:click="doSomething">...</a>
 <a @click="doSomething">...</a>

过滤器

全局过滤器

Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });

局部过滤器

 new Vue({
     filters:{'filterName':function(value){}}
   });

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
在两个大括号中

{{ name | capitalize }}

在 v-bind 指令中

 <div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联

 {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

 {{ message | filterA('arg1', arg2) }}

注4：js定义一个类

 function Stu(){};
        Stu.prototype.add(a,b){};
        //添加一个新的实例方法

案例：首字母大写/日期格式化

计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

 computed:{
       xxx:function(){
          
       }
   }

监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化
xxx：代表被监听的属性，必须存在

watch:{
      xxx:function(v){
	 }
   }

西米露U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础语法01

VUE基础语法01插值解释代码示例浏览器与HBuilder的代码对比指令参数动态参数修饰符简写过滤器计算属性监听属性插值解释文本{{msg}}html使用v-html指令用于输出html代码属性使用v-bind指令绑定给它赋值表达式使用v-bind指令与{{}}配合函数符号代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue的基本
复制链接

扫一扫