Vue初学习(一)
【摘要】 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一、声明式渲染
<div id="app">
{{ message }}
</div>
<script>
let app = new Vue({ //创建Vue实例
el:"#app",//选择器
data:{ //初始化数据
message:"hello world"
}
})
</script>
输出hello world 。
Vue所有东西都是响应式的,打开控制台输入app.message="Vue"可以看到相应的更新。
理解Vue中`MVVM`
MVVM:
Model:模型、数据对象(data)View:视图,模板页面viewModel:视图模型(Vue的实例)
二、模板语法
插值表达式：{{...}}
功能是向页面渲染数据
<div id="app">
{{ msg }}
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:"你好！"
}
});
</script>
使用JavaScript表达式
{{ number + 1}}
{{ ok ? 'YES' :'NO'}}
{{ message.split('').reverse().join('')}}
有个限制,每个绑定都只能包含单个表达式
<!--这是语句,不是表达式-->
{{var a = 1}}
<!--流程控制也不会生效,应该使用三元表达式-->
{{ if(ok) {return message}}}
v-html和v-text
v-html：innerHtml可以解析html 存在安全性问题v-text:textContent不能解析HTML
<div id="app">
<p v-text="html"></p>
<p v-html="html"></p>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
html: " <span>html解析</sapn>!"
},
})
</script>
三、强制数据绑定
v-bind是Vue中,提供的用于绑定属性的指令。v-bind可以写合法的js表达式v-bind可以简写为:
<img v-bind:src="imgUrl">
data:{
imgUrl="https://cdn.pixabay.com/photo/2020/08/01/10/04/alpine-5455013_960_720.jpg"
}
四、绑定事件
在html属性上加上
v-on事件属性值，就可以实现Vue的方法监听可以简写为
@vue中事件
<button @click="handle"></button>
<script>
let app = new Vue({
el: "#app",
methods: {
//methods 定义了当前Vue实例所有可用的方法
handle() {
alert('click');
}
}
})
</script>
小案例：文字滚动效果
分析：
1、每次点击按钮,获取msg字符串,在使用substring进行截取操作,放到最后一个位置
2、实现文字连续滚动,需要添加定时器
第一步：每次点击按钮,字符串就滚动一次
handelClick:function(){
// 取第一个字符
let startStr = this.msg.subString(0,1);
// 获取剩下的字符
let endStr = this.msg.subString(1);
//拼接新的字符 赋值给msg
this.msg = endStr + startStr
}
第二步:添加定时器
handelClick:function(){
setInterval(function(){
let _this = this;
// 取第一个字符
let startStr = _this.msg.subString(0,1);
// 获取剩下的字符
let endStr = _this.msg.subString(1);
//拼接新的字符 赋值给msg
_this.msg = endStr + startStr
},100)
}
定时器会存在this指向问题,this指向的是window,因此需要保存一份thislet _this = this
还可以使用箭头函数,解决this指向问题。
handelClick:function(){
setInterval(() =>{
// 取第一个字符
let startStr = this.msg.subString(0,1);
// 获取剩下的字符
let endStr = this.msg.subString(1);
//拼接新的字符 赋值给msg
this.msg = endStr + startStr
},100)
}
第三步：设置停止按钮(停止定时器)
把定时器赋值给intervarID,然后在data里传入一个null,在data里可以再全局访问到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="handelClick">
<input type="button" value="结束" @click="stop">
<p>{{ msg }}</p>
</div>
<script>
let app = new Vue({ el: "#app",
data: { msg: "公告：八月七号是立秋！", interv: null
},
methods: { handelClick() {
if (this.interv != null) return;
this.interv = setInterval(() => {
//获取第一个字符
var strat = this.msg.substring(0, 1)
//获取到后面所有字符
var end = this.msg.substring(1)
//重新拼接新的字符串,并赋值给this.msg
this.msg = end + strat
// app 实例,会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最新的数据 从data同步到页面中。
}, 300)
},
stop() {
clearInterval(this.interv)
//每当清除了定时器之后需要重新把interv设置为null
this.interv = null;
}
}
})
</script>
</body>
</html>
在Vue中,如果要获取data里的数据、methods里面的方法,都要通过this来访问。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）