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

一、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;
				}
			}