Vue.js
Vue.js
Vue.js是什么
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是:
- Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
- 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue基础语法
插值表达式{{}}
主要作用是进行数据绑定
最常见的形式是使用“Mustache”语法(双大括号)的文本插值。
例如:<p>{{msg}}</p>
Mustache标签将会被替代为对应数据对象上msg属性(**msg定义在data对象中)**的值。
无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
安装Vue
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
实例化Vue
<div id="app"></div>
<script>
var vm=new Vue({
el:'#app'
data:{
},
methods: {
},
})
</script>
new 出来的这个vm对象 就是我们MVVM中的 VM调度者
- el:表示当前我们new的这个vue实例, 需要控制页面上的哪个区域
- data:就是MVVM中的M 专门用来保存每个页面的数据
- methods :定义了当前vue实例所有可用的方法
指令
v-text
**更新元素的 textContent。**如果要更新部分的 textContent,需要使用 {{ Mustache }}
插值。
通俗来讲,v-text指令会直接替换标签之间的内容
v-text 类似于js中 innerText
<div id="app">
<p v-text='msg'>这是一个p2标签</p>
<p>这是一个p1标签</p>
</div>
<script>
var vm=new Vue({
el:'#app'
data:{
msg:'欢迎学习Vue',
},
methods: {
},
})
</script>
效果如下:
我们可以看出v-text属性直接将“这是一个p2标签”替换成vue实例中的msg
v-html
更新元素的 innerHTML。
<div id="app">
hello pikaqiu
</div>
<script>
var vm=new Vue({
el:'#app'
data:{
html:'<h1>v-html指令的应用</h1>',
},
methods: {
},
})
</script>
v-cloak
**这个指令保持在元素上直到关联实例结束编译。**和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
如果浏览器速度过慢或者是网络延迟,浏览器页面上只会出现{{}}
v-cloak指令就是为了解决这个问题
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app'
data:{
msg:'欢迎学习Vue',
},
methods: {
},
})
</script>
v-bind
缩写::
用法:
- 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。
- 在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。
- 在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
- 没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
v-bind指令的应用: 是用来绑定属性的指令
示例:
<div id="app">
<a href="http://www.baidu.com">跳转到百度</a>
<br>
<a v-bind:href="baidu">跳转到百度</a>
<br>
<a :href="baidu">跳转到百度</a>
<input type="button" value="按钮" :title="mytitle+'123'" >
</div>
<script>
var vm=new Vue({
el:'#app'
data:{
baidu:'http://www.baidu.com',
mytitle:'这是一个自定义的title'
},
methods: {
},
})
</script>
v-on
缩写:@
用法:
- 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
- 用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
示例:
<div id="app">
<input type="button" value="提交" v-on:click="show">
<input type="button" value="提交" @click="show">
</div>
<script>
var vm=new Vue({
el:'#app'
data:{
},
methods: {
show:function(){
alert('Hello Vue指令v-on');
},
})
</script>
利用Vue指令制作简单跑马灯
第一步:创建Vue实例
<div id="app">
</div>
<script>
// 创建vue实例
var vm= new Vue({
el:'#app',
data:{
msg:'一起吃炸鸡,喝啤酒吧~~~~~!',
},
methods: {
},
})
</script>
第二步:写页面内容并绑定指令
<div id="app">
<input type="button" value="吃吃吃" @click='eat'>
<input type="button" value="嗨嗨嗨" @click='happy'>
<span>{{msg}}</span>
</div>
eat()和happy()是两个事件函数
第三步:设置定时器,定义函数内容
思想:点击‘吃吃吃’按钮,跑马灯运行起来,点击‘嗨嗨嗨’按钮,跑马灯立即停止,提取停止时的‘跑’过的字符,运用字符串拼接的方式将两部分拼接起来
完整代码:
<div id="app">
<input type="button" value="吃吃吃" @click='eat'>
<input type="button" value="嗨嗨嗨" @click='happy'>
<span>{{msg}}</span>
</div>
<script>
// 创建vue实例
var vm= new Vue({
el:'#app',
data:{
msg:'一起吃炸鸡,喝啤酒吧~~~~~!',
intervalId:null
},
methods: {
lang(){
// console.log(this.msg);
if (this.intervalId!=null) {
return
}
this.intervalId=setInterval(()=>{
var start=this.msg.substring(0,1);
console.log(start);
var end=this.msg.substring(1)
console.log(end);
// 重新 拼接得到新的字符串, 并赋值给 this.msg
this.msg=end+start;
// 起吃炸鸡,喝啤酒吧~~~~~!一
// 吃炸鸡,喝啤酒吧~~~~~!一起
},400)
},
stop(){
clearInterval(this.intervalId);
this.intervalId=null;
}
},
})
</script>
效果
起吃炸鸡,喝啤酒吧~~~~~!一
吃炸鸡,喝啤酒吧~~~~~!一起