vue基础语法

2019-07-05 本文已影响0人牛妈代代

vue常用基础语法：

一、模板语法

1.vue使用基于html的模板语法，智能计算出最少需呀重复渲染的组件；
2.数据绑定使用“Mustache”语法：{{ msg }};数据为双向绑定，可以使用v-once指令实现单次渲染；
3.花括号内可以进行单行的js运算；

{{ mumber+1}}
{{ ok?"yes":"no" }}
{{ message.split("").reverse().join("") }}
<div v-bind:id="'list'+id"></div>

4.指令参数v-开始，例如：<a v-bind:[attributeName]="url">...</a>
5.指令缩写：v-bind缩写为： v-on缩写为@；
6.Using v-html directive: 谨慎v-html；

二、class绑定：

动态添加class
class绑定对象
class绑定数组
class绑定计算，isActive是一个计算

三、style内联样式绑定：

<p v-bind:style="styleObj">绑定对象</p>；常用
<p v-bind:style="{{ background:msgBg, font-size:msgFontSize}}">绑定对象</p>
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值，根据浏览器支持选择</div>

四、条件渲染：v-if;语句必须紧跟其后，否则不识别；

v-if;v-else if;v-else;
通常使用template作为条件渲染的容器，容器内容元素如果使用key标识符则不会复用，否则会重复利用；

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

key表示的元素不会重复利用，会渲染新的元素；测试了id不行，必须使用key

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

五、v-show可以做频繁重复性的显示/隐藏交替设置；

v-show指令也可以控制显示隐藏元素
v-show和v-if的区别：
v-show会渲染dom树，其元素的display属性受条件的控制显示隐藏元素；
v-show不支持template元素
v-if根据条件判断是否渲染dom数；

备注：比建议v-if和v-for一起使用；

六、列表渲染：v-for

循环数据类型：常量，数组，对象，计算属性；

1、<li v-for="n in 5">{{ n }}</li>
2、<li v-for="(item,index) in items">{{ item}}</li>
3、<li v-for="(value,key,index) in obj">{{value}}</li>
4、<li v-for="(value,key,index) in evenNumber">{{value}}</li>;

evenNumber为函数，返回数组；常用语数组的部分渲染；
注意：可以使用of替代in
for循环不改变dom元素，而是替换元素，要想改变dom结构，必须使用key标明；
对象具有迭代属性时，循环会进行升序排列输出；
v-for的优先级大于v-if，不建议同事使用；

七、事件处理：v-on;缩写为@；

1.常见的绑定函数分量重，一种是不传参的，默认是event，一种是传参的add(msg, $event)(又叫内联容器方法);转参数使用event事件时，需要设置转移字符$ event;
2.修饰符，可以定义事件触发的先后顺序，默认事件及事件冒泡，常用的有以下：
事件修饰符：<form v-on:submit.prevent="onSubmit">...</form>
.prevent:阻止默认事件；
.stop:阻止事件的进行；
.once:事件只进行一次；
.capture:事件触发模式为捕获模式，外出先触发；
.slef:事件触发元素本身时处理，及事件不是捕获或是冒充触发的；
.passive;滚动事件的默认行为，鼠标滚动将会立即触发；不能和prevent一起使用，会报错；

按键修饰符：
.enter:俺enter键触发函数
.tab
.delete
.esc
.space
.up
.down
.left
.right

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

方括号用于js运算，也可使是data属性；必须返回一个字符串值，返回null为移除绑定事件；

八、表单数据双向绑定：v-model；语法糖，实现原理是监听表单元素的input，change事件来实现的；

1.text/textarea监听的是input事件；可以使用.lazy修饰符来改变监听事件为change，v-model绑定的是value值
2.checkbox/radio监听的是change事件；v-model绑定changed值，或是value值；当v-model绑定是数组时是绑定的value
3.select将value作为prop，并监听change事件；ios推荐为select使用首相默认控制，

常用修饰符
.lazy:改变监听事件input为change
.number：获取数值型value;
.trim:获取除去空格的value值；

学习总结，仅作参考，欢迎纠错；