Vue相关

vue相关

一、Vue介绍

库和框架的区别

a.常见的库
	animate			动画库
	jQuery			工具库
一般库都是比较实用型的一种工具，主要是用页面级开发	

b.常见的前端框架：
	Vue.js
	React.js
	Angular.js
	
c.五大js
	node.js
	require.js
	Vue.js
	React.js
	Angular.js
	
d.框架不仅是工具，而且提供了更多的功能，主要用于项目开发

2.vue简单介绍

Vue是JavaScript的一个框架，是国内个人开发的，虽然说是轻量级的框架，但是功能强大。

渐进式框架：没有非常强的主张

3.使用Vue

	使用版本为2.4.X
	
	a.创建vue实例 var vue = new Vue({});
	b.创建html中的vue作用域
	c.创建组件
	d.定义组件模板

二、常用的vue指令

指令是带有v-前缀的特殊属性,用来识别模板中 Vue 特定的特性

1.v-if

	v-if:用表达式的真假值来判断是否要插入或者删除元素
	v-if="expression" expression可以是boolean值也可以是表达式的真假值
	v-if中js表达式值为false时相当于CSS属性 visible:hidden

2.v-show

	v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，
	它只是简单地为元素设置CSS的style属性。
	v-show中js表达式值为false时相当于CSS属性 display:none

3.v-else

	v-else指令必须跟在v-if或者v-show指令后面，否则不能被识别到
	设置v-else指令的元素是否能显示要看前面是v-if还是v-show指令
		如果前面跟v-if指令，当v-if的表达式为true时，v-else才会被显示
		如果前面个v-show指令，当v-show的表达式为true时，v-else仍会被显示

4.v-once

	v-once指令：在标签内插入值后不能再次改变
	能执行一次性地插值，当数据改变时，插值处的内容不会更新

5.v-html

	双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html
	<p v-html="message"></p>

6.v-bind

	缩写：
	mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令，v-bind:插入属性
	v-bind 指令可以用于响应式(动态)地更新 HTML 属性
	<a v-bind:title="message"></a>

7.v-on

	缩写@
	v-on 指令，它用于监听 DOM 事件
	<a v-on:click="doSomething">
	
	简便阻止默认事件
	<a v-on:click.prevent="doSomething">

关于v-on:中函数的参数问题：
可以加()也可以不加，
如果不加(): 相当于默认传递了一个event事件，
如果加了(): 相当于没有传参，也可以通过go($event)进行传递事件
有指令名，参数，修饰符

8.过滤器

	过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。
	<div v-bind:id="rawId | formatId"></div>
	过滤器函数至少一个参数
	
	{{ message | filterA | filterB }} 多个函数时，前面函数的返回值作为后面函数的第一个参数
	{{ message | filter(arg2,arg3) }}

三、vue实例选项

1.el: 绑定模板

2.data: 模板数据，在vue实例中，当new一个实例，data中使用的数据就已经成功挂载了，此时

3.methods: 方法

4.filters: 过滤器

5.computed: 计算后属性
  计算属性的get和set:
  计算属性默认只有get没有set，如果要对计算属性进行设置，需要手动添加set方法

四、vue组件选项

tempalte
props
data : 在vue组件的定义中，data类型必须是一个函数，且返回一个对象，这点与vue实例中不同，需要区分。
computed:计算属性
methods:方法监听

	函数和计算属性的区别
	(1) 函数的调用是需要手动去执行，无脑执行，不管值有没改变，都会执行函数（函数只要满足条件，如点击事件，只要点击就会被调用）
 	(2) 计算属性，只有值改变时才会被调用，如果值不变，就不会执行，这样性能会更友好。计算属性只有在它的相关依赖发生改变时才会重新求值

6.关于Vue组件中的DOM模板解析

	如果table内的标签不是tr，html会把这个标签提出来，提到table外面去
	table中只能包含tr等元素，在table标签中使用自定义组件无效，
	在先渲染html结构时，将table中不能包裹的元素提至外部
	而后通过vue渲染
	
	解决方案是使用is
	此时自定义组件就会渲染在table内部

7.组件传值（props）

(1)HTML代码中：
	写在HTML的#app中的代码默认是去找实例中是否存在属性或者方法
	<counter :init-num="initNum"></counter>
	
