1. 什么是vue.js
Vue.js是一套构建用户界面的渐进式框架。
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
2.框架和库的区别
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
3.Vue.js的代码结构
引入vue.js
写视图层,我们要展示的内容
实例化Vue()
如何获取变量值呢?
插值表达式、v-cloak、v-text、v-html
插值表达式{{}},可以在前后插入一些内容
v-clock防止界面闪烁
v-text:会替换掉元素里的内容
v-html:可以渲染html界面
v-bind这指令用于属性的绑定,可以省略为:(<button v-bind:title="nihao">按钮</button>---><button :title="nihao">按钮</button>)
v-on进行事件的绑定,我们用的最多的是click事件绑定简写@(<button v-on:click="lang">浪起来</button>--><button @:click="lang">浪起来</button>)
跑马灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、引入vue的js,引入js之后他为我们提供了Vue类 -->
<script src="../vue-2.4.0.js"></script>
<title>Document</title>
</head>
<body>
<!-- 2、视图层 -->
<div id="app">
<button @click="begin" :disabled="flag">浪起来</button>
<button @click="stop" :disabled="!flag">别浪</button>
<div>
<!-- 插值表达式,可以读取我们的变量 -->
{{msg}}
</div>
</div>
</body>
<script>
// 3、调度层,创建vue示例
let um = new Vue({
// 这个控制是哪块视图
el: "#app",
// 存放数据,这一层就是mvvm里的model层
data: {
msg: "猥琐发育,别浪!",
timer: null,
flag: false
},
// 放我们的方法
methods: {
begin() {
this.flag = !this.flag
clearInterval(this.timer)
this.timer = setInterval(() => {
let first = this.msg[0]
let last = this.msg.substring(1)
this.msg = last + first
}, 50)
},
stop() {
this.flag = !this.flag
clearInterval(this.timer)
}
}
})
</script>
</html>
注意:都是通过this对象去拿的,通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。
4.事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
可以叠加使用(<button @click.stop.once='clickBtn'>点我</button>)
5.v-model数据双向绑定
注意:绑定的是表单控件
作用:数据双向绑定,例如获取input的输入框的value值
6.Vue中样式的使用
数组(<p class="[first second]">这是一段文字...</p>)
三木表达式(<p :class="[pClass,flag?'second':'']">这是一段文字...</p>)
数组内置对象(对象的键是样式的名字,值是Boolean类型)(<p :class="[pClass,{'second':flag}]">这是一段文字...</p>)
直接通过对象(<p :class="{'first':false,'second':true}">这是一段文字...</p>)
使用内联样式
直接在元素上通过 :style 的形式,书写样式对象(<div :style="{'font-size':'32px'}">{{message}}</div>)
将样式对象,定义到 data 中,并直接引用到 :style 中(<div :style="textStyle">{{message}}</div>)
在 :style 中通过数组,引用多个 data 上的样式对象(<div :style="[textStyle,textStyle2]">{{message}}</div>)
7.V-for和key属性
遍历数组,参数(item,index) in list
遍历对象,参数(value,key,index) in list
遍历数字,num in 10 (1~10)
key在使用v-for的时候都需要去设置key(让界面元素和数组里的每个记录进行绑定,key只能是字符串或者数字,key必须是唯一的)
8.v-if与v-show区别
区别:
v-if删除dom元素
v-show设置display:none
应用场景:
v-if只修改一次的时候可以使用v-if
v-show频繁切换的时候可以使用v-show