Vue 02day

vue 02day

框架和库的区别

框架：是一套完整的解决方案：对目标的侵入性较大 项目如果需要更换框架，则需要重新架构整个项目。

库(插件)：提供某一小功能，，对项目的侵入 性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求

node（后端）中的mvc域前端中mvvm之间的区别

后端的mvc

前端的mvvm的由来

vue的 内联样式

使用class样式

<div id="app">
			<!-- 第一种使用方式，直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定-->
			<h2 :class="['color','fontsize']">{{message}}</h2>
			<h2 :class="['color','fontsize',{'active':flag}]">{{message}}</h2>
			<!-- 如果flag为true就显示 -->
			
			<!-- 在为class使用v-bind 绑定对象的时候 ，队形的属性是类名，对象的属性可带引号也可以不带，属性的值是一个标识符-->
			<h2 :class="{color:true,fontsize:true,active:false}">{{message}}</h2>
			<!-- 简写一下 -->
			<h2 :class="classobj">{{message}}</h2>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var app = new Vue({
			        el: '#app',
			        data: {
			         message:"不可改变的1234",
					 flag:true,
					 classobj:{color:true,fontsize:true,active:false}
			        },
			    });
		</script>

使用style

<div id="app">
			<!-- 对象就是无序建值对的集合，如果有-必须加上引号-->
			<h1 :style="{color:'red','font-weight':200}">{{message}}</h1>
			
			<h1 :style="styleobj">{{message}}</h1>
			<h1 :style="[styleobj,styleobj1]">{{message}}</h1>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var app = new Vue({
			        el: '#app',
			        data: {
			         message:"不可改变的1234",
					 styleobj:{color:'red','font-weight':200},
					 styleobj1:{'fontsize':'italic'}
			        },
			    });
		</script>

过滤器

Vue.js允许自定义过滤器，可用作一些常见的文本格式化，过滤器 可以用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符所指示

过滤器的基本使用方法

//过滤器的定义语法
// Vue.filter('过滤器的名称'，fucntion(){})
//过滤器调用时的格式  {{name | 过滤器的名称}}   |：管道符
//过滤中的function，第一个参数已经被规定死了，永远都是过滤管道符前面传递过来的数据
Vue.filter('过滤器名称',function(data){})

简单用法

<div id="app">
			<p>{{message | mesg}}</p>
			
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//定义igevue全局的过滤器，名字叫做 message
			Vue.filter('mesg',function(message){
				//字符串的replace方法，第一个参数，除了可写一个字符串 之外，还可以定义一个正则，g时全局匹配的意思
				return message.replace(/你好/g,'你不好')})
			var app = new Vue({
				el: '#app',
				data: {
					message:"你好觉得降低哦我讲究的里外的了"
				},
				methods:{
					add:function(){
						this.list.push({id:this.id,name:this.name})
					}
				}
			});
		</script>

第二种

<div id="app">
           //还可以传多个参数
           //<p>{{message | mesg('我超好','123')}}</p>
			<p>{{message | mesg('我超好')}}</p>
			//也可以调用多个过滤器
			 //<p>{{message | mesg('我超好','123') | test}}</p>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

			Vue.filter('mesg',function(message,changemessaeg,changemessage){
		
		        //return message.replace(/你好/g,changemessaeg+changmessage2)})       
				return message.replace(/你好/g,changemessaeg)})
vue.filter('test',function(message){
return message +'=========='
})
			var app = new Vue({
				el: '#app',
				data: {
					message:"你好觉得降低哦我讲究的里外的了"
				},
				methods:{
					add:function(){
						this.list.push({id:this.id,name:this.name})
					}
				}
			});
		</script>

定义格式化时间的全局过滤器
//所有的vue实例都共享的

