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;">
2. Vue基础语法的更多相关文章
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- Vue 基础语法入门(转载)
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- Vue基础语法与指令
项目初始化 用vscode打开终端,输入npm init -y生成package.json 然后安装vue npm install vue 需要注意的是,我遇到了这个问题 出现原因:文件夹名和生成的p ...
随机推荐
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- tomcat-servlet-client
headfirst的一个图,但解决了我的一个疑问
- vue.js原生组件化开发(一)——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
- Codeforces Round #206 (Div. 2) 部分题解
传送门:http://codeforces.com/contest/355 A:水题,特判0 int k,d; int main(){ //FIN; while(cin>>k>> ...
- ImportError: cannot import name pxssh
Traceback (most recent call last): File "/root/Desktop/JuniperBackdoor-master/JuniperBackdoor.p ...
- 洛谷 P1460 健康的荷斯坦奶牛 Healthy Holsteins
P1460 健康的荷斯坦奶牛 Healthy Holsteins 题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保 ...
- ios—项目开发需求文档
电子商务产品项目需求方案 模块 标准 接入方式 后台(大致需求说明) 前端 购 实物 多商户接入,可支付商品: 基础功能 功能说明 所有须要 Lbs .城市选择,分享.商区.搜索.返回.关闭 LBS: ...
- JavaScript数组的某些操作(二)
7.颠倒数组中元素的顺序(注意:不是为数组排序)--reverse方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 13.Axis创建webservice客户端和服务端
转自:https://blog.csdn.net/chenghui0317/article/details/9318317 一.Axis的介绍 Web Service是现在最适合实现SOA的技术,而A ...
- OpenStack安装及监控配置视频教程
OpenStack是一个美国国家航空航天局和Rackspace合作研发的云端运算软件,是一个自由软件和开放源代码项目,用来建立公共和私有云本,其软件使用比较复杂,本视频将讲解其安装和部分配置方法,以后 ...