1. イベント処理
イベント修飾子
Vue は、ドット (.)、.stop、.prevent、.capture、.self、.once で表される命令接尾辞を介して修飾子を呼び出します。
.stop: イベントのバブルアップを防ぎます。要素がイベントを起動し、その要素にネストされた親要素が含まれている場合、.stop修飾子を使用すると、イベントが祖先要素に渡されなくなります。
.prevent: デフォルトのイベントをブロックします。要素でイベントがトリガーされるときは、.prevent修飾子を使用して、ブラウザーがデフォルトのイベント動作を実行しないようにします。
.capture: イベントキャプチャモードを使用します。デフォルトでは、Vue のイベント リスナーはイベント バブリング モード、つまり子要素から親要素へのバブリングを通じて処理されます。ただし.capture、修飾子を使用すると、イベント リスナーをキャプチャ フェーズにバインドできます。つまり、親要素から子要素にキャプチャできます。
.self: 指定された要素自体でイベントが発生した場合にのみ発生します。要素に子要素が含まれており、同じイベント ハンドラーがバインドされている場合、.self修飾子を使用すると、要素自体がトリガーされたときにのみイベントがハンドラーを実行するようになります。
.once: イベントを 1 回だけトリガーします。モディファイアにバインドされたイベントがトリガーされると.once、ハンドラー関数が 1 回だけ実行されるように、リスナーは自動的にバインドを解除されます。
コードデモ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>事件处理</title>
<style type="text/css">
.one{
background-color: red;
height: 400px;
width: 400px;
} .two{
background-color: yellow;
height: 300px;
width: 300px;
} .three{
background-color: pink;
height: 200px;
width: 200px;
} .four{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="one" @click="fun1">
<div class="two" @click="fun2">
<div class="three" @click="fun3">
<div class="four" @click.stop="fun4"></div>
</div>
</div>
</div>
<input :value="msg"/>
<button @click="clickme">点我</button>
<form @submit.prevent="submitForm">
<button type="submit">提交</button>
</form>
<div @click.capture="parentClick">
<button @click="childClick">点击我</button>
</div>
<div @click.self="parentClick">
<button @click="childClick">点击我</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'你好'
};
},
methods:{
fun1(){
alert("fun1")
},fun2(){
alert("fun2")
},fun3(){
alert("fun3")
},fun4(){
alert("fun4")
},
clickme(){
console.log(this.msg)
},
submitForm() {
console.log("表单提交事件");
},
parentClick() {
console.log("父元素点击事件");
},
childClick() {
console.log("子元素点击事件");
}
}
})
</script>
</body>
</html>効果：
2. 帳票の総合事例
コード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>表单中和案例</title>
</head>
<body>
<div id='app'>
姓名：<input name="name" v-model="name"/><br />
密码：<input type="password" v-model="pwd"><br />
性别：<span v-for="s in sexList">
<input type="radio" name="sex" v-model="sex" :value="s.id" >{
{s.name}}
</span><br />
籍贯：<select name="myAddr" v-model="myAddr">
<option v-for="a in address" :value="a.id" >{
{a.name}}</option>
</select><br />
爱好：
<span v-for="h in hobby">
<input type="checkbox" name="myLikes" v-model="myLikes" :value="h.id" >{
{h.name}}
</span><br />
个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea>
<br />
同意：<input type="checkbox" v-model="ok" /><br />
<button v-show="ok" @click="dosub">提交</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
name:'小威',
pwd:'123665',
sexList:[
{name:'男',id:1},
{name:'女',id:2},
{name:'阴阳人',id:3} ],
sex:1,
hobby:[{name:'洗浴',id:1},
{name:'保健',id:2},
{name:'按摩',id:3},
{name:'spa',id:4}
],
myLikes:[],
address:[{name:'福建',id:1},
{name:'湖南',id:2},
{name:'湖北',id:3},
{name:'台湾',id:4}
],
myAddr:null,
sign:null,
ok:false
};
},
methods:{
dosub(){
var obj={};
obj.name=this.name;
obj.pwd=this.pwd;
obj.sex=this.sex;
obj.address=this.myAddr;
obj.love=this.myLikes;
obj.sign=this.sign;
console.log(obj)
}
}
})
</script>
</body>
</html>効果：
3. コンポーネント通信
1 コンポーネントの紹介と定義
Vue コンポーネントは Vue.js フレームワークの中核概念の 1 つであり、開発者はこれを使用してページを再利用可能な独立したモジュールに分割できます。コンポーネントには独自のテンプレート、スタイル、ロジックを含めることができるため、コードがよりモジュール化され、保守しやすく、再利用しやすくなります。
Vue 独自の命令 (v-on|v-model) に加えて、Vue ではカスタム命令の登録も可能です。カスタム命令は、スコープに応じてグローバル命令/ローカル命令に分けられます。
コンポーネントの定義: コンポーネントは、Vue.component() メソッドまたは Vue インスタンスのコンポーネント オプションを通じて定義できます。コンポーネントの定義には、その名前、テンプレート、データ、メソッドなどが含まれます。
ローカル定義
<script> new Vue({ el: '#xw', components: { "my-button": { template: "<button>自定义组件</button>" } } }) </script>
グローバル定義
Vue.component('my-button', { //用来传值的自定义属性 props:['title'], //模板,模板中写的html代码,在其中可以使用{ {}},及指令等vue元素 template: '<button @click="doClick">{ {title}}: 全局组件</button>', //注意：在自定义的组件中需要使用函数来定义data data: function() { return { xxx: 0 } })
Vue のカスタム イベントは、コンポーネント間の通信用に設計されています。Vue では、親コンポーネントは prop を介して子コンポーネントにデータを渡します。子コンポーネントのデータを親コンポーネントに渡したい場合は、カスタム イベントをバインドできます。
- 親 Vue インスタンス -> 子 Vue インスタンス、プロップ経由でデータを渡す
- 子 Vue インスタンス -> 親 Vue インスタンス、イベントを通じてデータを渡す
パラメータを渡すコンポーネント
父から息子へ受け継がれる
注: props は属性を定義するときにキャメルケースの名前を使用しますが、HTML で使用する場合はダッシュの名前に変更する必要があります。！
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父传子</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="肖少爷"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">这一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
}
}
}
}
});
</script>
</html>
息子の伝記 父親
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子传父</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="邓正伟" @three-click="getParam"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">这是一个黑丝姐姐，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
if (this.n % 3 == 0) {
// 触发自定义组件定义的事件，这里可以传递任意个参数
// 但是触发的事件绑定的函数要与参数个数一致
this.$emit('three-click', this.n, 'https://blog.csdn.net/Justw320', '无英韶');
}
}
}
}
},
methods: {
getParam(a, b, c) {
console.log(a, b, c);
}
}
});
</script>
</html>
