• vue使用(二)----------vue基础指令


    常用指令

    v-text:  是元素的innerText,只能在双标签中使用

    v-html: 是元素的innerHTML,不能包含{{xxx}}

    v-if:      元素是否移除或插入

    v-show:元素是否显示或隐藏

    v-model:双向数据绑定

    v-bind:  单向数据绑定(js内存改变页面)

    双向数据绑定:

    1向:js内存属性发生改变,影响页面的变化

    1向:页面的改变影响js内存属性的变化


    v-bind的使用
    场景:需要根据可变的表达式结果来给class赋值,就需要用到v-bind:class='XXX'
    方式:v-bind:属性名="表达式",最表达式运算结束的结果赋值给该属性名
    简化写法: :属性名="表达式"

    class:结果分类
    一个样式:返回字符串(三元表达式和key和样式的清单对象)
    多个样式:返回对象(样式做key,true或false做值)

    v-on的使用:
    场景:绑定事件
    方式:v-on:事件名="表达式||函数名",
    简化写法: @事件名="表达式||函数名",

    函数名如果没有参数,可以省略() 只给一个函数名称
    声明组件内函数,在export default这个对象的根属性加上methods属性,其是一个对象
    key是函数名 值是函数体
    在export default这个对象的根属性加上data属性,其是一个函数,返回一个对象
    对象的属性是我们初始化的变量的名称
    凡是在template中使用变量或函数,不需要加this,在script中使用就需要加上this

    v-for的使用
    1.用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,此外,v-for还可以遍历对象的属性,并且可以和template模板元素一起使用。还可以接受index作为可选的第二参数,当有两个参数时,参数之间用逗号分隔,并包含在一组括号里面。

    2.迭代一个对象的属性。默认是迭代属性的值。不像迭代数组,它可以接受两个可选的参数,迭代属性的key和index。

    3.循环整数列 num in 1000

  • 相关阅读:
    《javascript高级程序设计》第三章 Language Basics
    开发工具之Eclipse(三)
    开发工具之Eclipse(二)
    开发工具之Eclipse(一)
    hashCode()与toString()
    equals函数的作用
    类集框架(三)
    S01E03 搭建Android开发环境
    S01E02 Android发展史
    S01E01 第一季(重制版)课程介绍
  • 原文地址:https://www.cnblogs.com/JSWBK/p/7886205.html
Copyright © 2020-2023  润新知