<div id="app">
			<table v-for="item in list">
				<tr>
					<th>{{item.ctime | dateformat('')}}</th>
				</tr>
				
			</table>

		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.filter('dateformat',function(dateStr,patten){
				var dt =new Date(dateStr)
				var y=dt.getFullYear()
				var m=dt.getMonth()+1
				var d=dt.getDate()
				
				
				
				if(patten.toLowerCase()==='yyyy-mm-dd'){
					return `${y}-${m}-${d}`
				}else{
					var hh=dt.getHours()
					var mm=dt.getMinutes()
					var ss=dt.getSeconds()
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
				}
			})
			var app = new Vue({
				el: '#app',
				data: {
				list:[
					{ctime:new Date()},
					{ctime:new Date()},
					{ctime:new Date()}
				]
				},

			});
		</script>

定义私有过滤器
过滤器的调用也遵守就近原则，先调用私有的

<div id="app">
			<table v-for="item in list">
				<tr>
					<th>{{item.ctime | dateorfmat('')}}</th>
				</tr>

			</table>

		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var app = new Vue({
				el: '#app',
				data: {
					list: [{
							ctime: new Date()
						},
						{
							ctime: new Date()
						},
						{
							ctime: new Date()
						}
					]
				},
				filters: { //定义私有过滤器
					dateorfmat: function(dateStr, patten='') {
						var dt = new Date(dateStr)
						var y = dt.getFullYear()
						var m = dt.getMonth() + 1
						var d = dt.getDate()



						if (patten.toLowerCase() === 'yyyy-mm-dd') {
							return `${y}-${m}-${d}`
						} else {
							var hh = dt.getHours()
							var mm = dt.getMinutes()
							var ss = dt.getSeconds()
							return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
						}
					}
				}

			});
		</script>

es6中的字符串新方法
maxlength填充完之后的最大长度，fillstring用什么填充
String.prototype.padStart(maxLength.fillString=’’)或String.prototype.padEnd(maxLength.fillString=’’)来填充字符
注意：因为这是字符串方法所以要先转成字符串。

<div id="app">
			<table v-for="item in list">
				<tr>
					<th>{{item.ctime | dateorfmat('')}}</th>
				</tr>

			</table>

		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var app = new Vue({
				el: '#app',
				data: {
					list: [{
							ctime: new Date()
						},
						{
							ctime: new Date()
						},
						{
							ctime: new Date()
						}
					]
				},
				filters: { //定义私有过滤器
					dateorfmat: function(dateStr, patten='') {
						var dt = new Date(dateStr)
						var y = dt.getFullYear()
						var m = dt.getMonth() + 1
						var d = dt.getDate()



						if (patten.toLowerCase() === 'yyyy-mm-dd') {
							return `${y}-${m}-${d}`
						} else {
							var hh = dt.getHours().toString().padStart(2,'0')
							var mm = dt.getMinutes().toString().padStart(2,'0')
							var ss = dt.getSeconds().toString().padStart(2,'0')
													return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
						}
					}
				}

			});
		</script>

自定义按键修饰符

使用@keyup，@keydown，@keypess 来使用键盘按键
vue定义了可以直接使用的键盘

name: <input type="text" v-model="name" @keyup.enter="add">

别名
.delete
.tab
.enter
.esc
.space
.left
.up
.right
.down
.ctrl

还可以组合写，当两个按钮一起按时才可以触发

@keyup.alt.67=”function” Alt+c

如果Vue中没有别名可以直接使用 键盘码来添加事件

@keyup.113=“add”
自定义全局的按键修饰符

Vue.config.keyCodes.c=67

自定义全局指令

注意：在vue中所有指令都要加v-
使用钩子函数

