vue笔记周结
概述
实例化参数
指令
过滤-管道
动画
组件
一、Vue概述
了解
- 作者： 尤雨溪 (现任阿里巴巴Weex团队技术顾问)。
- 官网： cn.vuejs.org
- vue的定位： 是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。
- 特点：
- 简单，上手简单
- 结合Angular指令与react组件思维
- 生态丰富(插件多)api文档完善
二、实例化参数
- el:"#app"
选择目的标签 - data：{}
指定数据 - data(){return{}}
一个函数返回一个对象
<div id="app">
</div>
<script type="text/javascript">
new Vue({
// 指定模板标签
el:"#app",
// 指定数据
data:{
msg:"你好vue!",
msg2:"<i>河南</i>是个好地方!"
}
})
</script>
- mothods：{}
定义事件（实现一个简单的计算器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="number" v-model="num1" @input="calc()"/>
<select v-model="fuhao">
<option v-for="item in msg" :key="item">{{item}}</option>
</select>
<input type="number" v-model="num2" @input="calc()"/>
<button type="button" @change="calc()">=</button>
<span>{{num}}</span>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
num:2,
num1:1,
num2:1,
fuhao:"+",
msg:["+","-","*","/"]
},
methods:{
calc(){
// 把v3赋值给 v1,type,v2 字符串相连
// eval 把字符串当js代码执行一遍
this.num=eval(`${this.num1*1}${this.fuhao}${this.num2*1}`);
}
}
})
</script>
</body>
</html>
- computed：{}
计算属性（简单的计算）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</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 type="text/javascript">
new Vue({
el:"#app",
data:{
n1:10,
n2:5
},
// 从现有数据计算出新的数据
computed:{
"n3":function(){
return this.n1+this.n2;
}
}
})
</script>
</body>
</html>
- watch：{}
监听事件（案例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>监听：监听数据的变化，并执行回调函数</h1>
<p>{{person.age}} <input type="text" v-model="person.age"></p>
<p>{{num}} <input type="text" v-model="num"></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
age:15
},
num:8
},
watch:{
"num":{
// 当num发生变化时，执行handler函数
handler(nval,oval){
// oval是变化前的数据 nval是变化后的数据
// 存储 告诉后端
console.log("数据由",oval,"变化为",nval);
}
},
// 引用监听内容
"person":{
handler(nval,oval){
// 引用类型oval和nval是一样的
console.log("数据由",oval.age,"变化为",nval.age);
},
// 深度监听的意思
deep:true,
}
}
})
</script>
</body>
</html>
- directives：{}
自定义指令（自定义一个自动获取焦点事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>自定义指令</h1>
<p v-text="msg"></p>
<!-- 实现自动获取焦点的功能 -->
<input type="text" v-focus="true"/>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"你好Vue"
},
directives:{
"focus":{
inserted(el,binding){
// el指令所在的节点，binging指令相关的数据bingbing.value
// 获取指令所在的节点，执行第三方基于dom的插件
console.log(el,binding);
el.focus();
}
}
}
})
</script>
</body>
</html>
三、指令
- 文本渲染指令
- {{指令值}}
- v-text 渲染input框文本，不能识别标签
- v-html 渲染html文本，可以识别标签
<div id="app">
<h1>{{msg}}</h1>
<p v-text="msg.length"></p>
<!-- v-html识别标签 -->
<p v-html="msg2"></p>
</div>
<script type="text/javascript">
new Vue({
// 指定模板标签
el:"#app",
// 指定数据
data:{
msg:"你好vue!",
msg2:"<i>河南</i>是个好地方!"
}
})
</script>
- 属性绑定指令
- v-bind
- :属性=“属性值”(简写)
- 条件渲染指令
- v-show
- v-if
频繁切换用v-show
一次性切换用v-if
v-show隐藏是css方式隐藏节点
v-if是直接清空节点
- 列表渲染指令
- v-for
遍历
list是遍历的数组或者对象 item是每一个元素 index是下标
<p v-for="(item,index) in list" :key="index">{{item}}</p>
- 事件指令
- v-on:事件类型="响应函数"
例：v-on:click=“say()”
简写：@click=“say()”
斜体样式
<p @click="say()"><p>
阻止事件冒泡
<p @click.stop="say()"><p>
阻止默认事件
<p @click.prevent="say()"><p>
只执行一次
<p @click.once="say()"><p>
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个
按键修饰符
.up
.down
.left
.right
.delete
.enter
.space
.esc
表单绑定指令
v-moudel 让表单的值与数据绑定在一起
<input type="checkbox">
默认选中的值是true
不选中值是false
修饰符
.number 数字
.trim 移除两端空白
类绑定指令
1.属性
:class="值"
2.对象
当对象的属性值为真，该属性作为class绑定
:class="{'key1':true,'key2':false}"
key1的值为真，key1会被绑定，key2不会
3.数组方式
:class="[c1,c2,c3]"
<div id="app">
<h1>类的绑定</h1>
<h3 :class="pink" @click="pink=''">当属性</h3>
<h3 :class="'pink'">当属性</h3>
<h1>对象的方式</h1>
<button :class="{'active':current==0,'big':current==0}" @click="current=0">A</button>
<button :class="{'active':current==1,'big':current==1}" @click="current=1">B</button>
<h1>数组的方式</h1>
<p :class="['active','big']">我是一行可爱是的代码</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
pink:"pink",
current:0
}
})
</script>
样式绑定
写法：
属性名去掉 - 下一个字母大写
:style="{'color;:'red',fontSize':'48px'}"
<p :style="{'color;:'red',fontSize':'48px'}">你好</p>
四、过滤-管道
toFixed()
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>num:{{num}}</p>
<p><input type="text" v-model="num"></p>
<!-- 显示num 使用fix管道 -->
<p>{{num|fix}}</p>
<p>{{3.1415926|fix}}</p>
<p>13598859747</p>
<p>135-9885-9747</p>
<p>{{13598859747|list}}</p>
<p>{{13598859747|list("*")}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
num:100
},
// 过滤，管道（格式化数据）
filters:{
// 过滤名称，value过滤前的值,arg管道的参数
fix(value,arg=2){
// 返回转为小数的值
return value.toFixed(arg)
},
list(value,arg="-"){
// 思路：
// 1.转换为字符串，转数组，对数组遍历
// 2.如果是第2或第6位 加分隔符
//转换为数组
var arr = String(value).split('');
// 返回新的字符串
var str = '';
// 遍历数组
arr.forEach((item,index)=>{
// 默认加当前元素遍历元素
str+=item;
// 如果第2位或者第6位添加分隔符
if(index==2||index==6){
str+=arg;
}
})
return str;
}
}
})
</script>
</body>
</html>
五、动画
1. vue动画在内置组件transition包裹
会自动在动画的进入过程与离开过程添加类名
2. 什么是动画：两个状态间的过渡效果（变化）
3. vue 的动画是在元素的显示与隐藏之间切换的
4.vue的动画需要内置组件<transition></transition>包裹
5. vue的动画只是在显示和隐藏两个状态的时候添加了自动类名
6.真正要实现动画，还需要自己写css
动画实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 进入过程 */
.fade-enter-active{
transition: all 1s ease;
}
/* 进入前 透明度 */
.fade-enter{
opacity: 0;
/* 变换旋转 */
transform: rotate(-180deg);
}
/* 进入后 透明度 */
.fade-enter-to{
opacity: 1;
transform: rotate(0deg);
}
/* 离开过程 */
.fade-leave-active{
transition: all 1s ease;
}
/* 离开前 透明度 */
.fade-leave{
opacity: 1;
transform: rotate(0deg);
}
/* 离开后 透明度 */
.fade-leave-to{
opacity: 0;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="flag=!flag">切换</button>
<p>
<transition name="fade">
<img src="../images/sun.jpeg" alt="" width="200" v-if="flag">
</transition>
</p>
</div>
<script type="text/javascript">
// 什么是动画：两个状态间的过渡效果（变化）
// vue 的动画是在元素的显示与隐藏之间切换的
// vue的动画需要内置组件<transition></transition>包裹
// vue的动画只是在显示和隐藏两个状态的时候添加了自动类名
// 真正要实现动画，还需要自己写css
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
创建动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/animate.css"/>
</head>
<body>
<div id="app">
<button type="button" @click="flag=!flag">切换</button>
<p>
<transition name="fade" enter-active-class="bounceInRight animated" leave-active-class="hinge animated">
<img src="../images/sun.jpeg" alt="" width="200" v-if="flag">
</transition>
</p>
</div>
<script type="text/javascript">
//引用第三方数据库
//指定进入的class与离开的class
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
六、组件
全局组件
Vue.component("组件名",{template:``})
注册组件
new Vue({
components:{steper}
})
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>全局组件</h1>
<btn></btn>
<btn></btn>
<btn></btn>
<btn></btn>
</div>
<script type="text/javascript">
// 定义一个全局的组件，名称是btn（哪个vue实例可以适应）
Vue.component("btn",{
// 定义组件的模板
template:`<button>{{num}}</button>`,
// 定义组件的data数据
data(){
return {num:1}
}
})
var vm = new Vue({
el:"#app",
})
// vm是根目录（最基础的）实例
console.log(vm);
</script>
</body>
</html>
局部组件
const steper = {template:``}
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>局部组件</h1>
<p><steper></steper></p>
<p><steper></steper></p>
<p><steper></steper></p>
<p><steper></steper></p>
</div>
<script type="text/javascript">
// 定义组件
// 组件只能有且只有一个根节点
const steper = {
template:`
<span>
<button>-</button>
<input type="text" v-model.number="n"/>
<button>+</button>
</span>
`,
data(){
return {n:1}
}
}
new Vue({
// 注册组件
components:{steper},
el:"#app"
})
</script>
</body>
</html>
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
