vue学习笔记:一、vue基础语法

1、模板语法

Mustache语法:{{ msg }}

Html赋值:v-html=“”

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

使用表达式:{{ ok ? 'YES' : 'NO'}}

文本赋值:v-text=“”

指令:v-if=“”

过滤器:{{message | capitalize}} 和 v-bind:id="rawId | formatId"

2、Class 和Style绑定

对象语法:v-bind:class="{ active:isActive,'test-danger':hasError}"

数组语法:

<div v-bind:class="{ activeClass, errorClass}">

datas:{

activeClass: "active',

errorClass: "text-danger'

}

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

3、条件渲染

v-if:为ture的时候渲染

v-else

v-else-if

v-show:

v-cloak:同步隐藏

v-if、v-show:区别,v-show控制的是div,代码有被加载,v-if控制的是dom,为false时候代码不会被加载。

4、vue事件处理

v-on:click="greet" 或者 @click="greet"

v-on:click.stop、v-on:click.stop.prevent、v-on:click.self、v-on:click.once

v-on:keyup.enter (enter/tab/delete/space/up/down/left/right)

5、vue组件

全局组件和局部组件

父子组件通讯-数据传递(不予许子组件修改父组件的data,通过Emit event去实现父子组件的通讯)

slot

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,087评论 0 42
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 1,045评论 0 2
  • vue.js官网教程学习笔记和学习摘要 起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,...
    恰皮阅读 3,400评论 2 22
  • 前言 接触 Vue 也有一段时间了,很多时候在项目里面会用,但是由于对整个 Vue 的了解比较片面,让我不得不一次...
    你的肖同学阅读 966评论 0 12