<div id="app">
		<input type="text" v-focus />
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//使用vue.directive()定义全局指令
		//参数一是指令的名称，定义时不加v-，但是调用 时要加v-
		//参数是一个对象，这个对象身上，有一些相关的指令函数，这些函数可以在特定阶段，执行相关 操作
		Vue.directive('focus',{
			bind:function(el){
				//每当指令绑到元素上的时候，会立即执行这个bind函数，只执行一次
				//注意：在每个函数中，第一个参数永远时el，表示绑定了指令的那个元素，这个el参数，是一个原生的 js对象
			},
			inserted:function(el){
				//inserted 表示元素插入到DOM中的时候。会执行inserted函数【触发一次】
				el.focus()
			},
			updated:function(el){
				//当VNode更新的时候，会执行 updated，可能触发多次
				el.focus()
			}
		})
	
		var app=new Vue({
			el:"#app"
		})

注意一定要要讲究顺序，任何全局的东西都要放在vue实例化之前
还有其他两个选项函数
componentUpdated：被绑定的元素所在模板 完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数

<div id="app">
			<input type="text"  value="哈哈哈哈" />
			<!-- 加单引号是因为是一个字符串，不加单引号就是一个变量 -->
			<input type="text" v-color="'blue'" value="哈哈哈哈" />
			<input type="text"  v-color="'red'" value="哈哈哈哈"  />
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.directive('color', {
				bind: function(el, binding) {
					//样式只要通过指令绑定给了元素，，不管这个元素有没有被插入到页面中去，这个元素肯定都有了一个内联样式
					//将来元素坑定会显示到页面中去，这时候，浏览器渲染引擎必然会解析样式，应用给这个元素
					
						// el.style.color='red'
						el.style.color=binding.value
					
                        console.log(binding.value)
					//和样式相关的操作，一般都可以在bind中执行
				},
				inserted: function(el) {
					//和js行为有关的操作 ，最好在inserted中去执行，放置
					el.focus()
				},
				updated: function(el) {

					el.focus()
				}
			})

			var app = new Vue({
				el: "#app"
			})
		</script>

自定义私有指令

var app = new Vue({
				el: "#app",
				data:{
					
				},
				directives:{
					//自定义私有指令
					'color':{
						bind:function(el.binding){
							el.style.color=binding.value
							
						}
					},
					'fontsize':function(el,binding){
					//注意：这个function 等同于把代码写到了bind和update中
					el.style.fontSize=parseInt(binding.value)+'px'
					}
				}
			})

vue实例的生命周期

<div id="app">
			
			<p id="a">{{msg}}</p>
			<button type="button"@click="msg='no'">修改msg的值</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					msg:"ok"
				},
				methods:{
					show(){
						console.log('执行了')
					}
				},
				beforeCreate(){//这是我们遇到的第一个生命周期函数，表示实例完全被创建 出来之前会执行他
				console.log(this.msg) //=>undefined
				this.show()//也报错
				//注意：data和methods中的数据还没有被初始化
					
				},
				created(){//设施遇到的第二个生命周期函数
				console.log(this.msg)
				this.show()
				//都能被打印出来
				//在created中，data和methods都已经被初始化好了
				//如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作
					
				},
				beforeMount(){//这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
				
				console.log(document.getElementById('a').innerText)  //=>{{msg}}
				//在beforeMount执行的时候，页面中的元素，还没有真正替换过来，只是之前写的一些模板字符串
				},
				mounted(){//这是遇到的第四个生命周期函数，北边是，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
					console.log(document.getElementById('a').innerText) 
					//注意mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的让躺在我们的内存中，一动不动
				},
				
				
				//接下来的是运行中的两个事件
				beforeUpdate(){//这时候表示我们的页面还没有被更新【数据被更新了吗？数据肯定被更新了】
				console.log('界面上元素的内容'+document.getElementById('a').innerText) //=>ok
				console.log('data中的msg数据是：'+this.msg)//=>no
				//得出结论：当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的 ，页面尚未和最新数据保持同步
				},
				updated(){
					console.log('界面上元素的内容'+document.getElementById('a').innerText) //=>no
					console.log('data中的msg数据是：'+this.msg)//=>no
				//updated事件执行的时候，页面和data数据已经保持同步了
					
				}
				
				})
			
		</script>

最重要的是created和mounted