目录
一次提交：不管点多少次，默认只算第一次，所以就等于图中接收消息，而不是输入框的值
1.样式绑定
- class绑定
使用方式：v-bind:，expression的类型：字符串、数组、对象 - style绑定
v-bind:style="expression"， expression的类型：字符串、数组、对象
示例：
<--定义示例样式-->
<style>
.fontClass {
font-size: 40px;
}
.colorClass {
color: red;
}
</style>
<!--使用-->
<p>
<span v-bind:class="fc">fafa</span>
</p>
<p>
<!--简写-->
<span :class="ac">fafa</span>
</p>
<p>
<!--直接使用style样式单-->
<span style="font-size: 40px; color:blue;">aaa</span>
<br/>
<!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔-->
<span :style="{fontSize:fontSize+'px',color: color}">bbb</span>
<br/>
<!--推荐使用-->
<span :style="myStyle">test</span>
</p>
var vm = new Vue({
el: "#app",
data: {
fc: 'fontClass',
ac: ['fontClass', 'colorClass'],
fontSize: 40,
color: 'green',
//样式对象，注意：样式名使用驼峰命名，如：fontSize
myStyle: {
fontSize: '50px',
color:'red',
fontWeight: 'bold'
}
}
});
注意：再修改时，修改双引号之内的值
2. 事件修饰符
几个常用的事件修饰符：
- <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form> - <!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a> - <!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a> - <!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> - <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
示例：
<div>接收消息：{{receverMsg}}</div>
<p>
<!--响应多次或一次点击事件-->
<input type="text" v-model="sendMsg">
<button @click="sender">发送(多次)</button>
<button @click.once="sender">发送(一次)</button>
</p>
<p>
<!-- 阻止表单提交 -->
<form action="testAction.action" method="post" @submit.prevent="doSubmit()">
<label>名称</label>
<input type="text" name="name"/>
<input type="submit" value="提交"/>
</form>
</p>
var vm = new Vue({
el: "#app",
data: {
receverMsg: null,
sendMsg: null
},
methods: {
sender: function() {
this.receverMsg = this.sendMsg;
},
doSubmit: function() {
alert('ok');
}
}
});
2.1运行一次或者多次提交：
多次提交：每一次提交都会更新一次
第一次提交：
第二次提交：
一次提交：不管点多少次，默认只算第一次，所以就等于图中接收消息，而不是输入框的值
2.2事件冒泡示例
例子：
浏览器运行：
运行结果：
左边三个泡泡是捕获，也就是从上往下捕获，纸质捕获到触发事件的事件源，然后就开始运行，所以3-》2-》1顺序提示
注意：如果左边加上一个图中选择代码：阻止事件冒泡：
3. 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符。
示例：
注意：用enter代替13，用户也看得懂
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 利用下面的写法有同样的效果 -->
<input v-on:keyup.enter="submit">
| 按键别名 | 含义 |
|---|---|
| .enter | 回车确认键 |
| .tab | TAB键 |
| .delete | 捕获 "删除" 和 "退格" 键 |
| .esc | 键盘左上角的Esc键，取消键 |
| .space | 空格键 |
| .up | 上 |
| .down | 下 |
| .left | 左 |
| .right | 右 |
| .ctrl | ctrl键 |
| .shift | shift键 |
示例：响应enter键事件
<input type="text" @keyup.13="doSubmit" v-model="name">
var vm = new Vue({
el: "#app",
data: function() {
return {
name: 'hello vue'
}
},
methods: {
doSubmit: function() {
alert("响应enter，" + this.name);
}
}
});
4. 常用控件
4.1 常用控件示例
通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表
<div id="app">
<div>
<label>账号：</label>
<input type="text" v-model="uname">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="upwd">
</div>
<div>
<label>年龄：</label>
<input type="text" v-model="age" >
</div>
<div>
<label>性别：</label>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="2">女
</div>
<div>
<label>爱好：</label>
<div style="display: inline;" v-for="h in hobbies">
<input type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}
</div>
</div>
<div>
<label>地区</label>
<select v-model="selectedCity">
<option value="">-- 请选择 --</option>
<option v-for="c in city" :value="c.id">{{c.name}}</option>
</select>
</div>
<div>
<label>备注：</label>
<textarea v-model="remark"></textarea>
</div>
<div>
<input type="checkbox" v-model="flag">是否已阅读并同意协议
</div>
<div>
<button @click="submit" :disabled="disabled">提交</button>
</div>
</div>
var vm = new Vue({
el: "#app",
data: {
uname: '',
upwd:'',
age:'',
sex: 1,
//用于通过v-for指令输出多选框列表
hobbies:[
{id: '1', name:'打游戏'},
{id: '2', name:'编程'},
{id: '3', name:'旅游'}
],
/*
* 用于通过v-model双向绑定,保存用户的选择。
* 此处为多选，需要通过数组接收，否则无法
* 正常接收复选框的值，且复选框的行为也不正常，
* 可能出现要么全部被选择，要么全部被取消的情况
*/
hobby:[],
remark: null,
//用于生成地区选择列表
city:[
{id:"1", name:"长沙"},
{id:"1", name:"株洲"},
{id:"1", name:"湘潭"}
],
//用于保存用户选择的地区
selectedCity: '',
//是否同意协议,默认值为false
agreed:false,
//提交按钮是否禁用,默认为true
disabled: true
},
//监控agreed属性,如果同意协议则将提交按钮
//设置为可用,否则提交按钮为禁用状态
watch: {
agreed: function(val) {
if(val) {
this.disabled = false;
}else{
this.disabled = true;
}
}
},
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age:this.age,
sex: this.sex,
hobby: this.hobby,
city: this.selectedCity,
remark: this.remark
}
console.log(data);
}
}
});
不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改
<button @click="submit" :disabled="!agreed">提交</button>
4.2 修饰符
| 修饰符 | 作用 |
|---|---|
| .lazy | 默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步 |
| .number | 将用户的输入值转为 Number 类型 |
| .trim | 自动过滤用户输入的首尾空格 |
以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型
<div>
<label>年龄：</label>
<input type="text" v-model.number="age" >
</div>示例一不加.number的情况（字符串型）：
运行结果：
如果我在输入框输入2，那么控制台就会像是一个带双引号的值，这就是字符串的
然后我又输入了一个值22，
然后点击+就会在后面继续拼接一个22
示例二加.number的情况：
方法一：
给this .age后面加*1即可转换为数字型
运行结果：
方法二：
直接加.number
trim修饰符：
示例：
运行结果：
只能去首位两边的空格，中间不可去掉
5. 自定义指令
Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种
钩子函数：
| 名称 | 作用 |
|---|---|
| bind | 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 |
| inserted | 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) |
| update | 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下) |
| componentUpdated | 指令所在组件的 VNode 及其子 VNode 全部更新后调用 |
| unbind | 只调用一次，指令与元素解绑时调用 |
指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性：
1） name：指令名，不包括 v- 前缀。
2） value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
3） oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4） expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
5） arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
6） modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 - vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5.2 全局
<div id="app">
<!--red绑定到data里面的变量-->
<p v-color="red">我是自定义指令</p>
</div>
//自定义标签,全局
Vue.directive('color', {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
red:'red'
}
});6. vue组件（重点）
6.1 组件介绍
- 组件(Component)是Vue最强大的功能之一，
- 组件可以扩展HTML元素，封装可重用的代码
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
- 组件可以分为全局组件和局部组件
组件命名规则
- 短横线命名，如: my-component，vue推荐使用这种方式的命名规则
- 首字母大写命名规则，如：MyComponent
props
- props是父组件用来传递数据的一个自定义属性。
- 父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
6.2 局部组件
定义语法：new Vue({el:'#d1',components:{组件名：{配置选项}}})
<div id="app">
<div>
<!--title是用来传值的自定义属性，在自定义组件的props中定义 -->
<button-counter title="测试"/>
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '<button @click="doClick">{{title}}：局部组件，点击计数器:{{count}}</button>',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明
//的vue实例.
this.count++;
}
}
}
}
});
注：为什么在自定义组件中必须使用函数方式来什么data？
每个自定义组件使用函数方式来声明data，这样每个实例可以维护一份被返回对象的独立的拷贝，在定义自定义组件时，一定要注意这一点。
6.3 全局组件
将上面的局部组件修改为全局组件。
全局组件定义语法：Vue.component(组件名, 配置选项)
<div id="app">
<div>
<button-counter title="测试"/>
</div>
</div>
//全局组件
Vue.component('button-counter', {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明
//的vue实例.
this.count++;
}
}
});
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
}
});7. 自定义事件
Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
- 父Vue实例->子Vue实例，通过prop传递数据
- 子Vue实例->父Vue实例，通过事件传递数据
7.1 子 -> 父
触发事件：$emit(eventName, 参数...)
注意：事件名必须用短横线命名方式。
<div id="app">
<!--子组件到父组件-->
<div>
<button-counter v-on:click-test="clickTest"/>
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//对于自定义的button-counter组件, Vue实例为父组件
//在父组件中定义一个test方法,子组件调用该方法
methods: {
clickTest: function(msg) {
console.log("test: "+ msg);
}
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
props:['title'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '<button @click="doClick">{{title}}：局部组件，计数:{{count}}</button>',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
//注意事件名使用短横线命名方式
this.$emit("click-test","hello vue");
}
}
}
}
});
7.2 父 -> 子
注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！！
<div id="app">
<!--子组件到父组件-->
<div>
<!-- 注意此处将定义props时的驼峰命名法，变为了短横线命名法 !!! -->
<button-counter title-desc="测试" />
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
ts: new Date().getTime()
},
//对于自定义的button-counter组件, Vue实例为父组件
//在父组件中定义一个test方法,子组件调用该方法
methods: {
clickTest: function(msg) {
console.log("test: "+ msg);
}
},
//局部自定义组件
components: {
//组件名: {配置项}
'button-counter': {
//用来传值的自定义属性
//注意此处使用驼峰命名法 !!!
props:['titleDesc'],
//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
template: '<button @click="doClick">{{titleDesc}}：局部组件，计数:{{count}}</button>',
//注意：在自定义的组件中需要使用函数来定义data
data: function() {
return {
count: 0
}
},
//定义响应事件函数
methods: {
doClick: function() {
//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
//注意事件名使用短横线命名方式
this.count ++;
console.log(this.titleDesc);
}
}
}
}
});如果需要自定义多个事件，只需要在后面加即可
然后在method方法中间加即可
8.全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
<style>
.fontClass {
font-size: 40px;
}
.colorClass {
color: red;
}
</style>
</head>
<div id="app">
<p>
<span v-bind:class="fc">fafa</span>
</p>
<p>
<span v-bind:class="ac">fafafafa</span>
</p>
<p>
<span style="font-size: 2.5rem;color: blue;">adada</span>
<br />
<!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔-->
<span :style="{fontSize:fontSize+'px',color: color}">bbb</span>
</p>
<br />
<span :style="myStyle">test</span>
<p>
<!-- 如果 @submit方法后面不调用.prevent方法，那么浏览器就会执行默认提交一次行为，也就是直接提交到另外一个页面 -->
<form action="testAction.action" method="post" @submit.prevent="doSubmit()">
<label>名称</label>
<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
</p>
<p>
<div>接收消息：{{receverMsg}}</div>
<p>
<!--响应多次或一次点击事件-->
<input type="text" v-model="sendMsg">
<button @click="sender">发送(多次)</button>
<button @click.once="sender">发送(一次)</button>
</p>
</p>
<p>
<input type="text" @keyup.13="doSubmit" v-model="name">
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
fc: 'colorClass',
ac: ['fontClass', 'colorClass'],
fontSize: 40,
color: 'blue',
myStyle: {
fontSize: '50px',
color: 'red',
fontWeight: 'bold'
},
sendMsg: "",
receverMsg: "",
name:'zs'
}
},
methods: {
doSubmit() {
alert("提交成功"+this.name);
},
sender() {
this.receverMsg = this.sendMsg;
}
}
})
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div>
<label>账号：</label>
<input type="text" v-model="uname">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="upwd">
</div>
<div>
<label>年龄：</label>
<input type="text" v-model="age" >
</div>
<div>
<label>性别：</label>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="2">女
</div>
<div>
<label>爱好：</label>
<template style="display: inline;" v-for="h in hobbies">
<input type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}
</template>
</div>
<div>
<label>地区</label>
<select v-model="selectedCity">
<option value="">-- 请选择 --</option>
<option v-for="c in city" :value="c.id">{{c.name}}</option>
</select>
</div>
<div>
<label>备注：</label>
<textarea v-model="remark"></textarea>
</div>
<div>
<input type="checkbox" v-model="flag">是否已阅读并同意协议
</div>
<div>
<button :disabled="!flag">提交</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
uname: '',
upwd: '',
age: '',
sex: 2,
hobbies:[
{id: '1', name:'打游戏'},
{id: '2', name:'编程'},
{id: '3', name:'旅游'}
],
hobby: [],
city:[
{id:"1", name:"长沙"},
{id:"1", name:"株洲"},
{id:"1", name:"湘潭"}
],
selectedCity: '',
remark: "",
flag: false,
disabled:true
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<!--red绑定到data里面的变量-->
<p v-color="red">我是自定义指令</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
red:'red'
},
//自定义指令，局部
directives:{
color: {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<!--red绑定到data里面的变量-->
<p v-color="red">我是自定义指令</p>
</div>
<script>
//自定义标签,全局
Vue.directive('color', {
inserted: function(el,binding) {
console.log(el,binding);
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
red:'red'
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div>
<!--title是用来传值的自定义属性，在自定义组件的props中定义 -->
<button-counter v-on:click-test="test" title="测试"/>
</div>
</div>
<script>
Vue.component("button-counter", {
props:['title'],
template: '<button @click="doClick">{{title}}：局部组件，点击计数器:{{count}}</button>',
data() {
return {
count:0
}
},
methods:{
doClick() {
this.$emit("click-test", "hello", "vue");
}
}
});
var vm = new Vue({
el: '#app',
data() {
return {
}
},
methods:{
test(param1,param2) {
alert(param1);
alert(param2);
}
}
})
</script>
</body>
</html>
如果需要自定义多个事件，只需要在后面加即可
然后在method方法中间加即可
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
