使用HbuilderX学习Vue笔记

使用HbuilderX学习Vue

从各种视频和书中结合学习。做个笔记温故知新。

html中的页面结构


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<p>{{msg}}p>
		div>
		<script>
            // 2.创建一个vue的实例
			var vm = new Vue({
				el: '#app', 
				data: { 
					msg: '欢迎学习vue'
				}
                 methods:{}//存放自定义的方法
                 directives: {}//自定义私有指令
                 filters: {
               //定义私有过滤器,过滤器有两个条件  [过滤器名称 和 处理函数]
               //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
                     msgFormat:function(msg,arg){
                         //字符串的 replace 方法,第一个参数,除了可写一个字符串之外,还可以定义一个正则
						return msg.replace(/说/g,arg)+'~~~'
                         }
                 }//自定义私有过滤器
            
			})
		script>
	body>
html>

当我们导入包之后,在浏览器的内存中就多了一个Vue构造函数。注意:我们new出来的这个 vm对象,就是我们MVVM的vm的调度者。

  • el: '#app', ——表示当前我们new的这个vue实例,要控制页面上的哪个区域
  • data:{},——这里的data就是mvvm中的m,专门用来保存每个页面的数据的,data属性中,存放得是el中要用到的数据。

如果你会在之后某些时候需要一个属性,但是它一开始不存在或为空的时候,你就需要在data中设置一些初始值,比如:

data: {
  	n1: 0,
	n2: 0,
	opt: '+',
    selection:false,
    list:[],
    error:null
}

注意: Vue中所有的指令,在调用的时候,都以 v- 开头。

Vue中的一些用法

  • ——v-cloak能够解决 插值表达式闪烁的问题。p为一个标签。

  • ——默认v-text是没有闪烁问题的,v-text会覆盖元素中原本的内容,但是 插值表达式只会替换自己的这个占位符,不会把整个元素内容清空。

  • ——可以让变量变成一个html元素,而不是一个普通的文本。

  • v-bind:——vue提供的属性绑定机制,缩写":"。v-bind只能实现数据的单向绑定,从M自动绑定到v,无法实现数据的双向绑定。
  • v-model="自定义事件"——可以实现表单元素和model中数据的双向数据绑定,注意:v-model 只能运用在表单元素中:比如 input(radio,text,address,email…),select,checkbox,textarea。
  • v-on:属性="自定义事件"——vue提供的事件绑定机制, 缩写’’@’’。在vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了比如@click="add()"
  • this.intervalid = setInterval( () => {})——定时器。
  • {{ 1 == 1 ? 'YES' : 'NO' }}

    ——三元表达式。判断?前的布尔值类型。
  • @click.stop——使用 .stop 阻止冒泡。 阻止单击事件继续传播。
  • @click.prevent——使用 .prevent阻止默认行为。提交事件不再重载页面。
  • @click.capture——使用 .capture实现捕获触发事件的机制。
  • @click.self——使用 .self实现只有点击当前元素的时候,才会触发事件处理函数。.self 只会阻止自己身上冒泡行为的触发,并不会真正阻止人家冒泡行为的触发。
  • @click.prevent.once——使用 . once只触发一次事件函数。例如此处,点击第二次就不会阻止默认行为。证明,修饰符是可以串连的,使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
  • ——’.lazy’修饰符使得v-model在"change"时,而非"input"时更新。
  • —— 如果想自动将用户的输入值转为数值类型,可以给v-model添加’.number’修饰符。即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。
  • —— 如果要自动过滤用户输入的首尾空白字符,可以给v-model添加 ‘.trim’ 修饰符。
  • add() { this.list.unshift({ })}——添加方法(添加在数组上方),使用push({})时,为添加在数组下方。
  • setTimeout(function(){}, 3000);——3000毫秒后,{}内的值变换到所定义的值。
  • {{ message.split('').reverse().join('') }}

    ——spilt将信息变成一个数组,reverse将数组元素反序,join重新将排序后的元素形成新的一个数组。
  • v-for——关于v-for的一些用法:

