发布时间：2024-02-05 10:00
从各种视频和书中结合学习。做个笔记温故知新。
<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- 开头。
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只触发一次事件函数。例如此处，点击第二次就不会阻止默认行为。证明，修饰符是可以串连的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。type=\"number\" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。add() { this.list.unshift({ })}——添加方法(添加在数组上方)，使用push({})时，为添加在数组下方。setTimeout(function(){}, 3000);——3000毫秒后，{}内的值变换到所定义的值。{{ message.split(\'\').reverse().join(\'\') }}
v-for——关于v-for的一些用法：在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定 唯一的字符串/数字 类型 ：key值。以用来保证数据的唯一性。
注意：v-for循环的时候，key属性只能使用 number 获取string
注意：key 在使用的时候，必须使用v-bind 属性绑定的形式，指定 key 的值。
<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\"是索引。
<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>
<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开始。还可以自定义一个方法，同时，把所有的关键字，通过传参的形式传递给这个方法。例如：
过滤器的定义语法：Vue.filter(‘过滤器名称’,function(){})。过滤器中的function,第一个参数已经被规定死了,永远都是 过滤器 管道符 前面传递过来的数据。 例如： 使用Vue.directive()定义全局指令，其中:参数1: 指令的名称,注意,在定义的时候,指令的名称前面,不需要加v- 前缀，在调用的时候,必须在指令名称前,加上v-前缀进行调用。参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。 使用transition元素，把 需要被动画控制的元素，包裹起来，transition元素是vue官方提供的元素。如下： 此处的my则是自定义的一个前缀，可以区分不同组的动画。如下： 使用第三方类完成动画时——bounceIn为入场，bounceOut为离场。使用 实例创建阶段： 接下来的是运行中的两个事件： 实例销毁阶段： 什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 组件化和模块化的不同：。
<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>
<div v-if=\"type === \'A\'\">
A
div>
<div v-else-if=\"type === \'B\'\">
B
div>
<div v-else>
Not A/B
div>
@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.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,可能会触发多次
}
})
根据关键字，进行数据的搜索
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>
<h3 v-if=\"flag\"><strong>这是祖安人strong>h3>
transition>
<transition name=\"my\">
<h6 v-if=\"flag2\"><strong>这是影流人strong>h6>
transition>
：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>
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函数的时候，组件已经被完全销毁了，此时，组建中的左右数据，方法，指令，过滤器…都已经不可用了。组件的使用
<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
}
},
//一个组件的模板需要根节点，
//在模板内通过hi...
这是直接使用Vue.component 创建出来的组件
666