vue模板语法下集

前言：上一篇博客是vue模板语法上集，本篇是对上篇的补充，可结合阅读。

今日目标：

1、样式绑定                2、事件                3、表单                       

4、组件                       5、通信组件

（本篇案例）注意点：
变量定义不能使用中划线，参照案例样式绑定命名错误

自定义组件命名不能使用驼峰，参照自定义组件myButton与my-button的错误演示

 

 一、样式绑定

1.1  class绑定

使用方式：v-bind:class="expression" 
expression的类型：字符串、数组、对象

1.2  style绑定

v-bind:style="expression"
expression的类型：字符串、数组、对象

案例：

	
		
		
		
		
	
	
		
		
样式绑定（使用class把文字变成红色，使用style把文字变大）
		

			
{{msg}}
		
	
	
	

运行结果：

 二、事件

2.1  冒泡事件（从里往外，从下往上）

2.2  修饰符

1，Vue允许为v-on在监听键盘事件时添加按键修饰符

2，Vue通过由点(.)表示的指令后缀来调用修饰符

3.3  常用的事件与按键别名

      

      

      

      


      

      

      

      


      

      
...

      

      
...

      

      


      Vue为最常用的按键提供了别名

      

      
 
      全部的按键别名：

      .enter

      .tab

      .delete (捕获 "删除" 和 "退格" 键)

      .esc

      .space

      .up

      .down

      .left

      .right

      .ctrl

      .alt

      .shift

      .meta     

案例：

	
		
		
		
		
	
	
	
		
		

			
冒泡事件
			

				

					

						

					
				
			
			
提交事件（只允许提交一次）
			提交
			
按键修饰
			
		
	
	
	

运行结果：

三、表单 

案例：

	
		
		
		
	
	
		

			
标题
			

				

					
vue表单
					姓名：

					密码：

					
					年龄：

					性别：
					男
					女

					爱好：
					

						{{h.name}}
					
					类别：
					
						===请选择===
						{{t.name}}
					

					备注：
					

					确认
					
					
				
			
		
	
	

其中确认的复选框请注意，没有勾选是不能提交的

运行结果：

四、组件

组件简介      

组件(Component)是Vue最强大的功能之一

组件可以扩展HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

全局和局部组件

全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

局部组件: new Vue({el:'#d1',components:{...}})

注册后，我们可以使用以下方式来调用组件：

props

props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
 
注2：当我们定义这个  组件时，你可能会发现它的data并不是像这样直接提供一个对象

        data: {

          count: 0

        }

 

取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的贝：

        data: function () {

          return {

            count: 0

          }

        }

注3：定义组件名的方式有两种

短横线分隔命名(建议使用)

Vue.component('my-component-name', { /* ... */ })，引用方式：

首字母大写命名

Vue.component('MyComponentName', { /* ... */ })，引用方式： 和都是可接受的   

注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，

camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

props: ['postTitle'],

注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

希望每个 prop 都有指定的值类型

         props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

         }

案例：

	
		
		
		
	
	
	
		
		

			
全局组件，
			
			
			
			
		
	
	
	

运行结果：

 五、通信组件（在组件中添加事件）

案例：（在上一个组件中添加一个事件）

	
		
		
		
	
	
	
		
		

			
{{ts}}
			
Vue组件通信
			
		
	
	
	

运行结果：

方法被调用，事件被执行。

OK！到这就结束了，希望能帮到你！！！