在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定 唯一的字符串/数字 类型 :key值。以用来保证数据的唯一性。

注意:v-for循环的时候,key属性只能使用 number 获取string

注意:key 在使用的时候,必须使用v-bind 属性绑定的形式,指定 key 的值。

  1. for循环普通数组
<div id="app">
  

索引值:{{i}} --- 每一项:{{item}}p> div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6] }, }) script>

"item"为赋值的对象,"i"是索引。

  1. v-for循环对象数组
<div id="app">
		<p v-for="(user, i) in list">ID:{{user.id}} -- name:{{user.name}}--索引:{{i}}p>
div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			list:[
				{id:1,name:'zs1'},
				{id:2,name:'zs2'},
				{id:3,name:'zs3'},
				{id:4,name:'zs4'}
			]
		},
	})
script>
  1. v-for迭代数字
<div id="app">
	<p v-for="count in 10">这是第 {{count}} 次循环p>
div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{},
				})
script>

"in"后面我们放过:普通数组,对象数组,对象,还可以放数字 。注意:如果使用v-for迭代数字的话,前面的count值从1开始。还可以自定义一个方法,同时,把所有的关键字,通过传参的形式传递给这个方法。例如:

  • v-if和v-show的使用特点。
<div id="app">
			<input type="button" value="toggle" @click="flag=!flag">
			<h3 v-if="flag">这个是v-if控制的元素h3>
			<h3 v-show="flag">这是v-show控制的元素h3>
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					flag:true//当为false时,则不会被渲染。
				},
				methods:{}
			})
		script>
  1. v-if的特点是:每次都会重新删除或者创建元素。有较高的切换性能消耗 。 如果元素可能基本不会被显示出来给用户看到,则推荐使用v-if。v-else-if用法:
<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else>
Not A/B
div>
  1. v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式 。v-show有较高的初试渲染消耗。如果元素涉及到频繁的切换,最好不要使用v-if,而是推荐使用v-show。
  • @keyup.enter="add"——按键修饰符,在文本框中敲击回车就触发add事件。add自己在methods中定义。
  • Object.freeze()——使用在new的Vue实例之前,会阻止修改现有属性。
  • this.list.splice(index, 1)——索引名用var自定义,这是删除列表中一行数据的方法。

Vue的一些实例

定义全局过滤器

