zoukankan      html  css  js  c++  java
  • . Vue基础语法

    . Vue基础语法
    1. Vue使用

    • 1. 生成Vue实例和DOM中元素绑定
    • 2. app.$el --> 取出该vue实例绑定的DOM标签
    • 3. app.$data --> 取出该vue实例绑定的data属性

    2. 模板语法

    • 1. {{name}} --> 在标签中间引用data属性中的变量
    • 2. v-html='msg' --> 在页面上显示我定义的标签元素
    • 3. v-if='ok' --> 控制标签在不在DOM中
    • 4. v-show='!ok' --> 控制标签的display属性的值(是否显示)
    • 5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来
    • 6. v-on:click='dianwo'--> 给标签绑定一个点击事件,方法需要在vue实例的methods中定义
    • 7. v-model='article' --> 用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定


    3. 计算属性和侦听器
    1. 计算属性
    (字符串翻转的例子)

    • 1. 计算属性需要定义在vue实例的 computed 中
    • 2. 多用于对变量做一些自定义的操作
    • 3. 我们在页面上像使用普通data属性一样使用计算属性

    2. 侦听器

    • 多用于一些复杂的运算或者异步操作
    • 侦听器需要放在 vue实例的 watch 中

    4. class和style属性

    • 1. 基于对象的绑定
    • 2. 基于数组的绑定

    5. 条件渲染

    • v-if
    • 如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
    • v-if/v-else
    • v-if/v-else if /v-else


    6. 列表渲染

    • v-for循环

    7. 事件处理

    • 详见2.模板语法

    8. 表单绑定

    • 详见2.模板语法



  • 相关阅读:
    【Vertica】vertica配置ODBC
    【oracle】【demo】oracle批量造数据
    【oracle】oracle系统视图nls_database_parameters
    【oracle】interval函数
    【DB2】DB2帮助文档
    【oracle】【sql】oracle去重
    【oracle】【sql】oracle分组
    【oracle】【性能】case表达式
    oracle EXP-00028
    Nginx系列~Nginx服务启动不了
  • 原文地址:https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/9367292.html
Copyright © 2011-2022 走看看