Wayne12081213
Wayne12081213

Vue从入门到登堂入室

一. es6语法

1. 认识let和const

1）let声明变量，let声明的变量属于局部作用域

2）const声明常量

 

2.  模板字符串

 

3. 箭头函数

 

4. 对象的单体模式

 

5. 面向对象

 

 

 

二. nodejs服务器语言

npm init --yes 初始化我们的项目，自动生成一个package.json文件

npm install jquery --save

npm install webpack --save-dev

npm run dev 运行环境

npm run build 编译代码

npm install -g cnpm -registry=https://registry.npm.taobao.org 下载使用cnpm提高速度

 

 

 

三. Vue基础

1. {{}}：模板语法插值

{{变量}}

{{1 + 1}}

{{'hello'}}

{{函数的调用}}， 例如：{{ 'hello world'.split("").reverse().join()}}

{{1 == 1 ? '真的' : '假的'}}

 

2. 创建简单的Vue对象


    
    

		
{{title}}

 

3. 指令系统

在vue中提供了一套为（数据驱动视图）更为方便的操作，这些操作被称为指令系统，以v-xxx所表示。

指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有相应的值，根据不同的值，框架会进行相应的DOM操作的绑定。

 

1) v-text和v-html

v-text等价于{{}} 实现原理：innerText

v-html实现原理：innterHTML

 

2）条件渲染

（1）v-if，表示条件渲染

v-else-if

v-else

 

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做-----直到条件第一次变为真时，才会开始渲染条件快。

相比之下，v-show就简单的多---不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示True

        
if条件显示False

	


    
	


		Adam
	

	

		Bruce
	

	

		Chris

v-else元素必须紧跟在v-if或v-else-if元素后面，否则将不会被识别

 

（2）v-on，事件


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

 

（3）v-show，显示内容

v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

 

3）class与style绑定

使用v-bind: class = '{} || [] || 变量名 || 常量' 对我们的页面中标签的属性进行绑定。所有的属性都可以进行绑定，注意只要使用了v-bind后面的字符串一定是数据属性中的值

a. 绑定字符串


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

		
		
演示绑定

 

b. 绑定图片


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

		
		
演示绑定

 

c. 绑定时间


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

		
		
演示绑定

		
		
		
		
显示时间

 

d. 绑定类


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

		
		
演示绑定

		
		
		
		
显示时间

我们可以吧一个数组穿个v-bind:class，以应用一个class列表：



data: {

    activeClass: "active",
    errorClass: "text-align",

}

 

3）事件处理

（1）监听事件

可以用v-on监听DOM事件，并在触发时运行有一个JavaScript代码

vue中使用v-on：click对当前DOM绑定click事件 注意：所有的原生js的事件使用v-on都可以绑定


    

    

		
		
{{msg}}

		
{{1>2?"TRUE":"FALSE"}}

		
if条件显示

		
		
		
演示v-show

		
		
演示绑定

		
		
		
		
显示时间

 

v-on与v-if的结合：

轮播图实现：



	
		
		
		
	
	
		
		


		

			
			
    
				
  • 
					{{ index + 1}}
				
    •

v-on的几个好处：

1. HTML模板能轻松定位在JavaScript代码里对应的方法

2. 无需在JavaScript里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试

3. 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。

 

在Vue中的简写：

  • v-bind:    :class  :src  :id === v-bind:class  v-bind:src  v-bind:id
  • v-on:click === @click

 

4）列表渲染

一个数组列表的v-for，用v-for把一个数组对应为一组的元素。

v-for

我么用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要使用item in items形式的特殊语法，items是元数据数组并且item是数组元素迭代的别名。

另外：v-for还支持一个可选的第二参数为当前项的索引



	
		
		
	
	
		
		


		

			
    
				
  • 
					
    {{index}}: {{item.name}}, ￥{{item.price}}
    
				
    • 
			

		


		
	


    

    

		
		

			
			
    
				
  • {{index+1}}
    •

 

5）v-html解析标签


    

		

			
			
    
				
  • {{index+1}}
    •

 

 

 

4. 组件

这里有两种组件的注册类型：全局注册和局部注册。

 

1）通过Prop向子组件传递数据

prop是可以在组件上注册的一些自定义特性。

（1）在子组件自定义特性

当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性，那么我们就可以像访问data中的值一样

（2）要在父组件中导入的子组件内部绑定自定义的属性

注意：一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。

 

2）通过事件向子组件传递数据

我们可以调用内建的$emit方法并传入事件的名字，来向父级组件触发一个事件

（1）给子组件中的某个按钮绑定原生事件，我们可以调用内建的this.$emit('自定义的事件名', '传递的数据')，来向父级组件触发一个自定义事件

（2）在父组件中的子组件标签中，要绑定自定义的事件

 

3）公共组件

全局组件的使用：

Vue.component('全局组件的名字', {

跟new Vue()实例化对象中的options是一样，但要注意：

不管是公共组件还是局部组件，data必须是个函数，函数一定要有返回值

})

元素作为承载分发内容的出口

 

 

 

5. v-model

表单输入绑定

单向绑定：把Model绑定到View上，当我们用JavaScript代码更新Model时，View就会自动更新

双向绑定：如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

v-model指令在表单及