VUE专题此次Vue专题计划从基础语法（v-model会拿出来单独写），再到组件、vue-router和vuex，从简入

此次Vue专题计划从基础语法（v-model会拿出来单独写），再到组件、vue-router和vuex，从简入深，有一个好的基础会使后面的学习事半功倍！

v-text

用于将数据填充到标签中，作用和插值表达式类似，但是不会出现闪动问题。

v-html

用于将HTML片段填充到标签中，可能有安全问题。

v-pre

用于显示原始信息。

v-once

是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

v-bind

vue的属性一般用v-bind来绑定属性

v-bind可以简写为（语法糖） :

**修饰符 **

.prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)

.camel - (2.1.0+) 将kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

.sync (2.3.0+)语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

**用法 **

动态地绑定一个或多个特性，或一个组件的prop到表达式

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

实例

v-on

监听 DOM 事件，并在触发时运行一些 JavaScript 代码。指令简写为 @

**事件修饰符 **

.stop 阻止冒泡，调用 event.stopPropagation()

.prevent 阻止默认事件，调用 event.preventDefault()

.capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

**实例 **
事件处理

基本语法
test
简写
test
不要使用箭头函数定义事件处理函数
test
默认参数

事件处理函数默认接收一个参数：event 事件对象
test
事件传参
- {{ item }} test
如果想要在手动传递了参数的情况下还得到默认的 event 事件对象

$event 是固定的语法 API，在这里就表示那个事件对象
test
** v-for和Key **

用于遍历，把一个数组对应为一组元素。

唯一标识，不建议使用index。（diff算法）

**四种用法 **

迭代普通数组
迭代对象数组

迭代对象

data:{
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
} 

在html中使用 v-for 指令渲染 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

4. 迭代数字注意：

如果使用v-for迭代数字的话，前面 count 的值从 1 开始 >

<p v-for="count in 10">这是第{{count}}次循环</p>

** v-if和v-show **

决定元素是否显示与隐藏 >

 v-if
            语法：<元素 v-if='表达式'></元素>
 v-show
            语法：<元素 v-show='表达式'></元素>

两者都是
true显示
false不显示

**区别 **

v-if

> true 渲染该元素

false 不渲染该元素 >

v-show 只是简单的控制display

true: diaplay:block

false: display:none

结论：一般来说，v-if有更高的切换开销，v-show有更高的初始化开销如果需要频繁切换推荐使用v-show，

VUE专题

v-text

v-html

v-pre

v-once

v-bind

v-on

事件处理

基本语法

简写

不要使用箭头函数定义事件处理函数

默认参数

事件传参