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. Flutter保持页面状态AutomaticKeepAliveClientMixin

    使用bottomNavigationBar切换底部tab,再切换回来就会丢失之前的状态(重新渲染列表,丢失滚动条位置). 解决方法 使用 AutomaticKeepAliveClientMixin 重 ...

  2. json中存整形数值,前端返回为空

    实现目标: 在servlet中将整型数值转为json,然后在前端获取 问题描述: 前端获取为空,显示为:console.log打印为:{} 解决办法: 在servlet中将数值转为json格式再进行传 ...

  3. Java继承中构造器的调用原理

    Java的继承是比较重要的特性,也是比较容易出错的地方,下面这个例子将展示如果父类构造器中调用被子类重写的方法时会出现的情况: 首先是父类: public class test { void fun( ...

  4. C语言程序设计(一) 为什么要学C语言

    第一章 为什么要学C语言 学编程的过程,其实就是学习怎样用编程语言说话,让编译器听懂的过程. 汇编语言缺少“可移植性” 除了机器语言和汇编语言以外,几乎所有的编程语言都被统称为高级语言,它的特点是更接 ...

  5. 新手学黑客攻防-黑客攻击电脑方式和认识IP地址

    听说过黑客,没见过黑客,从最基础的开始学习,让我能在互联网中保护自己的隐私安全和信息安全. 黑客攻击电脑方式 黑客攻击的方式多种多样,但常见的只有以下几种,基本上每个黑客都会用到: 网络报文嗅探 网络 ...

  6. 事务特性,事务的隔离级别以及spring中定义的事务传播行为

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. 区间DP(力扣1000.合并石头的最低成本)

    一.区间DP 顾名思义区间DP就是在区间上进行动态规划,先求出一段区间上的最优解,在合并成整个大区间的最优解,方法主要有记忆化搜素和递归的形式. 顺便提一下动态规划的成立条件是满足最优子结构和无后效性 ...

  8. 数据库事务练习-Java(新手)

    数据库事务:       一个数据库事务通常包含了一个序列的对数据库的读/写操作.  为数据库操作序列提供了一个从失败中恢复到正常状态的方法,同时提供了数据库即使在异常状态下仍能保持一致性的方法. p ...

  9. Dubbo之服务消费原理

    前言 上篇文章<Dubbo之服务暴露>分析 Dubbo 服务是如何暴露的,本文接着分析 Dubbo 服务的消费流程.主要从以下几个方面进行分析:注册中心的暴露:通过注册中心进行服务消费通知 ...

  10. Java基础语法(1)-关键字与保留字

    title: Java基础语法(1)-关键字与保留字 blog: CSDN data: Java学习路线及视频 1.关键字 关键字(keyword)的定义和特点 定义:被Java语言赋予了特殊含义,用 ...