vue语法

模板语法

1.插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令

<div v-html="h"></div>
export default{
data(){
return{
   h:'<h1> Hello World!</h1>'
}
}
}
<!--输出Hello World! -->

v-bind动态绑定属性

在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数组，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。还有一个例子就是a标签的href属性。这时可以使用v-bind指令 ,缩写:(一个冒号)

<img v-bind:src="url"></img>
<a v-bind:href="ahref"></a>
<p :style="[s1,s2]">小美哭了</p>
export default{
data(){
return{
   ahref:'http://www.baidu.com',
    s1:{color:"blue",fontSize:"30px"},
    s2:{backgroundColor:"yellow"}
}
}
}
<!--跳转到百度 -->

表达式

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

2.条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

• v-if

• v-else

• v-else-if

<td v-if="v.sex == 1">男</td>
<td v-else>女</td>

v-show

另一个用于条件性展示元素的选项是 v-show指令。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

<ul v-show="show">

data(){
return{
show: false, //false显示，true隐藏
}}

v-if vs v-show

• v-if每次切换都重建和销毁，v-show为CSS切换

• v-if如果初始化时为假，那么直接不渲染，v-show会

• v-if能支持多模块切换,v-show只针对当前元素

• 如果频繁切换v-show更优秀，如果比较少改变v-if更优秀

3.列表渲染

 v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute

在 <template> 中使用 v-for

v-for 与 v-if 一同使用

当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量，

避免性能方面的浪费（每次渲染都会先循环再进行条件判断）：

<template v-for="v in str_arr" :key="v.id">
    <li v-if="v.id==3" :id="'l'+v.id">
        {{v.name}}
    </li>
</template>

class和style

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

class 对象语法

:class="{c1,c2}"
c1:'c1',
c2:'c2',

class 数组语法

:class="[c1,c2]"
c1:'c1',
c2:'c2',

 style 对象语法

:style="{color,fontSize}"
color:'yellow',
fontSize:'30px',

 style 数组语法

:style="[style1,style2]
style1:{
    color:'yellow'
},
style2:{
    fontSize:'30px'
}

项目运行的启动方式

一种是「冷启动」，一种是「热启动」。

冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

假如用户已经打开过某小程序，然后在一定时间内（五分钟）再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；

事件绑定

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

当代码只有一行时，我们可以直接把代码写在v-on中：

<button @click="counter += 1">Add 1</button>

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">Greet</button>

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法提供参数：

<button @click="say('hi')">Say hi</button>

 有时也需要在内联语句处理器中访问原始的 DOM 事件。对dom元素的获取,可以用特殊变量 $event 把它传入方法：

 <button @click="say('hi'，$event)">Say hi</button>
methods:{
show($event){
     console.log($event.target.name)
   }
}

 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<button @click="one($event), two($event)"> Submit </button>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop 阻止事件传播(阻止冒泡)

<div id="a1" @click="fn2">
    <div id="a2" @click.stop="fn1"></div>
</div>

.prevent 阻止事件默认行为

<form action="1.php" @submit.prevent="onSubmit">
<input type="submit" value="提交"/>
</form>

.capture 父级事件优先处理

<div id="a1" @click.capture="fn2">
    <div id="a2" @click="fn1"></div>
</div>

 .self 不由子元素触发

<div id="a1" @click.self="fn2">
    <div id="a2" @click="fn1"></div>
</div>

 .once 事件只触发一次

<div id="a2" @click.once="fn1"></div>

.passive

passive这个修饰符会执行默认方法。

每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。能够提升移动端的性能。

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

系统修饰键

.ctrl

.alt

.shift

.meta

<input @keyup.enter.ctrl="submit" />

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 在 Ctrl 被按下的时候，即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button

鼠标按钮修饰符

.left

.right

.middle

<button @click.ctrl.left="onClick">A</button>