2. Vue基础语法

模板语法：

Mustache语法： {{}}
Html赋值： v-html=""
绑定属性： v-bind:id=""
使用表达式： {{ok?'Yes':'No'}}
文本赋值： v-text=""
指令： v-if=""
过滤器： {{ msg | capitalize }} 和 v-bind:id="rawId | formatId"

Class和Style绑定

对象语法：v-bind：class=“{active:isActive}”
数组语法：：class="[class1,class2]"
style绑定-对象语法：v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

条件渲染

v-if / v-else / v-else-if DOM是否加载
v-show 通过display来设置显示隐藏
v-cloak 页面刷新太快，导致有些元素没有加载出来,可以同步去隐藏html代码

vue事件处理器

v-on:click="" / @click=""
事件修饰符
@click.stop 阻止冒泡
@click.prevent 阻止默认事件
@click.self 对对象本身绑定函数，里面的子元素不起作用
@click.once 只给事件绑定一次
@keyup.enter

Vue组件

全局组件和局部组件
父子组件通讯-数据传递
父->子：通过Props传递
子->父：不允许，但vue通过子组件触发Emit来提交给子组件进行触发
Slot

import Counter from './conuter' //导入组件components:{//注册局部组件Counter //加载组件}<Counter v-bind:num="num"></Counter><!-- 调用组件 v-bind 绑定动态变量 -->

父组件传递到子组件,使用`props`

//hello.vue
<template>// v-bind:子组件的值="父组件的属性"<Counter v-bind:num="num"></Counter><!-- 调用组件 v-bind 绑定动态变量 --><p>父组件：{{num}}</p>
</template>
<script>
import Counter from './conuter' //导入组件
export default {name: 'HelloWorld',data () {return {num:10,}},components:{//注册局部组件Counter //加载组件}
}
</script>

//子组件.vue
<template><button @click="decrement">-</button><p>子组件：{{num}}</p>
</template>
<script>export default{props:['num'],//父组件的数据需要通过 prop 才能下发到子组件中methods:{decrement(){this.num--;},}}
</script>

子组传递到父组件，使用`$emit()`触发

//hello.vue
<template><Counter v-bind:num="num" v-on:dec="decrement"></Counter><!-- dec 自定义事件--><p>父组件：{{num}}</p>
</template>
<script>
import Counter from './conuter'
export default {name: 'HelloWorld',data () {return {num:10,}},components:{//注册局部组件Counter},methods:{decrement(){this.num--;},}
}
</script>

//子组件.vue
<template><button @click="decrement">-</button><p>子组件：{{num}}</p>
</template>
<script>export default{props:['num'],//父组件的数据需要通过 prop 才能下发到子组件中methods:{decrement(){this.$emit('dec');//子组件往父组件里传数据通过`emit()`触发，通过emit来触发父组件的方法，相当于jquery里的trigger， 复杂项目用Vuex},}}
</script>

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

转载于:https://www.cnblogs.com/conglvse/p/9521825.html

2. Vue基础语法相关推荐

Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Vue——基础语法篇
Vue--基础语法篇 author:木子六日学习视频来源 coderwhy老师的vue教学文章目录 Vue--基础语法篇 author:木子六日学习视频来源 01.hello vue 02.vu ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用
Vue Vue 简介下载 Vue {{}}:插值表达式 v-text:显示文本 v-html:显示解析html标签的文本 v-on:事件绑定 v-show:控制页面元素隐藏与显示(display控制 ...
vue学习资料：vue笔记ppt整理(vue基础指令vue基础语法)
vuejs基础语法:
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
第二天：Vue基础语法
1.计算属性的setter和getter 每个计算属性都有setter和getter 一般来说用到setter较少,都不希望数据被改动,所以只用getter时也有缩写 <!DOCTYPE htm ...
一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
Vue基础语法必知必会
文章目录一.插值操作 1.Mustache语法 2.v-once指令的使用 3.v-html指令的使用 4.v-text指令的使用 5.v-pre指令的使用 6.v-cloak指令的使用二.动态绑 ...

2. Vue基础语法

模板语法：

Class和Style绑定

条件渲染

vue事件处理器

Vue组件

父组件传递到子组件,使用`props`

子组传递到父组件，使用`$emit()`触发

2. Vue基础语法相关推荐

最新文章

热门文章

2. Vue基础语法

模板语法：

Class和Style绑定

条件渲染

vue事件处理器

Vue组件

父组件传递到子组件,使用props

子组传递到父组件，使用$emit()触发

2. Vue基础语法相关推荐

最新文章

热门文章

父组件传递到子组件,使用`props`

子组传递到父组件，使用`$emit()`触发