vue学习(四)

//html
<div id="app">
  <input type="button" value="ok" v-bind:title="msg">
  <input type="button" value="ok" v-bind:title="msg +‘123aaa‘ ">//也可以拼接字符串,渲染出来是 点击一下123aaa
</div>
//script
<script>
  var vm = new Vue({
    el:‘app‘,
    data:{
      msg:‘点击一下‘
    }
  })
</script>

说明:v-bind是用来绑定属性变量的,如果没有v-bind那么鼠标放到ok按钮上的时候,悬浮的标题是“msg”字符串,而不是msg中的内容

只有通过v-bind绑定title属性的msg变量   title才会取到msg中的内容,鼠标放上去,悬浮的标题是“点击一下”

v-bind是可以省略不写的,只留冒号 就默认表示使用了v-bind绑定某个属性变量  v-bind中可以写合法的js表达式

原文地址:https://www.cnblogs.com/xuchao0506/p/10804805.html

时间: 2024-08-30 18:34:24

vue学习(四)的相关文章

vue 学习四 了解组件

1组件的注册 全局注册 import Vue from 'vue'; import com from './component1'; Vue.component("com_name",com)//第一个参数是你为注册的组件定义一个id,第二个是你要注册的组件 局部注册 //在组件内 import com from "../components/a_component"; export default { name: "home", compone

VUE学习四【自动获取提交的数据,生命周期】

<div id="demo"> <form @submit.prevent="handleSubmit"> <span>用户名:</span> <input type="text" v-model="user.username"> <br> <span>密码:</span> <input type="password

vue2.0学习(四)-实例和内置组件

vue2.0学习(四)-实例和内置组件 1.实例入门-实例属性 一.Vue和Jquery.js一起使用 下载可以去官网进行下载,我这里使用的版本是3.1.1,下载好后在需要的页面引入就可以了.当然你还有很多其它的方法引入jquery,只要可以顺利引入就可以了. <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <!DOCTYPE

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

nodejs学习四 Node.js NPM

什么是NPM? 不知道大家注意没有,windows平台下的Node.js安装包大小才区区4M多,真可以用短小精悍来形容它,作为一种编程语言,像java一个SDK 就几十M,为什么node.js的运行环境这么小呢?这其中的微妙之处在于,它拥有一个庞大的第三方软件库. 在Node本身提供的包(原生)中没有我们要实现的功能模块的时候,我们可以去寻找下是否已经有人实现了这种功能.毕竟重复造轮子这种事情,很多人都不想干. 去哪里寻找我们想要的包呢?如果你还不知道报的名字,你可以去https://www.n

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue学习笔记目录

本文为转载,原文:Vue学习笔记目录 Vue介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据

ZigBee学习四 无线+UART通信

ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique message ID (counter) afAddrType_t GenericApp_DstAddr; //unsigned char uartbuf[128];/********************************************************************** L