目次
Vue 公式 Web サイト: Vue.js - プログレッシブ JavaScript フレームワーク | Vue.js (vuejs.org)
基本知識
最初の学習では、jsを自分でダウンロードする方法を使用します。
この記事ではvue2.7.jsのバージョンを使用していますが、バージョンが低いと一部の操作ができない可能性があります。
Vue がどのように書かれているかを理解する
- vue インスタンスは 1 つのコンテナーのみを引き継ぐことができます
- 補間構文: { {}} はデータ内のすべての属性を読み取ることができます
ハローワードページを作成する
htmlコード
<!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>vue2</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
</body>
</html>jsコード
el:現在の vue インスタンスがどのコンテナに使用されるかを指定するために使用され、値は CSS セレクター文字列です。
data:データを保存するために使用されます。データは el で指定されたコンテナーによって使用されます。
<script src="./js/vue2.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
},
});
</script>結果
コンソールからデータを変更する
データを関数モードに変換
知らせ
上記ページデータ内のデータが変更された場合、コンテナ内で使用されているデータは自動的に更新されます
データの書き方は通常関数として書きます。コードは次のとおりです。
data(){
return {
message: 'Hello world!',
}
}なぜデータを関数として記述する必要があるのでしょうか?
Vue の data 属性をオブジェクトの形式で記述することができない理由は、オブジェクトが独立した存在ではなく、アドレスへの参照であるためです。.vue ファイルに、変数を一緒に受け取る複数のサブコンポーネントがある場合、サブコンポーネントの 1 つでこの変数の値を変更すると、他のコンポーネントのこの変数の値に影響します。これらが関数として記述されている場合、その中にスコープの概念があり、互いに分離されており、影響を受けません。
命令
ディレクティブとは何ですか?
vue のページ + データに対して、より便利な操作をいくつか提供します。これらの操作は命令と呼ばれます。
htmlでの使い方はこんな感じ
<div v-xxx=''></div>vue では、v-xxx は vue の命令であり、この命令はデータを使用して DOM の動作を駆動し、DOM の操作を簡素化します。
1. 基本的な説明
- v-text は HTML タグを解析できません
- v-html 解析可能な HTML タグ
- v-if は要素の挿入 (追加) および削除 (削除) 操作を実行します。
- v-else-if
- v-その他
- v-show 表示:なしと表示:ブロックを切り替えます
- v-配列項目、インデックスオブジェクト値、キー、インデックスの場合
命令合成例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-text='mytext'></div>
<hr>
<div v-html='myhtml'></div>
<hr>
<button v-if="isButtonIf">v-if 元素插入和移除</button>
<hr>
<button v-if="num==1">测试v-if</button>
<button v-else-if="num==2">测试v-else-if</button>
<button v-else>测试v-else</button>
<hr />
<button v-show="isButtonShow">v-show 元素的显示和隐藏</button>
<hr />
v-for 循环数组。这个指令写道哪个标签就循环哪个标签，可以显示数组内容和下标
<ul>
<li v-for="(love,index) in lovesArray">
{
{index}}-{
{love}}
</li>
</ul>
v-for 循环对象。可以显示对象的key和value
<ul>
<li v-for="(attr,key) in myUser">
{
{key}}:{
{attr}}
</li>
</ul>
v-for 循环对象数组。可以显示对象的成员value
<ul>
<li v-for="(u,index) in userArray">
{
{index}}:{
{u.username}}
</li>
</ul>
v-for 循环数字
<ul>
<li v-for="num in 10">
{
{num}}
</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
mytext: '<h1>我是v-text</h1>',
myhtml: '<h1>我是v-html</h1>',
isButtonIf: true,
num: 2,
isButtonShow: false,
lovesArray: ['吃', '睡', '玩'],
myUser: {
username: 'youyou',
age: 18
},
userArray: [{
username: 'youyou',
age: 18
},
{
username: 'feifei',
age: 30
}
]
}
}
});
</script>
</html>結果
2 つの単一データ バインディング
v-bind ディレクティブは、名前の後にパラメータを取ることができます。これは通常、HTML要素の属性です。
v-bind:属性名= "式"
短い形式:属性名= "式"
<body>
<div id="app">
<img v-bind:src="tupian" width="300px">
<img :src="tupian" width="300px">
</div>
</body>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data(){// 用于储存数据，数据供el指定的容器使用
return{
tupian:'./img/long.jpg',
}
},
});
</script>単一アイテムはフロントエンドからデータに値を渡すことはできませんが、データからフロントエンドに値を渡すことのみが可能です
3 つの双方向データ バインディング
v-model ディレクティブにより、フォーム入力とアプリケーション状態の間の双方向バインディングが簡単に可能になります
v-model="変数"
通常、フォームの取得とデータの設定に使用されます。
<body>
<div id="app">
<form action="">
<input type="text" v-model="person.name">
<input type="text" v-model="person.age">
<select v-model="person.love">
<option value="eat">吃</option>
<option value="he">喝</option>
</select>
<input type="radio" v-model="person.sex" value="1">男
<input type="radio" v-model="person.sex" value="2">女
</form>
</div>
</body>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data(){// 用于储存数据，数据供el指定的容器使用
return{
person:{
name:"小美",
age:19,
love:"eat",
sex:2,
},
}
},
});
</script>イベントバインディング
イベント バインディング v-on: イベント名="式||関数名" 省略形 @イベント名="式||関数名"
イベント名はネイティブ名またはカスタム名にすることができます。関数の定義も、methods 属性を使用して Vue で行う必要があることに注意してください。
イベントに対応するメソッドでイベントオブジェクトを取得する
ブラケットなし
<body>
<div id="app">
<button @click="fun1" >点击获取事件对象</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun1(event){
console.log(event.target);
},
},
});
</script>括弧を追加するには、通常、追加のパラメータが必要です
<body>
<div id="app">
<button @click="fun2($event,'其他参数')" >点击获取事件对象(带括号)</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun2(evnet, arg){
console.log(event.target,arg);
},
},
});
</script>イベント修飾子
泡立つのを止める
バブリングが発生するシナリオ: 子要素と親要素が同じイベントにバインドされ、子要素がクリックされ、親要素もイベントをトリガーします。
バブリングを防ぐためにネイティブ JS を使用する
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click="fun3">里层div</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun3(event){
console.log(event.target);
event.stopPropagation(); // 使用原生js阻止冒泡
},
},
});
</script>バブリングを防ぐために vue イベントの修飾子を使用する
<body>
<div id="app">
<div @click="fun4">
外层div
<div @click.stop="fun4">里层div</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun4(event){
console.log(event.target);
},
},
});
</script>デフォルトの動作を防止する
一部のタグにはデフォルトの動作があります (デフォルトのページ ジャンプを持つタグなど)。
バブリングを防ぐためにネイティブ JS を使用する
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun5(event){
console.log(event.target);
event.preventDefault(); // 使用原生js阻止默认行为
},
},
});
</script>バブリングを防ぐために vue イベントの修飾子を使用する
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="fun6">百度</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
fun6(event){
console.log(event.target);
},
},
});
</script>イベント
このイベントは 1 回だけ実行され、2 回目のクリックは効果がありません。
<div @click.once="fun7">一次事件</div>キーボードイベント修飾子
キーボード イベント修飾子。主に、トリガーする特定の文字の入力をフィルターするために使用されます。
<body>
<div id="app">
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods:{
change(event){
console.log(event.key,event.keyCode);
},
},
});
</script>