Vue.filter('dateFormat', function(dateStr, pattern) {
				//根据给定的时间字符串,得到特定的时间
				var dt = new Date(dateStr)
				//yyyy-mm-dd
				var y = dt.getFullYear()
				var m = (dt.getMonth() + 1).toString().padStart(2, '0')
				var d = dt.getDate().toString().padStart(2, '0')
				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}`
			})

过滤器的定义语法:Vue.filter(‘过滤器名称’,function(){})。过滤器中的function,第一个参数已经被规定死了,永远都是 过滤器 管道符 前面传递过来的数据。

定义全局指令

例如:

Vue.directive('focus', {
		bind: function(el) { //,每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
			//注意,在每个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
			//在元素,刚绑定了指令的时候,还没有插入到DOM中去,这时候,调用focus方法
			//没有作用,因为,一个元素只有插入DOM,之后,才有获取焦点
		},
		inserted: function(el) {//inserted表示元素 插入到dom中的时候,会执行该函数,触发一次
			el.focus()
			//和JS行为有关的操作,最好在inserted中去执行,防止JS行为不生效
		},
		updated: function() { //当VNODE更新的时候,会执行updated,可能会触发多次

		}
	})

使用Vue.directive()定义全局指令,其中:参数1: 指令的名称,注意,在定义的时候,指令的名称前面,不需要加v- 前缀,在调用的时候,必须在指令名称前,加上v-前缀进行调用。参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。

根据关键字,进行数据的搜索

search(keywords) { 
		/*var newlist = []
		this.list.forEach(item => {
		if (item.name.indexOf(keywords) != -1) {
				newlist.push(item)
			}
		})
	return newlist*/

	//注意:  forEach   some   filter(过滤)   findIndex(找到对应的索引) 这些都属于数组的新方法
	//都会对数组中的每一项,进行遍历,执行相关的操作
		return this.list.filter(item => {
			// if(item.name.indexOf(keywords)  != -1)
			//注意 : ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
			//如果包含,则返回true,否则返回false
			//contain
			if (item.name.includes(keywords)) {
				return item
			}
		})
	}

实现过渡类名实现动画

<style>
	/* v-enter[这是一个时间点]是进入之前,元素的起始状态,此时还没有开始进入 */
	/* v-leace-to[这是一个时间点]是动画离开之后,离开的终止状态,此时,元素动画已经结束了 */
	.v-enter,
	.v-leave-to{
		opacity: 0;
		/* 入场离场动画位移 */
		transform: translateX(200px);
	}
	/* v-enter-active[入场动画的时间段] */
	/* v-leave-active[离场动画的时间段] */
	.v-enter-active,
	.v-leave-active{
		/* 入场离场所用时间 */
		transition: all 20s ease;
	}
    /*此处的my则是自定义的一个前缀,可以区分不同组的动画*/
  	.my-enter,
	.my-leave-to{
		opacity: 0;
		transform: translateY(200px);
	}
	.my-enter-active,
	.my-leave-active{
		transition: all 1s ease;
	}
style>

使用transition元素,把 需要被动画控制的元素,包裹起来,transition元素是vue官方提供的元素。如下:

<transition>
	<h3 v-if="flag"><strong>这是祖安人strong>h3>
transition>

此处的my则是自定义的一个前缀,可以区分不同组的动画。如下:

<transition name="my">
	<h6 v-if="flag2"><strong>这是影流人strong>h6>
transition>

使用第三方类完成动画时——bounceIn为入场,bounceOut为离场。使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长。如果使用:duration="{enter:200, leave:600}" 就可以分别设置入场的时长和离场的时长。

<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
	<h3 v-if="flag" class="animated"><strong>这是祖安人strong>h3>
transition>

使用动画钩子函数

var vm = new Vue({
	el: '#app',
	data: {
		flag: false
	},
	methods: {
		// 动画钩子函数的第一个参数el,表示要执行动画的那个DOM元素,是个原生的JS DOM对象
		//el是通过 document.getElementById('')方式获取到的
		beforeEnter(el){
			// 表示入场之前,表示动画尚未开始,可以再before中设置元素动画开始之前的起始样式,位置
			el.style.transform = "translate(0,0)"
		},
		enter(el,done){
			// 这句话没有实际作用,但是如果不写,就没有动画效果
			// 可以认为 el.offsetWidth 会强制动画刷新.
			el.offsetWidth
			// 表示动画开始之后的样式,这里,可以设置小球完成动画之后的,结束状态.
			el.style.transform = "translate(150px,450px)"
			el.style.transition = 'all 1s ease'
			//这里的done,其实就是afterEnter这个函数,也就是说:done是afterEnter函数的引用
			done()
		},
		afterEnter(el){
			//动画完成之后,会调用
			//这句话第一个功能是控制小球的显示与隐藏
			//第二个功能:直接跳过后半场动画,让flag标识符直接变为false
			//当第二次再点击按钮的时候,flag false -> true
			this.flag = !this.flag
			// el.style.opacity= 0.5
            
			//Vue把一个完整的动画,使用钩子函数,拆分为了两部分:
			//我们使用flag标识符,来表示动画的切换;
			//刚一开始,flag = false---->  true   ---->false
		}
	}
})

动画列表

<transition-group appear tag="ul">
	<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
		{{item.id}}----{{item.name}}
	li>
transition-group>


<style>		
.v-move{ 
	transition: all 2s ease;
	}
.v-leave-active {
	position: absolute;			
	}
style>
  • 在实现列表过渡的时候,如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用transition包裹,需要使用 transition-group。
  • 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素 设置:key属性。
  • 给transition-group 添加appear 属性 ,实现入场时候的效果。
  • 通过为transition-group 元素,设置tag 属性,指定transition-group渲染为指定元素,如果不指定tag属性,默认渲染为span标签。

Vue的生命周期函数

实例创建阶段:

beforeCreate(){}——这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它,在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。也就是在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化。

created(){}——这是遇到的第二个生命周期函数,在create中,data和methods都已经被初始化好了,然而,挂载阶段还没开始,$el 属性目前不可见。如果要调用 methods中的方法,或者操作data中的数据,最早,只能在created中操作。

beforeMount(){}——这是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中,/在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。

mounted(){}——这是遇到的第四个生命周期函数,表示,内存中的模板已经真实的挂载到页面中,表示用户已经可以看到渲染好的页面了。注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示实例已经被完全创建好了。只要执行完了mounted ,就表示整个Vue实例已经初始化完毕了;此时,组件已经脱离了创建阶段;进入到了运行阶段。

接下来的是运行中的两个事件:

beforeUpdate(){}——数据更新时调用,这时候,表示,我们的界面还没有被更新,数据已经被更新了。当执行beforeUpdate的时候,页面中的显示数据,还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步。

updated(){}——组件 DOM 已经更新, 组件更新完毕 ,updated事件执行的时候,页面和data数据已经保持同步了,都是最新的。

实例销毁阶段:

beforeDestroy(){}——当执行beforeDestroy的时候,实例身上所有的data和所有的methods,以及过滤器,指令…都处于可用状态,此时,还没有真正执行销毁的过程。

destroyed(){}——当执行到destroyed函数的时候,组件已经被完全销毁了,此时,组建中的左右数据,方法,指令,过滤器…都已经不可用了。

组件的使用

什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。

组件化和模块化的不同:

  1. 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
  2. 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组建的重用;
<div id="app">
    
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2h2>
	button-counter>
	<button-counter title="title2 : ">button-counter>
    <mycom2><mycom2>
div>
<script type="text/javascript">
//使用vue.component(){}为全局注册。
// 1.2 使用Vue.component('组件名称',创建出来的组件模板对象)
// Vue.component('myCom1',com1)
// 如果使用Vue.component定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把大写的
// 驼峰改为小写的字母,同时,两个单词之间,使用 - 连接;
// 如果不使用驼峰,则直接拿名称来使用即可
// 驼峰写法,例如:myCom1,区别于下方常规写法
// Vue.component('mycom1',com1)
Vue.component('button-counter', {//使用vue.component(){}创建一个Vue组件,'button-counter'为组件名称。
	props: ['title'],//为组件定义属性,他是一个数组
	data: function () {//以对象的形式去描述一个组件,data必须是一个函数
		return {//因此每个实例可以维护一份被返回对象的独立的拷贝,如果不是一个函数,各个组件之间会相互影响。
		  count: 0
		}
	},
    //一个组件的模板需要根节点,
//在模板内通过可以声明一个插槽 template: '

hi...

'
//其中的{{title}}是对此属性进行应用和渲染 methods:{ clickfun : function () {//声明函数 this.count ++; //$emit方法还可以传入事件名称来触发一个事件。如 this.$emit('clicknow', this.count);//第一个参数是事件名称,第二个参数是可携带的数据,参数。 } } }) // 注意:不论是哪种方式创建出来的组件,组建的template属性指向的模板内容,必须有且只能有唯一的一个根元素 Vue.component('mycom2',{ template:'

这是直接使用Vue.component 创建出来的组件

666
' }) var vm = new Vue({ el : "#app", data : { }, methods:{ clicknow : function (e) {//声明方法 console.log(e); } } }); script>

你可能感兴趣的:(VUE,前端,vue)