VUE专题（一）用于将数据填充到标签中，作用和插值表达式类似，但是不会出现闪动问题。用于将HTML片段填充到标签中，可

此次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 绑定不支持数组和对象。

实例


<!-- 绑定一个属性 --> <img v-bind:src="imageSrc">

<!-- 缩写 --> <img :src="imageSrc">

<!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName">

<!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component>

<!-- XLink --> <svg><a :xlink:special="foo"></a></svg>

v-on

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

事件修饰符

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

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

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

实例

<div id="app">
        <h1>事件处理</h1>
        <h2>基本语法</h2>
        <button v-on:click='handleClick'>test</button>
        <h2>简写</h2>
        <button @click='handleClick2'>test</button>
        <h2>不要使用箭头函数定义事件处理函数</h2>
        <button @click='handleClick3'>test</button>

        <h2>默认参数</h2>
        <p>事件处理函数默认接收一个参数：event 事件对象</p>
        <button @click='handleClick4'>test</button>

        <h2>事件传参</h2>
        <ul>
            <li v-for='item in todos'>{{ item }}
                <button @click='handleClick5(item)'>test</button>
            </li>
        </ul>
        <p>如果想要在手动传递了参数的情况下还得到默认的 event 事件对象</p>
        <p>$event 是固定的语法 API，在这里就表示那个事件对象</p>
        <button @click='handleClick6(123,$event)'>test</button>
    </div>

v-for和Key

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

key

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

四种用法

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

在data中定义对象

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

html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

迭代数字注意：

如果使用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专题（一）