Vue学习(2)---v-指令和组件

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”,稍后再作详细解释

原文地址:https://www.cnblogs.com/57one/p/12681133.html

时间: 2024-10-13 13:27:59

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

vue 学习八 自定义指令

vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { console.log(el,bin,vn) }, //...一些钩子函数 }) 2.局部注册 在组件内添加一个directives字段 注意这个比全局注册方法多了一个字母 s export default { name: "app", directives(){ //...一些钩子函数 } } 全

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

一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install vue 安装完成后,命令行运行命令 vue ,看到如下效果表示vue安装成功: 2.vue-cli vue-cli是vue提供的一个官方命令行工具.可用于快速搭建大型的单页应用. # 全局安装 vue-cli $ npm install --global vue-cli 二.项目搭建 安装完成之后我

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

Vue学习系列(三)——基本指令

前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位. 而今天,我们将对vue中的基本指令进行了解汇总,指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.

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

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

Vue学习笔记进阶篇——多元素及多组件过渡

本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容.即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践. 示例: <transition> <button v-if="isEditing

## vue学习笔记--简单父子组件--

## vue学习笔记 ### 组件之间的通讯1. 父组件到子组件```js //father <div> <son msg="父组件的信息写在这"></son> <son title="title"></son> <!--:title--> </div> <script> export default { data(){ return { title: '当传递一个变量过

Vue学习之组件切换及父子组件小结(八)

一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=&q