vue基础、安装、介绍

双大括号（Mustache语法，又叫胡子语法）

动态赋值语法：可使用字段、表达式、函数、三目运算、计算属性、过滤器

<div id="app"><h1>{{firstName+lastName}}</h1><h1>{{firstName}}{{lastName}}</h1><h1>{{firstName ? firstName+lastName : lastName }}</h1><h1>{{getfullName()}}</h1><h1>{{fullName}}</h1><h1>{{ firstName | filterName(lastName) }}</h1>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: '蔡',lastName: '徐坤'},computed: {fullName() {return this.firstName + this.lastName;}},methods: {getfullName() {return this.firstName + this.lastName;}},filter: {filterName(firstName, lastName ){return firstName + lastName }}})
</script>

v-text

更新DOM的 文本。和 双大括号语法功能一样。不推荐使用

<span v-text="msg"></span>
<span>{{msg}}</span>

v-html

1）更新元素的 innerHTML。内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。 不推荐使用
2）动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
3）在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理

<div v-html="html"></div>

v-show

1）根据表达式的真假值，切换元素的 display CSS property。
2）通过 v-show 表达式的真假值切换的元素一开始被渲染并始终会保留在 DOM 中。
3）v-show 不支持 <template> 元素，也不支持 v-else

<h1 v-show="isShow">Hello!</h1>
<h1 v-show="!isShow">Hello!</h1>

v-if、v-else-if、v-else

1）Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
2）不需要被多余渲染的块可以使用<template> 元素加上v-if，减少结构嵌套
3）下面来看一个经典问题：

<div id="app"><span v-if="isuser"><label for="user">手机登陆</label><input type="text" id="user" placeholder="手机登陆"></span><span v-else><label for="emial">邮箱登陆</label><input type="text" id="emial" placeholder="邮箱登陆"></span><button @click="isuser=!isuser">登录转换</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {isuser: true}})
</script>

问题：我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容

原因：Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了
解决方案：给对应的input添加key，并且我们需要保证key的不同。让vue重新创建新的元素

  <span v-if="isuser"><input type="text" id="user" placeholder="手机登陆" key=“user”></span><span v-else><input type="text" id="emial" placeholder="邮箱登陆" key="emial"></span>

v-show 与 v-if 的区别

1）都是决定一个内容是否被渲染
2）v-if当条件为false时，压根不会有对应的元素在DOM中
v-show当条件为false时，仅仅是将元素的display属性设置为none而已
3）当需要在显示与隐藏之间切片很频繁时，使用v-show
4）当切换不频繁或需要显示与隐藏的内容比较多时，使用v-if

v-for

1）基于源数据多次渲染元素或模板块
2）此指令之值，必须使用特定语法为当前遍历的元素提供别名

<div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

3）原理上，v-for 的默认行为会尝试原地修改元素而不是移动它们。v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

<div v-for="item in items" :key="'item' + item.id"></div>
<div v-for="(item, index) in items" :key="'item' + index"></div>

v-for 中的 key

v-if 与 v-for 一起使用

1. 避免 v-if 和 v-for 同时用在一个元素上（性能问题），v-for 的优先级比 v-if 更高
   两种解决方案：
   将数据替换为一个计算属性，让其返回过滤后的列表

<li v-for="user in activeUsers" :key="user.id">{{ user.name }}
</li>
<script>computed: {activeUsers() {return this.users.filter( user => {return user.isActive})}}</script>

将 v-if 移动至容器元素上 (比如 ul, ol)

<ul v-if="shouldShowUsers"><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul>

v-on（缩写： @）

1. 绑定事件监听器
2. 修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

3. 用法：
   a. 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句
   b. 如果该方法不需要额外参数，那么方法后的()可以不添加
   c. 如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
   d.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<!--当监听事件没有参数时，() 可加可不加。  --><button v-on:click="btnclick1">按钮1</button><button v-on:click="btnclick1()">按钮1</button><!-- 当监听事件需要参数的时候，但是在事件定义时，写方法时省略了小括号，这个时候vue会默认将浏览器生产的event事件对象作为参数传入到方法中。 --><button @click="btnclick2">按钮2</button><!-- 监听事件需要参数的时候，但是在事件定义时，写方法时写了小括号，但是没有传参，会默认undefined。 --><button @click="btnclick2()">按钮2</button><!-- 方法定义时，我们需要event对象，同时又需要其他参数， --><!-- 在调用方法时，使用 $event 就能手动获取到浏览器参数的event对象 --><button @click="btnclick3(123,$event)">按钮3</button>

