1. 首页
  2. 文章中心
  3. VUE

使用HbuilderX学习Vue笔记使用HbuilderX学习Vue

77 阅读 0 评论
我是靠谱客的博主 高大万宝路，最近开发中收集的这篇文章主要介绍使用HbuilderX学习Vue笔记使用HbuilderX学习Vue，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用HbuilderX学习Vue

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

html中的页面结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 1.导入vue的包 -->
<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中的一些用法

  • <p v-cloak>——v-cloak能够解决 插值表达式闪烁的问题。p为一个标签。
  • <h4 v-text="msg">——默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是 插值表达式只会替换自己的这个占位符，不会把整个元素内容清空。
  • <p v-html>——可以让变量变成一个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( () => {})——定时器。
  • <p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>——三元表达式。判断？前的布尔值类型。
  • @click.stop——使用 .stop 阻止冒泡。 阻止单击事件继续传播。
  • @click.prevent——使用 .prevent阻止默认行为。提交事件不再重载页面。
  • @click.capture——使用 .capture实现捕获触发事件的机制。
  • @click.self——使用 .self实现只有点击当前元素的时候，才会触发事件处理函数。.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止人家冒泡行为的触发。
  • @click.prevent.once——使用 . once只触发一次事件函数。例如此处，点击第二次就不会阻止默认行为。证明，修饰符是可以串连的，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
  • <input v-model.lazy="msg" >——’.lazy’修饰符使得v-model在"change"时，而非"input"时更新。
  • <input v-model.number="age" type="number">—— 如果想自动将用户的输入值转为数值类型，可以给v-model添加’.number’修饰符。即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
  • <input v-model.trim="msg">—— 如果要自动过滤用户输入的首尾空白字符，可以给v-model添加 ‘.trim’ 修饰符。
  • add() { this.list.unshift({ })}——添加方法(添加在数组上方)，使用push({})时，为添加在数组下方。
  • setTimeout(function(){}, 3000);——3000毫秒后，{}内的值变换到所定义的值。
  • <p>{{ message.split('').reverse().join('') }}</p>——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">
<p v-for="(item,i) in list" :key = "i">索引值:{{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开始。还可以自定义一个方法，同时，把所有的关键字，通过传参的形式传递给这个方法。例如：

<tr v-for="item in search(keywords)" :key="item.id">。

  • 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>
<!--css渲染方面，依旧使用.v-enter,.v-leave-to {}
.v-enter-active, .v-leave-active {}-->
<!--而.v-move 和
*.v-leave-active配合使用，能够实现列表后续的元素，渐渐地飘上来的效果-->
<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">
<!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中，即可。 -->
<button-counter title="title1 : " @clicknow="clicknow"><!-- 生成触发事件 -->
<h2>hi...h2</h2><!-- 通过插槽可以再html中输入想要的内容 -->
</button-counter><!-- 使用html标签的方式对组件进行调用 -->
<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
}
},
//一个组件的模板需要根节点，<div></div>
//在模板内通过<slot></slot>可以声明一个插槽
template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>'，//其中的{{title}}是对此属性进行应用和渲染
methods:{
clickfun : function () {//声明函数
this.count ++;
//$emit方法还可以传入事件名称来触发一个事件。如<button v-on:click="$emit('enlarge-text')">Enlarge text</button>
this.$emit('clicknow', this.count);//第一个参数是事件名称，第二个参数是可携带的数据，参数。
}
}
})
// 注意:不论是哪种方式创建出来的组件,组建的template属性指向的模板内容,必须有且只能有唯一的一个根元素
Vue.component('mycom2',{
template:'<div><h3>这是直接使用Vue.component 创建出来的组件</h3><span>666<span><div>'
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {//声明方法
console.log(e);
}
}
});
</script>

最后

以上就是高大万宝路为你收集整理的使用HbuilderX学习Vue笔记使用HbuilderX学习Vue的全部内容，希望文章能够帮你解决使用HbuilderX学习Vue笔记使用HbuilderX学习Vue所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(51)

相关文章

Vue3中属性的设置与修改
Vue3中属性的设置与修改
【MAC】android studio连接真机调试
【MAC】android studio连接真机调试
解决：替换public目录下的favicon.icon，路径引入都对，但是图标就不生效。
解决：替换public目录下的favicon.icon，路径引入都对，但是图标就不生效。
Service 服务
Service 服务
使用HbuilderX学习Vue笔记使用HbuilderX学习Vue
使用HbuilderX学习Vue笔记使用HbuilderX学习Vue
eslint-disable-next-line vue/no-side-effects-in-computed-properties警告
eslint-disable-next-line vue/no-side-effects-in-computed-properties警告
【尚硅谷vue】p84全局总线事件、p87消息订阅与发布
【尚硅谷vue】p84全局总线事件、p87消息订阅与发布
VUE学习之组件命名问题
VUE学习之组件命名问题

评论列表共有 0 条评论

立即
投稿
返回
顶部