(2)组件中:	
	Vue.component('counter', {
        template: '#counter',
        props: ['initNum'],
	);
	
(3)Vue实例中:
	 var app = new Vue({
        el: '#app',
        data: {
        	initNum: 10
        }
   });

8.组件校验

组件校验会在初始化实例之前校验，所以在default或者validator函数中不应该使用data,computed,或methods等组件的实例属性

除了数字或布尔值,不会去父组件找，
v-bind之后传入的值除了数字和布尔值之外都回去会去父组件找相应的data

	Vue.component('component', {
        template: '#component',
        data: function () {
            return {}
        },
        props: {
            // 'prop-a'键名，传过来的属性
            // Number指定为数字类型
            'prop-a': Number,

            // 可以是多种数据类型
            'prop-b': [Boolean, Number],

            'prop-c': {
                type: Number,
                default: function () {
                    return 0;
                },
                required: true
            },
            'prop-d': {
                type: Number,
                default: function () {
                    return 1000;
                }
            }
        },
    });

9.自定义事件

	<div id="app">
		<!--1. 添加监听，自定义事件-->

		//在app域中默认去找vue实例中的数据，因此在组件对象中设置的绑定的属性或者方法应该默认去vue实例中找，如果想要用组件本身的数据或者方法应该在组件自身的模板中设置
		<counter v-on:to-parent="received" ></counter>
	</div>

10.非父子组件之间的传值

创建一个vue实例作为中央主线来处理非父子关系的组件传递数据

	(1)	var bus = new Vue();

	(2)	bus.$on('giveMsg', (value)=> {
		this.counter += value;
		result = value;
	});

	(3)bus.$emit('giveMsg', 1);

11.插槽

	在#app中的component放入一串数据，默认使用的app实例中的数据，但若想在组件中插入不属于组件
	本身作用域的数据，需要在组件定义模板时定义一个插槽<slot></slot>
(1)
	<div id="app">
		<component>
			<h1 slot='item'>高举父亲的名字是： {{ gaoJu[0].name }}</h1>
		</component>
	</div>
	
(2)
	<script type="text/html" id="component">
		<div>
			<slot name='item'></slot>
		</div>
	</script>
	
(3)
	new Vue({
        el: '#app',
        data: {
            msg: '呵呵哒',
            gaoJu: [
                {name: '高大上',age: 45},
                {name: '白富美'}
            ]
        }
    });

12.作用域插槽

(1)
	<div id="app">
		<component>
			//作用域插槽，最好都是具名插槽（没有名字也可以）
			//scope:  指定一个变量来接收对应插槽标签上的所有属性（有v-bind的属性），所有属性组件的一个对象
			//如果要使用该对象中的属性直接打点调用，最终形成的内容插入到对应的插槽中去

			<template scope="props" slot="item">
				// 在内部也能使用组件中的数据，区别上面的插槽使用的是实例中的数据
				<h1>{{ props.text }}</h1>
				<h1>{{ props.title }}</h1>
			</template>
		</component>
	</div>

(2)
	<script type="text/html" id="component">
		<div>
			<slot name="item" :text="message" :title="tit"></slot>
		</div>
	</script>

（3）
	Vue.component('component', {
        template: '#component',
        data: function () {
            return {
                message: 'Hello World! (form child)',
                tit: '这个是大标题'
            }
        }
    });

13.作用域插槽（循环）

(1)
	<div id="app">
		<component>
			<template slot="outer" scope="props">
				<li>{{ props.text }}</li>
			</template>
		</component>
	</div>

(2)
	<script type="text/html" id="component">
		<div>
			<ul>
				<slot name="outer" v-for="item in items" :text="item"></slot>
			</ul>
		</div>

	</script>

14.动态组件

(1)
	<div id="app">
		<span @mouseover="com='com1'">切换组件1</span>
		<span @mouseover="com='com2'">切换组件2</span>
		<span @mouseover="com='com3'">切换组件3</span>

	
		//keep-alive保留原来的状态，注意：里面只能放一个组件放入超过一个的组件，后续组件无效
		<keep-alive>
			<component :is="com"></component>
		</keep-alive>

		//通过component标签，声明一个动态组件,通过v-bind:is（:is） 属性指明要变成的组件
		<component :is="com"></component>
	</div>
	
(2)	
	Vue.component('com1',{
	    template:'<div>组件1 <input type="text"></div>',
	});
    Vue.component('com2',{
        template:'<div>组件2 <input type="text"></div>',
    });
    Vue.component('com3',{
        template:'<div>组件3 <input type="text"></div>',
    });

    var app = new Vue({
        el: '#app',
        data: {
            com: 'com1'
        },
    });

15.组件杂项

app.$refs返回的是一个对象

app.$refs.com1得到的组件是一个对象

$el可以找到组件替换为template后的dom元素，app.$refs.$el.textContent可以设置内联内容，

五、Vue列表渲染

	主要使用v-for来进行列表渲染
	1.数组迭代:
	<tr v-for="(student,index) in students">
		<td>{{index + 1}}</td>
		<td v-for="key in student">{{key}}</td>
	</tr>
	
	2.对象迭代
	<ul>
		<li v-for="(value,key,index) in students[0]">
			第{{ index + 1 }}个，键名：{{ key }},值为{{ value }},
		</li>
	</ul>
	
	3.整数迭代
	<div>
		<span v-for="num in 10">&#x3000;{{num}}&#x3000;</span>
	</div>
	
	4.

五、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

所以提供了修饰符:

	.prevent    阻止默认事件,a标签的跳转，表单提交的重刷页面等
	.stop       阻止冒泡
	.capture    添加事件侦听器时使用事件捕获模式
	.self       只当事件在该元素本身（比如不是子元素）触发时触发回调
	.once       点击事件将只会触发一次

六.键值修饰符

	.enter  回车
	.tab
	.delete
	.esc
	.space
	.up
	.down
	.left
	.right

	// 修饰键需要连用，单个不起作用
	// 修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。
	// 换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。
	.ctrl
	.alt
	.shift
	.meta   command/windows

七、表单控件的绑定

1. 表单中的事件修饰符:
	.lazy   输入时不会改变，而离开文本框时才会更新
	.number 自动将用户的输入值转为 Number 类型
	.trim   自动过滤用户输入的首尾空格
	
2. text文本
	<input type="text" v-model="text">
	<div>您输入的文本为:{{ text }}</div>

3. 多行文本
	<div style="background-color: lightblue;">您输入的文本为:
		<pre>{{message}}</pre>
	</div>
	<textarea v-model="message"></textarea>
	
4. 多选框
	<div>
		您的兴趣爱好：
		<label>敲代码</label><input type="checkbox" value="敲代码" v-model="hobbies">
		<label>学习</label><input type="checkbox" value="学习" v-model="hobbies">
		<label>读书</label><input type="checkbox" value="读书" v-model="hobbies">
		<label>写作</label><input type="checkbox" value="写作" v-model="hobbies">
		<label>唱歌</label><input type="checkbox" value="唱歌" v-model="hobbies">
		<label>阅读</label><input type="checkbox" value="阅读" v-model="hobbies">
	</div>
	<div>
		您选中了<br>
		<span v-for="(hobby,index) in hobbies">{{hobby}}</span>
	</div>
	
5. 单选框
	<div>
		您的性别是：<br>
		<input type="radio" v-model="gender" value="男">男 <br>
		<input type="radio" v-model="gender" value="女">女 <br>
	</div>
	
6. 选择列表
	<div>
		<select v-model="studentName">
			<option disabled>请选择</option>
			<option value="aa">aa</option>
			<option value="bb">bb</option>
			<option value="cc">cc</option>
			<option value="dd">dd</option>
		</select>
		您选中了：{{studentName}}
	</div>
	
7. 多选列表
	<div>
		<select v-model="studentArr" multiple>
			<option disabled>请选择</option>
			<option value="aa">aa</option>
			<option value="bb">bb</option>
			<option value="cc">cc</option>
			<option value="dd">dd</option>
		</select>
		您选中了：{{studentArr}}
	</div>

八、钩子函数


注意mounted是等所有的实例挂载完成之后再依次调用各个实例的mounted事件

	钩子函数（组件生命周期函数）
	1.beforeCreate   创建之前
	2.created        创建完成(一般情况在created函数中取请求数据)
	3.beforeMount    挂载之前(在组件挂载完成之前，组件还没有创建完成，模板还没有生成)
	4.mounted        挂载完成(生成模板，使用模板内容)
	5.beforeUpdate   更新前
	6.update         更新完成
	7.beforeDestroy  销毁前
	8.destroyed      销毁完成

posted @ 2017-09-04 21:15 baimaoccc 阅读(236) 评论(0) 收藏举报

刷新页面返回顶部

baimaoccc