前端
一点也不简单

vue全栈-vue基础语法

这里知识简单的介绍需要哪些知识点,具体学习请查阅相关资料和博客里的vue学习进阶。

模板语法

Mustache语法:{{ msg }}

Html赋值:v-html=””//引号里是html片段

绑定属性:v-bind:id=””

使用表达式:{{ ok ? ‘Yes’ : ‘No’ }}

文本赋值:v-text=””

指令:v-if=””等

过滤器:{{ message | capitalize }} 和 v-bind=”rawld | formatld”

classe和style绑定

对象语法:v-bind:class=”{ active:isActive,’text-danger’:hasError}”

数组语法:

<div v-bind:class="[activeClass,errorClass]"></div>
data:{
   activeClass:'active',
   errorClass:'text-danger'
}

style绑定-对象语法:v-bind:style=”{color: activeColor,fontSize: fontSize + ‘px’}”

条件渲染

v-if

v-else

v-else-if

v-show

v-cloak

vue事件处理器

定义事件:v-on:click=”greet” 或 @click=”greet”

事件修饰符:v-on:click.stop(阻止冒泡)、v-on:click.prevent(阻止默认事件)、v-on:click.self(子元素事件无效)、v-on:click.once(只触发一次事件)

键盘事件:v-on:keyup.enter

事件处理器

vue的组件

全局组件和局部组件

父子组件通信-数据传递

Slot

组件数据传递
赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » vue全栈-vue基础语法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