Vue.js入门与核心特性-优快云博客

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">

<script src="../vue-2.4.0.js"></script>
<title>Document</title>
</head>

<body>

<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必须是唯一的）