Vue示例

Vue 简明示例。 

首先要引入vue.js



 
  
  Vue 使用示例
  
  
 
 

  

变量绑定使用示例

  1. 显示变量内容,变量值变更后会更新

    变量值:{{var_bind}}

  2. 变量值修改后不会更新,指令 v-once

    变量值:{{var_once}}

  3. 变量绑定,输出HTML内容,指令 v-html

    这里将被变量var_html的HTML内容给替换掉。

  4. 绑定属性,指令 v-bind:(html属性)
    绑定class属性
  5. JS计算表达式(不能用“;”结尾)
    1. 算数运算:{{ number + 1}}
    2. 三元运算:{{ yes ? 'Yes' : 'No'}}
    3. 函数调用: {{ var_func.split('').reverse().join('')}}
  6. 绑定样式
    1. 绑定class
    2. 绑定class,数组形式
    3. 绑定style,:style是v-bind:style的简写

条件渲染示例,指令:v-if, v-else-if, v-else

判断结果: 条件值:A 条件值:B 条件值:C 其它值

列表渲染,指令 v-for

  1. 数组方式
    • 姓名:{{ item.name }}, 年龄:{{ item.age }}
    数组方式(取数组下标号)
    • {{index}}. 姓名:{{ item.name }}, 年龄:{{ item.age }}
  2. 对象方式(遍历属性)
    • 属性值:{{ item }}
    对象方式(遍历属性,取属性名)
    • {{attr}}:{{ item }}

事件绑定,指令 v-on:(HTML事件名 onclick, ondblclick ...) 简写形式如:@click, @dblclick

  1. 行内JS
    点我看click_counter的值:{{click_counter}}
  2. 绑定methods中的函数
  3. 绑定methods中的函数并传参数
  4. 绑定methods中的双击函数并传参数
  5. 绑定methods中的函数,传参数和事件对象($event)
表单对象,双向绑定,指令 v-model

input内容:{{form_input}}

textarea内容:{{form_textarea}}

Jack Jhon Mike

checkbox内容:{{form_checkbox}}

One Two

form_radio内容:{{form_radio}}

全局注册的组件

在组件内插入的内容

局部注册的组件

 

你可能感兴趣的:(Vue,js,javascript,vue,前端)