一、事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>event</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div>
{{title}}
</div>
<div @click ='title = "abc"'>
<div>
<!-- $event获取按钮点击 -->
<!-- <button @click.stop = "handleClick('x',$event)">click</button> -->
<!-- stop 冒泡 -->
<button @click.stop = "title = 'world' ">click</button>
<!-- prevent 阻止默认的点击 -->
<a @click.prevent = 'handleClick' href="http://www.baidu.com">test</a>
</div>
</div>
<!-- self -->
<!-- @click事件放在最外层，点击上面的层也能触发 .self (就能只触发自己的) -->
<div style="width :100px; height :100px; background:red">
<div @click = 'handleClick2' style="width: 50px; height: 50px; background-color: green;">
map
</div>
<div>
<button v-on:click.alt = 'onClick'>A</button>
</div>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
title:'event'
},
methods:{
handleClick(res,e){
console.log(e)
},
handleClick2(){
console.log(1111)
},
onclick(){
console.log(100)
}
},
});
</script>
</body>
</html>
二、表单绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-model='textValue'>
<textarea name="" id="" cols="30" rows="10" v-model = 'mulTextValue'></textarea>
<div>
<input type="checkbox" v-model='mulCheckboxValue' value ='a'>
<input type="checkbox" v-model='mulCheckboxValue' value ='b'>
<input type="checkbox" v-model='mulCheckboxValue' value ='c'>
{{mulCheckboxValue}}
</div>
<div>
<input type="radio" v-model='radioValue' value="a">
<input type="radio" v-model='radioValue' value="b">
<input type="radio" v-model='radioValue' value="c">
{{radioValue}}
</div>
<div>
<!-- 加value的操作 -->
<!-- <select v-model = 'selectValue'>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select> -->
<!-- {{selectVale}} -->
<!-- 不加value的操作 -->
<!-- <select v-model = 'selectValue'>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
{{selectVale}} -->
<!-- 多选的 -->
<select multiple v-model = 'selectArr'>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
{{selectArr}}
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
textValue: 'abc',
mulTextValue:'def',
mulCheckboxValue:[],
radioValue:'',
selectValue:'北京',
selectArr:[]
},
methods:{
},
});
</script>
</body>
</html>
三、组件的注册、通信
1、组件的注册
局部注册和全局注册
1、全局注册一般用的较少，有三种方式。都是基于Vue.component方法来注册的,代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 注意:这种写法加载不出来,组件不能使用驼峰写法 -->
<myComponent></myComponent>
<!-- 想显示的话,使用以下方式可以显示 -->
<my-component></my-component>
<div id = 'myComponent'>
<span>我是子组件</span>
</div>
<div>
<span>我是背景</span>
</div>
</div>
<script>
Vue.component('myComponent',{
template:"#myComponent"
});
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
2、局部注册，父子组件之间注册，import导入子组件头文件，然后在父组件中引入头文件。同var vm = new Vue({})创建的实例中，用components:{ "子组件名":子组件文件名,}属性来定义，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<partcomponent></partcomponent>
<div id ='partcomponent' >
<h3>我是子组件</h3>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
"partcomponent":{
template :'#partcomponent'
}
}
});
</script>
</body>
</html>
2、组件的通信（值传递 以局部注册来演示）
1、父传子传值
首先在子组件中用自定义组件中使用 props 定义属性,然后在
template中把属性写在应该显示的地方。然后在父组件调用子
组件的地方，把属性填上，并且给予值(值可以是直接写死，
也可以通过data中的数据定义)。 代码如下
2、子给父传值
在子组件中,@click调用一个方法，然后在methods中，实现这个方
然后用this.$emit,触发一个方法，（方法必须全部小写，否则调用
不到），然后在父页面调用组件的里面@newclick，然后自定义一
个父类中可以调用的方法,即可在父页面，操作，取值等
子组件代码
const partcomponent = {
template:`
<li @click = 'handleClick'>{{ title }}</li> `,
props:["title"],
methods:{
handleClick(){
this.$emit('libtnclick',100)
}
}
}
export default partcomponent
父页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- @libtnclick 就是$emit创建链接的方法名,handleClick调用以下，能看到参数传过来了 -->
<partcomponent :title = "msg" @libtnclick = 'handleClick'></partcomponent>
</div>
<script type="module">
import partcomponent from './partcomponent.js';
var vm=new Vue({
el:'#app',
data:{
msg:'我是父组件传过来的数据'
},
methods:{
handleClick(res){
console.log(res)
}
},
components:{partcomponent}
});
</script>
</body>
</html>
四、插槽
这个没啥说的，就是在自定义组件中间插入内容的方法。 在自定义组件的template里，想在哪
加标签，就写个 <slot></slot>
4299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