用在普通元素上时，只能监听原生 DOM 事件

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<button @click="doThis"></button><!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<button @[event]="doThis"></button><!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>// 阻止冒泡
<div @click.stop="doSomthing"></div>// 阻止默认行为
<div @click.prevent="doSomthing"></div>
<form @submit.prevent></form>// 只触发一次
<div @click.once="doSomthing"></div>// 串联修饰符
<div @click.stop.prevent="doSomthing"></div>// 键盘修饰符
<div @keyup.enter="doSomthing"></div> // 别名
<div @keyup.13="doSomthing"></div> // 键盘码// 对象语法 (2.4.0+)
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>//  滚动事件
// .passive 修饰符尤其能够提升移动端的性能
<div @scroll.passive="onScroll">...</div>
//不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

在自定义组件上使用时，可以监听子组件触发的自定义事件。

// 组件中的原生事件
<my-component @click.native="onClick"></my-component> // 不加.native无法触发该事件//内联语句
<my-component @my-event="handleThis(item, $event)" v-for="(item , index) in list" :key="index"></my-component>// 子组件触发事件<my-component @my-event="handleThis"></my-component> // 父组件handleMy() { // 子组件this.$emit('myEvent');}

v-bind（缩写： :）

1. 动态地绑定一个或多个 属性attribute，或一个组件 prop 到表达式

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<img :src="imageSrc"><!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<button :[key]="value"></button><!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName"><!-- options 绑定。“options”必须在 my-component 中声明。-->
<my-component :options="someThing"></my-component><!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

2）绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象
绑定 class

内联字符串拼接语法：
<div  v-for="(item, index) in list" :class="'demo' + index"></div>

对象语法：
//对象表达式
<div  class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div>
data () {return {isActive: true,}
}
//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>
data () {return {count: 0,}
}
cmputed: {demoClassInfo() {return  {'demo-green': count > 0 && count <= 100  ? true :  false,'demo-red': count > 100 ? true :  false,}}
}

数组语法：
//三元表达式
<div  class="demo" :class="[ isActive ? 'demo-red' : 'demo-green' ]"></div>
data () {return {isActive: true,}
}<div  class="demo" :class="[demoClass1, demoClass2]"></div>
data () {return {demoClass1: 'demo-color',demoClass2: 'demo-size',}
}//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>
data () {return {count: 0,}
}
cmputed: {demoClassInfo() {return  [count > 0 && count <= 100  ? 'demo-green' : '',count > 100 ? 'demo-red' : '']}
}

绑定style
css语法可以使用驼峰式（camelCase）、短横分隔命名(kabab-case)

对象语法：
<div  class="demo" :style="{color: currentColor, fontSize: fontSize + 'px'}"></div>
<div :style="{'flex':(options.negativeRate <= 82 ?  options.negativeRate + ' 1 20%' : '82 0 20%')}"><div  class="demo" :style="demoStyleInfo"></div>data () {return {demoStyleInfo:  {demoColor: 'red',fontSize: '0.24rem'}}
}

数组语法：
<div  class="demo" :style="[demoColor, demoSize]"></div>data () {return {demoStyleInfo:  {demoColor: 'color: red',demoSize: 'fontSize: 0.24rem'}}
}

v-model

1. 在表单控件或者组件上创建双向绑定
2. 可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定
   v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
   text 和 textarea 元素使用 value property 和 input 事件；
   checkbox 和 radio 使用 checked property 和 change 事件；
   select 字段将 value 作为 prop 并将 change 作为事件。

// 文本输入
<input v-model="message" placeholder="edit me">// 多行文本输入
<textarea v-model="message" placeholder="add multiple lines"></textarea>// 单选按钮<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><span>Picked: {{ picked }}</span>data: {picked: ''}// 单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>// 多个复选框，绑定到同一个数组：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<span>Checked names: {{ checkedNames }}</span>
data: {checkedNames: []
}

3. 修饰符
   .lazy：添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步
   默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
   .number：自动将用户的输入值转为数值类型
   .trim：自动过滤用户输入的首尾空白字符

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg"><input v-model.number="age" type="number"><input v-model.trim="msg">

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul><li v-for="i in list" v-once>{{i}}</li>
</ul>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
跳过大量没有指令的节点会加快编译。

v-cloak(不常用)

这个指令保持在元素上直到关联实例结束编译。
和 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

computed计算属性

常用场景：在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
使用：调用它的时候，就把它当成一个属性来调用就行，不要在后面加括号

computed 和 methods 的区别

1）在双大括号中使用时，方法后有()，而计算属性没有
2）methods 和 computed，功能效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
3）computed不能接收参数

filter过滤器

<div id="app"><h1>{{ firstName | filterName(lastName) }}</h1>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: '蔡',lastName: '徐坤'},filter: {filterName(firstName, lastName ){return firstName + lastName }}})
</script>