组件:data methods watch

new vue({

data:{

a:1,

b:[]

},

methods:{

dosomething:function(){

this.a++;

}

},

watch:{

a:function(val,oldval){

console.log(val,oldval);

}

}

})

模板指令:html和vue对象的粘合剂

数据渲染:

  • v-text:有html标签元素之间展现出来
  • v-html:会处理标签元素
  • {{     }}

控制模块隐藏:

new vue({

data:{

isShow:true

}

})

  • v-if:不渲染 <p v-if='isShow'></p>
  • v-show 渲染,通过display=none方式隐藏 <p v-show='isShow'></p>

渲染循环列表:

new vue({

data:{

itme:[{label:'apple'},{label:'banana'}]

}

})

<ul>

<li v-for='item in items'>

<p v-text='item.label'></p>

</li>

</ul>

事件绑定:

v-on

<button v-on:click="dothis"></button>

或者<button @click="dothis"></button>

methods:{dothis:functon(){}}

v-bind:属性和类的绑定

因为比较常用,所以可以省略“v-bind",直接写”:src“

<img v-bind:src="imgSrc"/>

<div  :class='{red:isRed}'></div>

vue 基础重要组件 模板指令 事件绑定的更多相关文章

  1. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  2. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  4. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  5. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  6. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  7. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. vue.js的一些模板指令简述

    1.模板指令都是写在<template></template>html里面   v-text : value是什么就显示什么,如果value里面有html的标签,也会直接显示出 ...

  9. vue基础:组件的创建方式和组件的data值

    vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...

随机推荐

  1. 微信浏览器无法跳转到apk下载链接 微信屏蔽了我的APP下载链接如何处理

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时,界面显示一片空白,容易误导以为在下载呢 <!DOCTYPE html><html>&l ...

  2. 总结AWS使用要点

    最近做毕业设计,要用AWS跑代码,以前只用过一次,这次踩了很多坑,记录一下.. AWS命令行管理S3 bucket AWS官方文档: http://docs.amazonaws.cn/cli/late ...

  3. 关于xml的相关知识

     1 xml定义和用途  定义:XML (eXtensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup ...

  4. egret 添加帧动画

    private showEffect(): void { //加载本地的帧动画资源 RES.getResByUrlNoCache("resource/assets/shenqi_eff.js ...

  5. .net公众号开发自动回复消息

    using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web. ...

  6. 关于HTMl CSS

    HTML  结构       CSS   表现         JS  行为 首先说一个SEO,搜索引擎优化 标准文档流:(1)前提:在没有css的干预下     (2)块级元素:独占一行,可定义宽和 ...

  7. JPA + SpringData 操作数据库--Helloworld实例

    前言:谈起操作数据库,大致可以分为几个阶段:首先是 JDBC 阶段,初学 JDBC 可能会使用原生的 JDBC 的 API,再然后可能会使用数据库连接池,比如:c3p0.dbcp,还有一些第三方工具, ...

  8. PAT甲级 1001 A+B Format

    题目链接:https://pintia.cn/problem-sets/994805342720868352/problems/994805528788582400 1001 A+B Format ( ...

  9. java static关键字的使用

    static关键字    通常来说,创建类的时候,是用new创建此类的对象才可以获得,执行new创建对象时数据存储空间才被分配,其方法才被外界调用    有两种情况用new无法解决:        1 ...

  10. webservice接口,用Soapui

    webservice接口怎么测试呢,他不需要你在拼报文了,会给一个webservice的地址,或者wsdl文件,直接在soapui导入,就可以看到这个webservice里面的所有接口,也有报文,直接 ...