一、概述
Vue是一款渐进式JavaScript前端框架
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
作者：尤雨溪
官网：cn.vuejs.org
插件案例网址：GitHub - opendigg/awesome-github-vue: Vue相关开源项目库汇总
前端框架三架马车
- Vue
- React
- Angular
特点:
- 简单，上手方便
- 结合Angular指令与react组件思维
- 生态丰富（插件多）API文档完善
二、实例化参数new Vue
el："#app"------选择目标标签
data：{ }------指定数据
data( ){return{ }}------一个函数返回一个对象
methods：{ }------定义事件
示例：
<script>
new Vue({
el: '#app',
data: {
message: '大家好！',
},
methods:{
}
})
</script>三、computed计算
从现有数据计算出新的数据
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入vue.js -->
<script src="../vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>计算：从现有数据计算出新的数据</h1>
<p>n1:{{n1}}<input type="text" v-model.number="n1" /></p>
<p>n2:{{n2}}</p>
<p>n3:{{n3}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
n1:10,
n2:5,
},
computed:{
// 计算
"n3":function(){
return this.n1+this.n2;
}
}
})
</script>
</body>
</html>四、watch监听
监听数据的变化，并执行回调函数handler
watch:{
"num":{
handler(nval,oval){},
deep：true
}
}五、自定义指令
bind绑定执行一次
insert插入执行一次
update每更新执行一次
directives:{
"focus":{
update(el,binding){
if(binding.value){ el.focus(); }
}
}
}
<input v-focus="flag">六、过滤/管道（格式化数据）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>num:{{num}}</p>
<p><input type="text" v-model.number="num"/></p>
<!-- 显示num 使用fix管道 -->
<p>{{num|fix}}</p>
<p>{{3.14145|fix(4)}}</p>
<p>{{5432185|fix(2)}}</p>
<p>{{5432185|fix|tel(",")}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
num:100,
},
// 过滤/管道（格式化数据）
filters:{
// 过滤名称，value过滤之前的值,arg管道的参数
fix(value,arg=2){
// 返回转换为小数后的值
return value.toFixed(arg);
},
tel(value,arg="-"){
// 1.转换为字符串，转数字，对数组遍历
// 2.如果是第二位或第六位，加分隔符
// 转换为数组
var arr = String(value).split('');
// 返回字符串
var str = '';
// 遍历数组
arr.forEach((item,index)=>{
// 默认加当前遍历元素
str += item;
if(index==0||index==3){
str += arg;
}
})
return str;
},
}
})
</script>
</body>
</html>
七、指令
指令的值可以是简单的JavaScript命令
文本渲染指令
- {{value}}
- v-text
- v-html (渲染html文本)
综合案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<!-- v-model内置指令 -->
<input type="text" v-model="msg" />
<p v-text="msg"></p>
<!-- 重复三次 -->
<p v-text="msg.repeat(3)"></p>
<!-- v-html识别标签 -->
<p v-html="msg2"></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//指定模板标签
data:{
msg:"我爱泥",
msg2:"<strong>安阳</strong>是个好地方"
}//指定数据
})
</script>
</body>
</html>
属性绑定
- v-bind : 属性="指令值"
- :属性="值"
条件渲染
- v-show (css方式隐藏)
- v-if
- v-else-if
- v-else
区别：频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点
列表渲染
- v-for = "item in list"（list要遍历的数组，item当前遍历的项目）
- v-for = "(item,index) in list"（index 当前遍历项的索引 从0开始）
- 使用v-for务必v-bind:key=" " :key="值"
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in list">{{item}}</p>
<!-- key优化vue的渲染（要求是唯一）推荐使用：key优化 -->
<h3 v-for="(item,index) in user" :key="item.name">
姓名：{{item.name}},
年龄：{{item.age}}
</h3>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//指定模板
data:{
list:["vue","react","angular"],
user:[
{name:"beibei",age:19},
{name:"dian",age:17},
{name:"yqq",age:18}
]
},
})
</script>
</body>
</html>
v-for特点：
值必须是唯一的
添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序、过滤等操作的时候
不建议key的值使用循环的索引
事件指令
v-on:事件类型="响应函数"
v-on:click="say( )"
@click="say( )" 事件的简写
@click="num++" 行内事件响应
事件修饰符
- . stop 阻止事件冒泡
- . prevent 阻止默认事件
- . once 只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个
按键修饰符
- @keyup.up
- @keyup.down
- .left
- .right
- .delete
- .enter
- .space
- .esc
按键修饰符例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- @keyup监听键盘的弹起 -->
<!-- @keyup.up 监听键盘上键，弹起@keyup.enter监听回车键 -->
<!-- list.unshift(item)在list最前面插入item -->
<input type="text" v-model="num"
@keyup.up="num++"
@keyup.down="num--"
@keyup.enter="list.unshift(num)"
/>
<p v-for="item in list" :key="item">{{item}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
num:1,
list:[]
},
})
</script>
</body>
</html>
$event 事件监听对象
表单绑定指令
v-model 让表单的值与数据绑定再一起
<input type="checkbox"> 默认选中值是true，不选中值是false
<input type="checkbox" name="fruit" v-model="list">
//如果是多个选中的值动态添加到list数组中
修饰符
- .number 转数字
<input type="text" v-model.number="n1" />
- .trim 移除空白
<input type="text" v-model.trim="temp" >
类绑定
1.属性 :class="值"
2. 对象 当对象的属性为真，该属性作为class绑定
:class="{'key1':true,'key2':false}"
//key1的值为真，key1被绑定
3. 数组方式 :class="[c1,c2,c3]"
样式绑定
样式属性名去掉 - 下一个字母大写
:style="{color:'res','fontSize':'48px'}"
八、动画
什么是动画？
两个状态间的过度效果/变化
vue的动画是在元素的显示与隐藏之间切换的
vue的动画需要内置组件<transition></transition>包裹
vue会自动在动画的进入过程与离开过程添加类名
真正实现动画，还需自己写css
内置组件
1.transition
- name名称
- mode:模式
in-out先进再出
out-in先出再进
<transition name="fade"
mode="in-out"
enter-active-class="slideInRight animated"
leave-active-class="slideOutLeft animated">
</transition>- enter-active-class 指定进入类名
- leave-active-calss 指定离开类名
2.transition-group
动画类
1. v-enter-active 进入过程
v-enter进入前
v-enter-to进入后
2. v-leave-active 离开过程
v-leave离开前
3.创建动画形式
动画类6个css创建
keyframes关键帧
.fade-enter-active{animation: fadeIn 1s ease}
.fade-leave-active{animation: fadeOut 1s ease}
引用第三方动画库
指定进入的class与离开的class
<transition enter-active-class="slideIn animated"
leave-active-class="hinge animated">
九、组件
一段可以重复利用的代码块
全局组件
Vue component("组件名"，{template:``})
局部组件
const steper = {template:``}
注册组件
new Vue({
components:{steper}
})
使用组件
<steper></steper>
扫一扫
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
