Vue中的指令

Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute)

一个v-bind的例子

	<div id="app" v-bind:title="message">
texttexttext
</div> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!'
}
})

这其中 v-bind表明将div元素的title属性与message保持一致

v-if v-for

v-if 可以控制一个元素是否显示(当然 v-show也可以 看名字就可以看出)

	<div id="app" v-if="seen" v-on:click="handleOnClick">
{{message}}
</div> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
this.seen=!this.seen;
}
}
})

这里用到了Vue中的v-if来控制元素的显示 v-on进行时间绑定 还有Vue中的methods属性

改变seen的值 即可改变元素的显示(与v-show的区别之后会写)

v-for 用来遍历一个数组来循环渲染项目

	<div id="app">
<ul>
<li v-for="item in lists">{{item}}</li>
</ul>
</div> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
lists:['学编程死路一条','我嬲你妈妈憋类','妙啊~~~']
},
})
</script>



当我们改变lists的内容时 ul标签中内容也会发生改变

v-on 事件绑定

	<div id="app">
{{message}}
<button v-on:click="handleOnClick">helloworld</button>
</div> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
alert("helloworld");
}
}
})
</script>

通过v-on可以绑定各种事件

v-model 双向绑定

v-model 可以实现输入框和数据的双向绑定(一个改变,另一个也发生改变)

	<div id="app">
<input v-model="message"></input>
<button v-on:click="handleOnClick">giaogiaogiao</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
seen:true
},
methods:{
handleOnClick:function(){
this.message="giaogiaogiao"
}
}
})
</script>



点击改变message的值后 input框中的数据也发生了改变

组件化的思想

Vue中很重要的一个思想就是组件化

试着想想 一个网页 可以拆成各个组件 比如 顶部 底部 侧边栏 内容主题

创建组件和使用的方式非常简单

	<div id="app">
{{message}}
<new-component></new-component>
</div> <script type="text/javascript">
Vue.component('newComponent',{
template:'<div>一个组件</div>'
})
var app=new Vue({
el:'#app',
data:{
message:'helloworld!'
}
})
</script>

需要注意的是 Vue中 我们声明组件的方式是驼峰命名 但是html不区分大小写 所以写成标签时要用-来区别

父子组件传值

现在我们已经可以将页面划分成各个组件了

但是子组件(myComponent)是无法使用父组件(app)的值 因此 我们需要一种方式将值传入子组件

v-bind

	<div id="app">
{{message}}
<new-component v-bind:value="text"></new-component>
</div> <script type="text/javascript">
Vue.component('newComponent',{
props:['value'],
template:'<div>{{value}}</div>'
})
var app=new Vue({
el:'#app',
data:{
message:'helloworld!',
text:"Father-value"
}
})
</script>

当我们使用v-bind 传值时候 需要再子组件中添加 props属性去接收这个值

官方文档:我们也需要为每个组件提供一个“key”,稍后再作详细解释

Vue学习(2)---v-指令和组件的更多相关文章

  1. vue学习04 v-on指令

    vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...

  2. vue学习06 v-show指令

    目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...

  3. vue学习08 v-bind指令

    目录 vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名,可简写为:属性名 练习代码为: 运行效果为: vue学习08 v-bind指令 v-bi ...

  4. vue 学习八 自定义指令

    vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { conso ...

  5. Vue学习之全局和私有组件小结(七)

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

  6. vue学习-day03(动画,组件)

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

  7. VUE 学习笔记 一 指令

    1.声明式渲染 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性 <div id='app'> <span v-bind:title=" ...

  8. vue学习笔记(1)—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  9. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

随机推荐

  1. ARC中__bridge, __bridge__transfer, __bridge_retained 关系

    总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...

  2. 03 HDFS的客户端操作

    服务器和客户端的概念 hdfs的客户端有多种形式 1.网页形式 2.命令行形式 3.客户端在哪里运行,没有约束,只要运行客户端的机器能够跟hdfs集群联网 参数配置 文件的切块大小和存储的副本数量,都 ...

  3. IntelliJ IDEA 2020 全家桶注册码

    WU78YHTY7E-eyJsaWNlbnNlSWQiOiJPUVQzT0oyNVhFIiwibGljZW5zZWVOYW1lIjoi5rC45LmF5r+A5rS7IGlkZWEubWVkZW1pb ...

  4. py2.7 批量转换文件为 utf8 编码

    source insight 不支持 utf8 ,但是在 linux 上查看的时候是 utf8 编码,就会显示不正常,所以写了个 python 小脚本,可以批量转换 py2.7 #coding:utf ...

  5. CSS 权重图

    关系图 图片出处我找不到了. 结论 权重从高到低排序 1. !important 2. style 3. #id 4. .class .child-class 5. .class1.class2 6. ...

  6. 大数据学习之scala-环境搭建

    scala 下载网站 https://www.scala-lang.org/download/ 安装scala要先安装java,并且配置java环境,官网也有说明 不过国内的网站下载不下来可以访问:  ...

  7. Django _web框架本质

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. socket服务端 import  ...

  8. node 微信授权 获取openid

    node获取微信授权拿到openid 需要了解的网站   1.微信授权. 先说一下流程(一张图代替所有): 流程步骤: 1.用户同意,获取code. 2.通过code获取网页授权access_toke ...

  9. table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条

    table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...

  10. 2020年启蒙及小学识字练字APP或小程序测评榜

    语文教学改革后,小学识字练字方面显得越来越重要.而市场上大大小小的识字练字应用琳琅满目,不同的定位,不同的核心功能,不同的费用.应该怎么选呢? 本篇将从多个角度对主流识字练字应用进行评测,评估对象为主 ...