VUE 指令

Vue 指令


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令title>
head>
<body>
    <div id="app">
        <p v-cloak="msg">{{ msg }}p>
        <p v-text="msg2">p>
        <p v-html="msg2">p>

        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show">
        <input type="button" value="按钮" :title="mytitle + '123'" @click="show">

    div>


// 引入Vue 的依赖
<script src="../vue.js">script>

    <script>
        // 实例化
        var vm = new Vue({
            // 操作的 DOM 元素
            el : "#app",
            data : { // 属性
                msg : '123',
                msg2 : '

这是一个h1标签

'
, mytitle : '这是自定义的title' }, methods : { // 方法 show : function () { alert("show"); } } });
script> body> html>
  • v-text
    • 没有闪烁问题
    • 会覆盖元素中原本的内容
    • html标签会作为字符串直接输出,不会解析标签
  • v-html
    • 没有闪烁问题
    • 会覆盖元素中的内容
    • html标签会按照标签解析
  • v-cloak
    • {{ 属性名 }}

    • 有占位符闪烁问题
    • 只会替换占位符的内容,不会覆盖元素中的原本内容。
  • v-bind:[属性名]=”xxx”
    • 是 Vue 中提供用于绑定属性的指令,可以简写 :titile="mytitle"
    • v-bind 中可以写合法的 js 表达式。
  • v-on
    • 事件绑定指令
    • v-on:事件 = "方法名"
    • 简写 @事件 = ""
    • 如果方法名加了小括号() 那么就可以给这个方法进行传参。

事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时,使用事件捕获模式
  • .self 只在事件在该元素本身(比如不是子元素)触发时,触发回调
  • .once 事件只触发一次

v-model 指令 —- 双向数据绑定

  • v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V ,无法实现双向数据绑定
  • v-model 可以实现表单元素和 Model 中数据的双向数据绑定
    注意:v-model 只能作用在表单元素上中
    如: input select textare CheckBox 等。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model双向数据绑定title>
head>
<body>
    <div id="box">
        <h2>{{ msg }}h2>

        // 在页面 V 修改数据,可以同时修改 M 中的 msg 数据 
        <input type="text" v-model="msg">
    div>

    <script src="../vue.js">script>
    <script>
        var vm = new Vue({
            el : "#box",
            data : {
                msg : "This is one"
            }
        });
    script>
body>
html>

Vue 中使用样式

使用 class 样式

  1. 数组

    这是一个邪恶的h1

  2. 数组中使用三元表达式

    这是一个邪恶的h1

  3. 数组中嵌套对象
    使用对象可以提高代码可读性

    这是一个邪恶的h1

  4. 直接使用对象

    这是一个邪恶的h1

使用内联样式

  1. 直接在元素上通过 :style 的形式,书写样式对象

    这是一个邪恶的h1

  2. 将样式对象定义到 data 中,并直接引用到 :style 中。

    • data 中定义样式
    data:{
        h1style:{'color':'red', 'font-weight':200}
    
    } 
    • 在元素中,通过属性绑定的形式,将样式应用到元素中。

      这是一个邪恶的h1

  3. :style 中通过数组,引用多个 data 上的样式对象。

    • data 中定义样式
    data:{
        h1style:{'color':'red', 'font-weight':200},
        h1style2:{'font-size':'30px', 'fontStyle':'italic'}
    
    } 
    • 在元素中,通过属性绑定的形式,将样式应用到元素中。

      这是一个邪恶的h1

v-if 与 v-show

  • v-if
    • 特点:每次都会重新创建或者删除元素。
    • 有较高的切换性能消耗
    • 如果元素可能永远不会显示出来被用户看到,则推荐使用 v-if
  • v-show
    • 特点:每次不会进行DOM的创建和删除操作,只是切换了元素的 display:none 样式。
    • 有较高的初始渲染消耗
    • 如果元素涉及到频繁的切换,则推荐使用 v-show

v-for 和 key 属性

  1. 迭代数组

     
        
    
    
    <ul>
        <li v-for="(item, i) in list">{{ i }}---{{ item }}li>
    ul>
    
     <script>
        var vm = new Vue({
            el : "ul",
            data : {
                list : [1,2,3,4,5]
            }
        });
    script>
    
  2. 迭代对象中的属性

    <ul>
        <li v-for="(item, i) in list">{{ item.name}} --- {{ item.id }} li>
    ul>
    
    <script>
        var vm = new Vue({
            el : "ul",
            data : {
                list : [
                    {id: 1, name: "zs1"},
                    {id: 2, name: "zs2"},
                    {id: 3, name: "zs3"}
                ]
            }
        });
    script>
    
  3. 迭代数字

    <ul>
        <li v-for="count in 10 ">{{ count }}li>
    ul>

    注意: v-for 循环的时候,key 属性只能使用 number 获取 string。
    key 使用的,必须使用 v-bind 属性绑定的形式,指定 key 的值。
    在组件中,使用 v-for 循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须在使用 v-for 的同时,指定唯一的 字符串/数字 类型的 key 值。

你可能感兴趣的:(VUE)