4.1、v-bind
最初のVueアプリの作成に成功しました。文字列テンプレートのレンダリングと非常によく似ていますが、Vueは舞台裏で多くの作業を行います。データとDOMが関連付けられたので、すべてが応答します。コンソールでオブジェクトプロパティを操作し、インターフェイスをリアルタイムで更新できます！
v-bindを使用して要素プロパティをバインドすることもできます！
上記のコード
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
});
</script>
</body>
</html>
表示されるv-bindなどは命令と呼ばれます。ディレクティブの前にはvが付いており、Vueが提供する特別な機能であることを示しています。ご想像のとおり、レンダリングされたDOMに特別なリアクティブ動作を適用します。ここで、ディレクティブは「この要素ノードのタイトル属性をVueインスタンスのメッセージ属性に揃える」ことを意味します。
ブラウザのJavaScriptコンソールをもう一度開き、app、message ='new message'と入力すると、title属性にバインドされたHTMLが更新されていることがわかります。
4.2、v-if、v-else
条件付き判断ステートメントとは何ですか、私はそれを説明する必要はありません、次の2つの属性！
v-ifv-else
上記のコード
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: true
}
});
</script>
</body>
</html>
テスト：
1。ブラウザで実行し、コンソールを開きます！
2.コンソールvm.ok=falseに入力してEnterキーを押すと、ブラウザに表示されるコンテンツが直接NOに変わります
。注：プロパティバインディングデータを使用する場合、折り返しv-*は必要ありません。双花括号
v-else-if
- v-if
- v-else-if
- v-else
注：===JSの3つの等号は、絶対的な等号を意味します（つまり、データとタイプは等しくなければなりません）。上記のコード：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='D'">D</h1>
<h1 v-else>C</h1>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: 'A'
}
});
</script>
</body>
</html>
4.3、v-for
- v-for
フォーマットの説明
<div id="app">
<li v-for="(item,index) in items">
{
{item.message}}---{
{index}}
</li>
</div>
123456
注：itemsは配列でitemあり、配列要素を反復処理するためのエイリアスです。後で学習するThymeleafテンプレートエンジンの構文は、これと非常によく似ています。
上記のコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<li v-for="(item,index) in items">
{
{item.message}}---{
{index}}
</li>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
items:[
{message:'狂神说Java'},
{message:'狂神说前端'},
{message:'狂神说运维'}
]
}
});
</script>
</body>
</html>
テスト：コンソールvm.items.push({message：'狂神说运维'})に入力し、データを追加してみてください。ブラウザに表示されるコンテンツが。だけ増えることがわかります狂神说运维。
4.4、v-on
v-onイベントemspをリッスンします
。イベントには、フロントエンドページ自体のVueイベントといくつかのイベントが含まれます！これがVueイベントであり、Vueのメソッドイベントにclickバインドできます！上記のコード：methods
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'Hello World'
},
methods:{
sayHi:function(event){
//'this'在方法里面指向当前Vue实例
alert(this.message);
}
}
});
</script>
</body>
</html>
クリックして
Vueをテストすると、いくつかの基本的な使用方法があります。必要な場合は、これらの基本的な手順のほとんどすべてを見てきましたので、公式ドキュメントに従って確認できます。すべてが完璧です。学習方法をマスターしてください。