1、vue中方法的使用
vue的方法除了可以相互调用，还可以直接在插值表达式中调用。
<div id="app">
<!--使用插件表达式调用函数-->
<p>{{show()}}</p>
</div>
<script>
let vue=new Vue({
el:"#app",//挂载点
data(){
return {
}
} ,methods:{
//所有的函数都在此处创建
show(){
return "我是曹意，曹操是我的兄弟。";
}
}
});
</script>
vue的方法中如果需要使用形参，可以使用[]表示要将哪个形参给方法中的某个代码块使用
<div id="app">
<!--使用插件表达式调用函数-->
<p>{{show(0)}}</p>
</div>
<script>
let vue=new Vue({
el:"#app",//挂载点
data(){
return {
}
} ,methods:{
//所有的函数都在此处创建
show(id){
//根据id判断
const aa={
0:'我是曹意',
1:'我是曹操',
2:'我是曹冲'
}[id]; //将参数id的值，传递给aa使用
return aa;
}
}
});
</script>
2、this关键字
在vue的方法中要可以使用this关键字来调用已声明的方法，或data中的变量。
在方法中，this 指向该方法所属的组件。可以使用 this 访问 data 对象的属性和其它方法。
二、vue中的事件
1、事件
在vue中使用v-on指令为标签绑定事件
语法:
v-on:事件名="函数名"
示例：
<div id="app">
<button type="button" v-on:click="btnClick">我是按钮</button>
<a href="javascript:void(0)" v-on:click="btnClick">我是超链接</a>
<p>点击了:{{count}}次</p>
</div>
<script>
let vue=new Vue({
el:"#app",//挂载点
data(){
return {
count:0
}
} ,methods:{
/**
* 在事件中，事件绑定的方法有一个默认的参数
* event参数表示当前事件的对象
* event在绑定事件方法时不能有()否则报错
*/
btnClick(event){
//点击按钮次数+
if(event.target.tagName=="BUTTON"){
this.count++;
}
//点击超链接次数-
if(event.target.tagName=="A"){
this.count--;
}
this.count++;
}
}
});
</script>
<font color=red>提示：事件有一个简写方式：@事件名="方法名"</font>
<button type="button" @click="btnClick">我是按钮</button>
2、事件的修饰符
事件的修饰符是用来配置事件的默认行为
-
prevent【常用】
让超链接不执行href跳转，只执行事件
<a href="http://www.hao123.com" @click.prevent="acl">我是链接</a> -
stop【常用】
stop是用来阻止事件冒泡的。
<div id="dv1" @click.stop="d1">
DV1
<div id="dv2" @click.stop="d2">
DV2
<div id="dv3" @click.stop="d3">
DV3
</div>
</div>
</div> -
once
如果想要只在第一次触发事件的时候触发事件监听器，可以使用 .once 修饰符
<div id="dv1" @click.once="d1"> -
capture
如果想要使用捕获模式，可以使用 .capture 修饰符
捕获模式是指事件会在传递到当前元素的下级元素前先出发，这和冒泡模式的事件传播顺序时相反的
-
self
如果只想监听（父）元素本身而不是它的子元素上触发的事件，可以使用 .self 修饰符
3、键盘修饰符
除了上述事件修饰符，还有一些按键修饰符。它们用在键盘事件上，只有在特定按键按下时才会触发事件。
<div id="app" v-cloak>
<form v-on:keyup="btnDown">
<button type="button">我是按钮</button>
<input type="text" v-model="tx">
</form>
</div>
<script>
let vue=new Vue({
el:"#app",//挂载点
data(){
return {
tx:''
}
} ,methods:{
btnDown(event){
console.log(event.keyCode);
//回车键
if(event.keyCode==32){
alert("执行了按钮");
}
//esc键
if(event.keyCode==27){
this.tx='';
}
}
}
});
</script>
三、vue计算属性
计算属性实际上是一个方法，只要条件改变会自动执行计算，计算属性不能在data中声明
语法：
computed:{
areg(){ //计算属性
return this.wh*this.he;
}
}
计算属性可以被方法或插件表达式直接调用
<div id="app">
<p>
宽:<input type="text" v-model="wh">
高:<input type="text" v-model="he">
</p>
<p>结果是：{{areg}}</p>
</div>
<script type="text/javascript">
let vue=new Vue({
el:"#app",
data(){
return {
wh:0,
he:0
}
},computed:{
areg(){//计算属性
return this.wh*this.he;
}
}
})
</script>
四、监听器
监听器的作用和计算属性类似，监听器会监听指定的变量是否发生改变，如果发生改变自动执行预设的逻辑代码
-
基本写法
<div id="app">
<p>
宽:<input type="text" v-model="wh">
高:<input type="text" v-model="he">
</p>
</div>
<script type="text/javascript">
let vue=new Vue({
el:"#app",
data(){
return {
wh:0,
he:0
}
},watch:{
wh(){
alert("wh发生了改变");
},he(){
alert("he发生了改变");
}
}
})
</script> -
监听对象中指定的属性
<div id="app">
<p>
姓名:<input type="text" v-model="user.uname">
性别:<input type="text" v-model="user.sex">
</p>
</div>
<script type="text/javascript">
let vue=new Vue({
el:"#app",
data(){
return {
user:{
uname:'',
sex:''
}
}
},watch:{
'user.uname'(){
alert("uname发生了改变");
},'user.sex'(){
alert("sex发生了改变");
}
}
})
</script> -
深度监听（监听对象或数组中的每个元素）
<div id="app">
<p>
姓名:<input type="text" v-model="user.uname">
性别:<input type="text" v-model="user.sex">
</p>
</div>
<script type="text/javascript">
let vue=new Vue({
el:"#app",
data(){
return {
user:{
uname:'',
sex:''
}
}
},watch: {
user:{
handler(us){
alert(us.uname+" "+us.sex);
},deep:true //深度监听，相当于递归
}
}
})
</script> -
监听器参数
当监听器的属性发生变化时，监听器会传入两个参数：所监听属性的当前值
原来的旧值。
<div id="app">
<p>
姓名:<input type="text" v-model="user.uname">
性别:<input type="text" v-model="user.sex">
</p>
</div>
<script type="text/javascript">
let vue=new Vue({
el:"#app",
data(){
return {
user:{
uname:'',
sex:''
}
}
},watch:{
//参数一：改变后的值 参数二：改变前的值
'user.uname'(val,oldVal){
alert("改变前的值:"+oldVal+"\t"+"改变后的值:"+val);
}
}
})
</script>
五、过滤器
过滤器可以用来对显示数据的格式进行批量处理。
<font color=red>注意：过滤器『只可以』在插值表达式和 v-bind 指令中使用。通过管道符 | 调用过滤器</font>
<div id="app">
<p>单价一：{{price1 | pricceTxt}}</p>
<p>单价一：{{price2 | pricceTxt}}</p>
<p>单价一：{{price3 | pricceTxt}}</p>
</div>
<script type="text/javascript">
let vue = new Vue({
el: "#app",
data() {
return {
price1: 12345,
price2: 23456,
price3: 45678,
}
},filters:{//编写过滤器
pricceTxt(value){
return '￥'+(value/100).toFixed(2);
}
}
})
</script>
<font color=red>提示：过滤器方法默认会将管道符左边的参数传到方法中</font>
六、VUE组件
<font color=red>在vue项目中，一般都是单页面项目(一个项目中只有一个html页面)</font>
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
vue中的组件分两种：全局组件，局部组件
<font color=red>重要提示：</font>
1、全局组件
全局组件定义好了以后，可以给多个vue实例进行调用
语法：
<div id="app">
<a href="">登录</a>
<a href="">注册</a>
<!--调用组件 标签的名称要和定义的全局组件名称一致-->
<Login></Login>
</div>
<script>
//定义全局组件
/**
* 定义全局组件Login
* Login为组件的名称
*/
Vue.component("Login",{
/*组件中的模板，要显示的html内容*/
template: '<div><p>帐号：<input type="text">' +
'</p><p>密码:<input type="text"></p></div>'
})
//vue实例
let vue=new Vue({
el:"#app"
});
</script>
<font color=red>提示：在vue中组件的名称都会识别为小写，如果组件名称为小驼峰，在调用组件时，组件标签的名称要以-隔开且全小写如下写法：</font>
/**
* 定义全局注册组件
*/
Vue.component("regFrom",{
template: '<h1>我是注册组件</h1>'
})
<!--调用注册组件-->
<reg-from></reg-from>
-
注意事项:
组件与组件之间，组件与挂载点之间的数据是完全独立的不会相互影响
<div id="app">
<a href="">登录</a>
<a href="">注册</a>
<!--调用组件 标签的名称要和定义的全局组件名称一致-->
<Login></Login>
<!--调用注册组件-->
<reg-from></reg-from>
</div>
<script>
//定义全局组件
/**
* 定义全局组件Login
* Login为组件的名称
*/
Vue.component("Login",{
/*组件中的模板，要显示的html内容*/
template: '<div><p>帐号：<input type="text" v-model="account">' +
'</p><p>密码:<input type="text" v-model="password"></p></div>',
data(){
return {
account:'',
password:''
}
},methods:{
},created(){
}
})
Vue.component("regFrom",{
template: '<h1>我是注册组件</h1>'
})
//vue实例
let vue=new Vue({
el:"#app",
data(){
return {
}
}
});
</script>
上面编写模板的方式太麻烦，容易出错，可以使用template标签在html中定义好组件的模板，进行引用即可。
<font color=red>提示：template标签不能写在挂载点的里面，必须写在挂载点标签外面</font>
<div id="app">
<a href="">登录</a>
<a href="">注册</a>
<!--调用组件 标签的名称要和定义的全局组件名称一致-->
<Login></Login>
</div>
<!--编写登录组件的模板-->
<template id="lg">
<div>
<p>帐号：<input type="text" v-model="account">
<p>密码:<input type="text" v-model="password"></p>
<p>{{account}} {{password}}</p>
</div>
</template>
<script>
//定义全局组件
/**
* 定义全局组件Login
* Login为组件的名称
*/
Vue.component("Login",{
/*组件中的模板，要显示的html内容*/
template:'#lg',
data(){
return {
account:'',
password:''
}
},methods:{
},created(){
}
})
//vue实例
let vue=new Vue({
el:"#app",
data(){
return {
}
}
});
</script>
2、局部组件
-
写法一
<div id="app">
<a href="">登录</a>
<a href="">注册</a>
<!--调用组件-->
<login></login>
</div>
<!--编写登录组件的模板-->
<template id="lg">
<div>
<p>帐号：<input type="text" v-model="account">
<p>密码:<input type="text" v-model="password"></p>
<p>{{account}} {{password}}</p>
</div>
</template>
<script>
//vue实例
let vue=new Vue({
el:"#app",
data(){
return {
}
},components:{
//定义局部组件
'login':{
template: '#lg',
data() {
return {
account:'',
password:''
};
}
}
}
});
</script> -
写法二
-
<div id="app">
<a href="">登录</a>
<a href="">注册</a><!--调用组件-->
<login></login>
</div><!--编写登录组件的模板-->
<template id="lg">
<div>
<p>帐号：<input type="text" v-model="account">
<p>密码:<input type="text" v-model="password"></p><p>{{account}} {{password}}</p>
</div>
</template>
<script>
//定义局部组件
const login={
template: '#lg',
data() {
return {
account:'',
password:''
};
}
}//vue实例
let vue=new Vue({
el:"#app",
data(){
return {
}
},components:{
//注册局部组件
login
}
});
</script>
