美文网首页
(Vue)vue基础语法

(Vue)vue基础语法

作者: rightmost | 来源:发表于2018-10-19 17:32 被阅读0次

1、双花括号

    mustache(胡子)/interpolation(插值表达式)

    语法:

    <any>{{表达式}}</any>

    作用:

    将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图

2、指令-循环指令

    基本语法1:

    <any v-for="tmp in array"></any>

    基本语法2:

    <any v-for="(value,index) in array"></any>

    作用:

    在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签

3、指令-选择指令

    语法:

      <any v-if="表达式"></any>

      <any v-else-if="表达式"></any>

      <any v-else="表达式"></any>

    作用:

      根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树

4、指令-事件绑定

    语法:

        <any v-on:eventName="handleEvent"></any>

    作用:

        给指定的元素 将handleEvent的方法绑定给指定eventName事件

5、指令-属性绑定

  基本语法:

    <any v-bind:myProp="表达式"></any>

    补充,支持简写:

    <any :myProp="表达式"></any>

  作用:

    将表达式执行的结果 绑定 到当前元素的myProp属性

    <img v-bind:src="'img/'+myImg" alt="">

  动态样式绑定

    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

  动态样式类绑定

      <h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定

    方向1:数据绑定到视图

    方向2:将视图中(表单元素)用户操作的结果绑定到数据

    基本语法:

      <表单元素 v-model="变量">

      </表单元素>

相关文章

  • Vue

    Vue基础 起步 Vue采用的是MVVM的思想 官方教程 创建Vue对象 使用Vue语法时需要先创建一个Vue对象...

  • Vue.js学习笔记

    项目地址:https://gitee.com/westwall/vue-practice 目录 Vue基础语法: ...

  • Vue部分基础知识点总结

    Vue基础知识点: 1.Vue:过滤html标签 ----{{{数据名}}}. 2.Vue:单次插值语法: ...

  • (24)打鸡儿教你Vue.js

    学习Vue基础语法Vue中的组件Vue-cli的使用 1、使用Vue2.0版本实现响应式编程2、理解Vue编程理念...

  • vueJs的简单入门以及基础语法

    1)vue的基础语法介绍 vue的下载以及是什么这里就不说了,直接看vue官网简单的说 这篇帖子只是把语法归类了 ...

  • vue-resource用法记录

    基础语法 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用htt...

  • Vue基础语法3

    vue基础语法三 vue-cli脚手架 vue-cli脚手架是vue官方提供的一个快速构建单页面配置环境vue-c...

  • vue语法基础xmind

    最近在学习vue,结合官方的手册,整理了vue基础语法xmind(不包括进阶部分)

  • (Vue)vue基础语法

    1、双花括号 mustache(胡子)/interpolation(插值表达式) 语法: {{表达式...

  • vue基础语法

    vue常用基础语法: 一、模板语法 1.vue使用基于html的模板语法,智能计算出最少需呀重复渲染的组件;2.数...

网友评论

      本文标题:(Vue)vue基础语法

      本文链接:https://www.haomeiwen.com/subject/usruzftx.html