观察者模式 5G permissions vue开发 vue修改样式 npm安装vue jquery遍历对象 linux关闭mysql ceb转换成pdf在线转换 mser算法 python最大值 python关键字 python写文件 python定义变量 python命令大全 python可视化编程 javaenum java声明变量 java集合图 linux的find 远程登录linux python源码 Ext2Fsd java程序设计基础 subscribe spss22安装教程 ABViewer 数组求和 js发送http请求 pycharm中文版 cad自动保存位置 图片转pdf软件 圣武枪魂 华为工具箱 熊猫关键词 python简单代码 dll注入器 安卓ui框架 战地1942修改器 剑魔刷图加点
当前位置: 首页 > 学习教程  > 编程语言

vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听

2020/10/8 20:31:25 文章标签:

vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听一、vue赋值的三种方式二、表达式三、指令四、修饰符五、监听一、vue赋值的三种方式 1、{{属性名}} <h2>{{data}}</h2>2、v-html:能输出源码信息 <input v-model"name"/>3、v-text&a…

vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听

  • 一、vue赋值的三种方式
  • 二、表达式
  • 三、指令
  • 四、修饰符
  • 五、监听

一、vue赋值的三种方式

1、{{属性名}}

<h2>{{data}}</h2>

2、v-html:能输出源码信息

<input v-model="name"/>

3、v-text:只能输出文本信息

<div v-text="sa" style="color: blue;"></div>

二、表达式

vue支持所有的js的方法各种表达式
字符:

<!-- 截取字符串 -->
{{str.substr(0,3).toUpperCase()}}<br />

数字

{{ number + 1 }}不能进行自动类型转换<br />

三元运算符

{{ ok ? 'YES' : 'NO' }}<br />

字符串拼接

<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

注:其中的变量在vue中声明了的

三、指令

指令是指带有“v-”前缀的特殊属性
核心指令:(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if

<div v-if="1==1">我是if</div>

v-else:上一个指令必须是v-if或者v-else if

<div v-else>我是v-else</div>

v-else-if:上一个指令必须是v-if

<div v-else-if="1==4">我是else if</div>

注意:在这些指令中只能识别变量,如果写一个变量和一个字符串比较,会自动识别字符串为变量
v-show:当里面的结果为false时,这个控件不会被显示

<div v-show="false">asdasdsa1</div><br/>

v-for:类似JS的遍历,遍历数组:

 <div v-for="i in fore">
			 	{{i}}
			 </div>

首先在vue实例中声明fore数组,即可,i为具体的对象

fore:['zs','ls','ww','yy','xx']

遍历对象
首先声明v对象数组,其中v属性值,k属性名,i下标,要注意对象是先写中括号

scores:[
					{
						cours:'语文',
						score:'78'
					},
					{
						cours:'数学',
						score:'88'
					},
					{
						cours:'英语',
						score:'99'
					},
					
				]
<div v-for="v in scores">
				 <div v-for="(v,k,i) in v">
					{{k}} :{{v}}
				 </div>
			 </div>

v-bind:用来绑定控件的属性什么的
v-on:用来绑定各种事件
v-model:也是用来绑定属性等各种值;有一个特点就是,能自动更新对应的值

四、修饰符

有很多中修饰符,在这里只是说明有修饰符这种,可以上官网上查找对应的文档,每个修饰符都有它的特殊的作用

       <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

还有按键修饰符,还可以查找对应的数字调用即可

  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">

      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">

    <--  全部的按键别名:
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta      -->

五、监听

watch:{
				a:function(){
					 this.b=this.a*1000;
				},
				b:function(){
					this.a=this.b/1000;
				}
			}

本文链接: http://www.dtmao.cc/news_show_250328.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?