VUE2(基于Java的学习)--笔记基于尚硅谷学习视频自己简写
Vue学习结构图
1. Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架(自底向上逐层应用)。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1、vue是什么？一套用于构建用户界面的渐进式JavaScript框架
2、谁开发的？尤雨溪 14年正式对外开发vue
3、vue的特点
1.采用组件化模式，提高代码复用率，切让代码更好维护
2.声明式编码，让编号人员无需直接操作DOM，提高开发效率
3.使用虚拟DOM(Virtual-DOM)+Diff算法，尽量复用DOM节点
Vue官网：[Vue.js (vuejs.org)](https://cn.vuejs.org/)
2. HelloWorld小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- vue 使用{{}}来分隔 -->
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
//创建Vue实例 配置对象{}
const x = new Vue({ //直接写成 new Vue
// el:document.getElementById("root") 也可以
el:'#root', //el 元素，获取id为root,值供el使用
data:{ //data存数据
name:'world'
}
});
</script>
</body>
</html>初始Vue： 1.vue工作需要vue实例，且需要传入配置对象 2.root容器依然符合html规范，只不过混入了一些Vue语法 3.root容器里的代码被称为Vue模板
-
插值语法
功能:用于解析标签体内容。
写法:{{xxxx}}是js表达式,且可以直接读取到data中的所有属性
3. 数据绑定
Vue中有2中数据绑定的方式： 1.单向绑定(v-bind):数据只能从data流向页而，简写成：:href 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data，简写：v-model:value==>v-model 数据单向绑定就是data向页面流动，而不是页面向data流动。只允许一个方向，不是只有一次机会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
单项数据绑定:<input type="text" v-bind:value="name"/>
<br/>
双向数据绑定:<input type="text" v-model:value="name"/>
<br/>
双向数据简化:<input type="text" v-model="name"/>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'逆鳞',
}
})
</script>
</body>
</html>4. el与data两种写法
1.e1有2种写法 (1).new Vue时就配置el属性。 (2).先创建Vue实例,随后再通过vm.$mount( " #root ')指定el的值。 2.data2种写法 (1).对象式 (2).函数式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE2-----REVIEW</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.数据渲染-->
<h1>{{param}}</h1>
<!-- 2.单项绑定属性 v-bind，简写：-->
<a :href="image1">去你的，这是一个图片链接！点我就跳转，试试吧...</a>
<!-- 3.数据双向绑定 v-model:value=""，简写v-model=""-->
<!-- 4.v-model绑定表单元素，会忽略表单元素的value,checked,selected属性的值-->
<br><br><br>
<label>
<input type="text" placeholder="请输入你的姓名" v-model:value="username"/>
</label>
<h2>{{username}}</h2>
</div>
</body>
<script>
// 使用vue就要创建，vue实例
new Vue({
el:'#app',
data:{
param:'hello world!',
image1:'https://s1.ax1x.com/2022/05/30/X14MLV.jpg',
username:'张三',
}
});
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE2-----REVIEW</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.数据渲染-->
<h1>{{param}}</h1>
<!-- 2.单项绑定属性 v-bind，简写：-->
<a :href="image1">去你的，这是一个图片链接！点我就跳转，试试吧...</a>
<!-- 3.数据双向绑定 v-model:value=""，简写v-model=""-->
<!-- 4.v-model绑定表单元素，会忽略表单元素的value,checked,selected属性的值-->
<br><br><br>
<label>
<input type="text" placeholder="请输入你的姓名" v-model:value="username"/>
</label>
<h2>{{username}}</h2>
<!-- 5.事件绑定 v-on:click="fun"，简写@click="fun"-->
<button @click="show('hello',$event)">点击我吧！这里没有禁止</button>
<br><br><br>
<button @click="show1('hello world !')">你好世界！</button>
</div>
</body>
<script>
//使用vue另一种创建实例对象
const vm=new Vue({
data:function () {
return{
param:'hello world!',
image1:'https://s1.ax1x.com/2022/05/30/X14MLV.jpg',
username:'张三',
}
},
methods:{
show:function (param,event) {
console.log(param);
},
show1(param){
alert(param);
}
}
});
vm.$mount("#app");
</script>
</html>5. MVVM模型
M：model，对应data中的数据 V: view，视图，Dom模板 VM: Vue实例对象，因此以后我们使用vm来拿vue实例对象
6. 事件
6.1 事件处理
1.点击事件 v-on:click="fun",vue中配置methods，v-on简写@ 2.envent拿到事件发生的标签及标签中的值、属性等等 3.vue中的函数，this表示Vue实例，但不能使用箭头函数 4.方法也可放在data中，虽然不报错，性能有所下降 5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<button v-on:click="info">点击提示</button>
<!-- 传参show('参数'),但event被你丢掉了-->
<button @click="show('参数')">点击弹窗</button>
<button @click="show1('参数',$event)">点击弹窗</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
},
methods:{
info(e){
console.log(e.target.innerText);
console.log(this);
alert("hello");
},
show(num){
console.log(num);
alert("word")
},
show1(num,e){
console.log(e);
}
}
})
</script>
</body>
</html>6.2 事件修饰符
Vue中的事件修饰符: 1.prevent:阻止默认事件（常用）; 2.stop:阻止事件冒泡（常用）; 3.once:事件只触发一次（常用）; 4.capture:使用事件的插获模式; 5.self:只有event.target是当前操作的元素时才触发事件; 6.passive:事件的默认行为立即执行,无需等待事件回调执行完中;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
<style>
.u{
height: 200px;
width: 200px;
background-color: aqua;
overflow:auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<!-- 使用prevent阻止的事件的默认行为 @click.prevent-->
<a href="https://s1.ax1x.com/2022/05/30/X14MLV.jpg" v-on:click.prevent="showinfo">图片</a>
<br/>
<!-- 冒泡事件是从里向外，捕获事件是从外向内，使用stop阻止冒泡 -->
<div class="a1" v-on:click="show1" style="background-color: red; padding-top: 20px;">
<button v-on:click.stop="show1">点击提示</button>
</div>
<br/>
<!-- once仅此一次 -->
<button v-on:click.once="show1">仅此一次</button>
<br/>
<!-- 事件是先捕获再冒泡，capture在捕获时就开始加载-->
<div class="a1" v-on:click.capture="show2(1)" style="background-color: red; padding-top: 20px;">
<button v-on:click.stop="show2(2)">点击提示</button>
</div>
<br/>
<!-- slelf只有自己操作时才触发 -->
<!-- 以此为例 -->
<div class="a1" v-on:click="show" style="background-color: red; padding-top: 20px;">
<button v-on:click="show">点击提示</button>
</div>
<br/>
<div class="a1" v-on:click.self="show3" style="background-color: red; padding-top: 20px;">
<button v-on:click="show3">点击提示</button>
</div>
<!-- passive:事件的默认行为立即执行,无需等待事件回调执行完中; -->
<!-- 滚动事件：1、scroll(鼠标滚动条) 2、wheel(鼠标滚轮) -->
<ul class="u" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
name:'hello',
},
methods:{
showinfo(e){
alert("hello");
},
show(e){
console.log(e.target);
},
show1(){
alert("a1");
},
show2(num){
console.log(num);
},
show3(e){
console.log(e.target);
},
demo(e){
console.log(@);
}
}
})
</script>
</body>
</html>7. 计算属性computed
计算属性: 1.定义:要用的属性不存在,要通过已有属性计算得来。 2.原理:底层借助了objcet.defineproperty方法提供的getter和setter. 3.get函数什么时候执行? (1).初次读取时会执行一次- (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比，内部有缓存机制（复用)﹐效率更高，调试方便。5.备注: 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
性：<input type="text" v-model:value="firstName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName}}</span>
<!-- 方法实现 全名：<span>{{fullName()}}</span> -->
<!-- 插值实现 全名：<span>{{firstName + '-' +lastName}}</span> -->
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
computed:{
fullName:{
get(){
return this.firstName+'-'+this.lastName;
},
set(value){
const arr=value.split("-");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
}
// methods:{
// fullName(){
// return this.firstName+'-'+this.lastName;
// },
// }
})
</script>
</body>
</html>如果计算属性只读不改就可以使用简写格式。
fullName(){return xxxx} ---->实际是执行的get方法，不是fullName函数。
8. 监听属性
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
watch的使用方法：
1、watch:{ ishat:{ handler(){ }}}
2、handler什么时候调用？当isHost发生改变时。
3、immediate：true 初始化时让handler调用一下
4、handler有两个参数，newValue,oldValue
5、监视vm.$watch('isHost',{})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h1>今天天气是{{info}}</h1>
<button v-on:click="changes">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
isHost:true,
},
computed:{
info:{
get(){
return this.isHost?'炎热':'凉快';
}
}
/*
只读，可改写为info(){return this.isHost?'炎热':'凉快';}
*/
},
methods:{
changes(){
this.isHost=!this.isHost;
}
},
// watch:{ //监视
// isHost:{ //isHoat被监视
// immediate:true, //初始化就调用handler
// handler(newValue,oldValue){
// console.log(newValue,oldValue);
// }
// }
// }
})
vm.$watch('isHost',{
immediate:true, //初始化就调用handler
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
})
</script>
</body>
</html>9. 样式绑定
绑定样式:
1.class样式
法:class="xxx"XxX可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定。但不确定用不用。
2. style样式
: style=""{fontsize: xxx)其中xxx是动态值
: style=""[a,b]”其中a、b是样式对象
<!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">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
<style>
.base{
height: 200px;
width: 200px;
border: 1px solid black;
}
.sty1{
background-color:chartreuse;
}
.sty2{
background-color: aqua;
}
.arr1{
font-size: 40px;
}
.arr2{
border: 8px solid rebeccapurple;
}
.arr3{
color: cyan;
}
</style>
</head>
<body>
<div id="root">
<!-- <div class="base" v-bind:class="a" v-on:click="changes">你好！年轻人</div> -->
<!-- <div class="base" v-bind:class="['arr1','sty2']">你好！年轻人</div> -->
<!-- <div class="base" v-bind:class="a" v-on:click="changes">你好！年轻人</div> -->
<!-- <div class="base" v-bind:class="objectClass">你好！年轻人</div> -->
<!-- <div class="base" v-bind:style="{fontSize: 40+'px'}">你好！年轻人</div> -->
<!-- <div class="base" v-bind:style="obj">你好！年轻人</div> -->
<div class="base" v-bind:style="{fontSize:40+'px',backgroundColor:'aqua'}">你好！年轻人</div>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
a:'sty1',
objectClass:{
sty1:'true',
arr1:'true',
},
obj:{
fontSize:'40px',
color:'red',
backgroundColor:'aqua',
}
},
// methods:{
// changes(){
// this.a='sty2';
// }
// }
// methods:{
// changes(){
// const arr=['sty1','sty2'];
// const index=Math.floor(Math.random()*2);
// this.a=arr[index];
// console.log(index);
// }
// }
})
</script>
</body>
</html>10. 列表/条件渲染
条件渲染
条件演染: 1.v-if 写法: (1).v-if="表达式" (2).v-else-if=”表达式” (3).v-else="表达式”适用于:切换频率较低的场景- 特点:不展示的DOM元素直接被移除。 注意: v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打晰”。 2.v-show 写法:v-show=表达式”，相当于display属性 适用于:切换频率较高的场景- 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉 3.备注:使用v-if的时，元素可能无法获取到,而使用v-show一定可以获取到。 4.template使用模板，只能用v-if使用
<!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">
<title>条件渲染</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<div v-show="n===1" v-bind:style="{height:'200px',width:'200px',backgroundColor:'red'}">你好！年轻人</div>
<div v-if="n===1" v-bind:style="{height:'200px',width:'200px',backgroundColor:'aqua'}">你好！箱底们</div>
<div v-else-if="n===3" v-bind:style="{height:'200px',width:'200px',backgroundColor:'black'}">你好!老朋友们</div>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
n:1,
},
})
</script>
</body>
</html>列表渲染
1.用于展示列表数据 2.语法:v-for="(item,index) in xxx" : key="yyy" 3,可逾历:数组、对象、字符非（用的很少)、指定次数（用的很少) key可以为某个字段属性，也可以为下标。但作为使用index下标要注意是否会逆向删除，因为会有index报错。 index这个问题不仅是vue中会有，基本上开发语言上都会遇见。java也一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="../vue.js"></script>
</head>
<body>
<ul id="root">
<!-- <h1>遍历数组</h1> -->
<!-- <li v-for="p in person" :key="p.id">
{{p.name}}-{{p.age}}
</li> -->
<!-- 上面是p.id 下面是下标 -->
<!-- in && of都可以 -->
<!-- <li v-for="(p,index) of person" :key="index">
{{p.name}}-{{p.age}}-{{index}}
</li> -->
<!-- <h1>遍历数组</h1>
<li v-for="(value,key) in obj" :key="key">
{{value}}---{{key}}
</li> -->
<!-- <h1>遍历字符串</h1>
<li v-for="(char,key) in 'hello' " :key="key">
{{char}}---{{key}}
</li> -->
<h1>遍历指定次数</h1>
<li v-for="(num,key) in 5" :key="key">
{{num}}---{{key}}
</li>
</ul>
<script type="text/javascript">
Vue.config.productionTip = false
const vm=new Vue({
el:'#root',
data:{
person:[
{id:1,name:'张三',age:12},
{id:2,name:'张二',age:11},
{id:3,name:'张一',age:10}
],
obj:{
name:'nini',
age:90,
sex:'man',
}
}
})
</script>
</body>
</html>11. 收集表单数据
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 收集表单数据: 若:<input type="text""/>，则v-model收集的是value值，用户输入的就是value值。若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。若:<input type="checkbox""/> 1.没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值) 2.配置input的value届性: (1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值) (2)v-model的初始值是数组,那么收集的的就是value组l成的数组 备注: v-model的三个修饰符: lazy:失去焦点再收集数据 number:输入字符串转为有效的数字trim:输入首尾空格过滤 vue中v-model.number，就是输入的转化为数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="test">
<label class="" for="username">用户:</label>
<input type="text" id="username" v-model:value="username">
<br> <br>
<label for="password">密码:</label>
<input type="password" id="password" v-model:value="password">
<br> <br>
<label class="" for="sex">性别:</label>
男 <input type="radio" name="sex" value="male" v-model:value="sex">
女 <input type="radio" name="sex" value="female" v-model:value="sex">
<br> <br>
<label for="hobby">爱好:</label>
学习<input type="checkbox" v-model:value="hobby" value="study">
跑步<input type="checkbox" v-model:value="hobby" value="跑步">
打游戏<input type="checkbox" v-model:value="hobby" value="打游戏">
<br> <br>
<label class="" for="school">所属校区</label>
<select v-model:value="school">
<option value="">请选择校区</option>
<option value="1号校区">1号校区</option>
<option value="2号校区">2号校区</option>
</select>
<br> <br>
<label class="" for="">其他信息</label>
<textarea name="" id="" cols="30" rows="10" v-model="other"></textarea>
<br> <br>
<input type="checkbox" v-model="agree">阅读并接受<a href="#">《用户协议》</a>
<br> <br>
<input type="submit">
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
username:'',
password:'',
sex:'female',
hobby:[],
school:'',
other:'',
agree:'',
},
methods:{
test(){
alert("数据！");
console.log(JSON.stringify(this._data));
}
}
})
</script>
</body>
</html>12. 过滤器filter
过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法:
1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{0)
2.使用过滤器: {{ xoxx|过滤器名}或v-bind:属性= “xxx|过滤器名"备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据,是产生新的对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
<!-- 引入dayjs文件 -->
<script type="text/javascript" src="../dayjs.min.js"></script>
</head>
<body>
<div id="app">
<h1>时间戳：{{Date.now()}}</h1>
<h1>现在时间：{{TimeStamp | timeFormat('YYYY-MM-DD HH:mm:ss')}}</h1>
<!-- 使用filter来转换 -->
<h1>现在时间：{{TimeStamp | timeFormat('YYYY年MM月DD日') | myslice()}}</h1>
<h1>拆分：{{'hello word!' | my()}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
Vue.filter('my',function(value){
return value.slice(0,3);
})
new Vue({
el:'#app',
data:{
TimeStamp:1654178910982,
},
filters:{
timeFormat(value,str){
return dayjs(value).format(str);
},
myslice(value){
return value.slice(0,4);
}
}
// computed:{
// time:{
// get(){
// return dayjs(this.TimeStamp).format('YYYY-MM-DD HH:mm:ss');
// },
// }
// }
// methods:{
// time(){
// return dayjs(this.TimeStamp).format('YYYY-MM-DD HH:mm:ss');
// }
// }
})
</script>
</body>
</html>13. 指令
我们学过的指令:
v-bind:单向绑定解析表达式,可简写为:xXXv-model :双向数据绑定
v-for
:遍历数组/对象/字符串
v-on
:绑定事件监听,可简写为9
v-if
:条件演染（动态控制节点是否存存在)
v-else:条件演染(动态控制节点是否存存在)v-show:条件演染(动态控制节点是否展示)
v-text指令:
1.作用:向其所在的节点中演染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容，{ixx)}则不会。
1.作用:向指定节点中演染包含html结构的内容。2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{{xx}则不会
(2).v-html可以识别html结构。
3.严重注意: v-html有安全性问题!!!!
(1).在网活上动态演染任意HTML是非常危险的,容易导致XSS攻击。
(2)．一定要在可信的内容上使用v-html。永不要用在用户提交的内容上!
v-cloak指令(没有鄙:
1.本质是一个特属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}的问题。
v-once指令:
1.v-once所在节点在初次动态渲染后,就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令
需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点-
1、directives:{
xxxxx自定义属性，
big:{} && big:function(a,b){console.log(a,b)}---->element,binding是a,b的对应
}
2、指令所在模板会重新解析
3、元素(标签)获取焦点---->element.focus()
4、对象写法中的函数：
绑定时bind(element,binding)
插入页面时inserted(element,binding)
重新解析update(element,binding)
5、自定义指令命名方法为多个单词下划线。注意我们在vue中命名一般u最好加单引号
6、vue.directive("xxxx",{})全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数式</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="element">
<h1>当前n值为:{{n}}</h1>
<h1>放大10倍n值为:<span v-big="n"></span></h1>
<button @click="n++">点击我n+1</button>
<br><br>
<input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#element',
data:{
n:1,
},
directives:{
big(element,binding){
console.log(element);
console.log(binding);
element.innerText=binding.value * 10;
},
fbind:{
bind(element,binding){
element.value=binding.value;
},
inserted(element,binding){
element.focus();
},
update(element,binding){
element.value=binding.value;
element.focus();
}
}
}
})
</script>
</body>
</html>14. 生命周期函数(了解)
beforecreate-->created-->beforemount-->mounted-->beforeupdate-->update-->beforedestroy-->destroy 常用的生命周期钩子: 1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】. 关于销毁Vue实例Ⅰ 1.销毁后借助vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效,但原生DOW事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
15. 组件
vue中使用组件的三大步骤:
一、如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options儿乎一样，但也有点区别;区别如下:
1.el不要写，为什么?—最终所有的组件都要经过一个vm的管理，tvm中的el决定服务哪个容器。2.data必须写成函数，为什么?——避免组件被复用时，数据存在引用关系。
备注:使用template可以配置组件结构。
二、如何注册组件?
1.局部注册:靠new Vue的时候传入components选项2.全局注册: tvue.component("组件名",组件)
英上
三、编写组件标签:
<school></school>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 组件就是结构+数据+样式 -->
<my-school></my-school>
<student></student>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
// Vue.component('组件名','组件'); 全局注册
//创建一个school组件
const school=Vue.extend({
name:'huhu',//定义vue控制台上那个组件名 这个可写可不写，不写会找注册时那个名字
template:`<div><h1>{{schoolName}}</h1></div>`,
data(){
return {
schoolName:'1111',
address:'2222',
}
}
})
const student=Vue.extend({
template:`<div><h1>{{studentName}}</h1></div>`,
data(){
return {
studentName:'3333',
age:'22',
}
}
})
new Vue({
el:'#root',
//局部注册
components:{
'my-school':school,
student:student,
}
})
</script>
</body>
</html>组件嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<tree></tree>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在启动时生成生产提示。
const liTree=Vue.extend({
template:'<div><h1>{{name}}</h1></div>',
data(){
return {
name:'小树',
}
}
})
const tree=Vue.extend({
template:`<div><h1>{{name}}</h1>
<liTree></liTree></div>`,
data(){
return {
name:'大树',
}
},
components:{
liTree,
}
})
//定义app组件，来管理所有组件
const app=Vue.extend({
})
new Vue({
el:'#root',
components:{
tree,
}
})
</script>
</body>
</html>16. Vue脚手架（了解）
单文件组件需要在脚手架中使用
创建Vue脚手架
1.npm config set registry https://registry.npm.taobao.org设置淘宝镜像 2.全局安装 npm install -g @vue/cli 3.切换到你要创建vue项目的目录 vue create 项目名 4.启动项目 npm run serve
-
脚手架项目结构
脚手架简单练习
// School.vue
<template>
<!-- html结构 -->
<div id="ro">
<h1>{{name}}</h1><br>
<button @click="tim">点击提示</button>
</div>
</template>
<script>
// js
// 暴露js 1、export分布暴露 2、export {对象}统一暴露 3、export default xxx\
// 1、2、import {???} from ??? 3、import ??? from ???
export default{
name:'School',
data(){
return {
name:'张三',
}
},
methods: {
tim(){
alert('hello word !');
}
},
}
//export default Vue.extend() //Vue.extends可以省略
</script>
<style>
/* css */
#ro{
background-color: aqua;
}
</style>// App.vue
<template>
<div>
<img alt="Vue logo" src="./assets/logo.png">
<School></School>
</div>
</template>
<script>
import School from './components/School'
export default {
name: 'App',
components: {
School,
}
}
</script>
<style>
</style>
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// el:'#app',
render: h => h(App),
}).$mount('#app')
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
