Vueの基本構文
最初のVueアプリケーションを正常に作成しました。文字列テンプレートのレンダリングと非常によく似ていますが、Vueは舞台裏で多くの作業を行います。データとDOMがリンクされたので、すべてが応答します。コンソールでオブジェクトのプロパティを操作し、インターフェイスをリアルタイムで更新できます
v-bind
<!DOCTYPE html>
<html lang="en">
<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>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data:{
message: "hello,vue!"
}
});
</script>
</body>
</html>
私たちが見るv-bindなどは命令と呼ばれます。ディレクティブの前にはv-が付いており、レンダリングされたDOMに特別なリアクティブ動作を適用するVueによって提供される特別な機能であることを示します。
ここで、この命令の意味は次のとおりです。この要素ノードのtitle属性をVueインスタンスのmessage属性と一致させます。
ブラウザのJavaScriptコンソールを再度開き、app.message ='new message'と入力すると、次のようになります。これをもう一度参照してくださいtitle属性をバインドするHTMLが更新されました
裁判官、トラバース
v-if v-elseif v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
<!--js中===表示判断是否相等-->
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</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>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data:{
type: 'A'
}
});
</script>
</body>
</html>
v-for
<!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>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data:{
items: [
{
message: 'java'},
{
message: 'php'},
{
message: '运维'}
]
}
});
</script>
</body>
</html>
イベント
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
<button v-on:click="sayHi">click me</button>
</div>
<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data: {
message: 'java'
},
methods: {
//方法必须定义在Vue的Method对象中
sayHi: function (){
//this指向当前对象
alert(this.message);
}
}
});
</script>
</body>
</html>
Vue双方向バインディング
双方向バインディングとは何ですか
Vue.jsはMVVMフレームワークです。つまり、データの双方向バインディングです。つまり、データが変更されるとビューが変更され、ビューが変更されるとデータが同期的に変更されます。これがVue.jsの本質です。
ここで説明している双方向のデータバインディングはUIコントロール用である必要があり、UI以外のコントロールには双方向のデータバインディングは含まれないことに注意してください。一方向のデータバインディングは、状態管理ツールを使用するための前提条件です。これを使用するvuexと、データフローも単一アイテムになり、双方向のデータバインディングと競合します。
なぜデータの双方向バインディングを実装するのですか？
ではvue.js、使用する場合vuex、データは実際には一方向です。データの双方向バインディングと呼ばれる理由は、UIコントロールに使用されるためです。フォームを処理するために、Vueの双方向データバインディング.jsは特に便利です。快適です。つまり、この2つは相互に排他的ではなく、1つのアイテムがグローバルデータフローで使用されるため、追跡に便利です。ローカルデータフローは双方向であり、操作が簡単です。
フォームでの双方向データバインディングの使用
v-modelディレクティブを使用して、フォームと<input>要素に双方向のデータバインディングを作成できます。コントロールタイプに基づいて要素を更新するための正しいメソッドを自動的に選択します。やや魔法のようですが、vモデルは本質的に構文糖衣です。ユーザー入力イベントをリッスンしてデータを更新し、極端なシナリオでは特別な処理を行います。注：v-modelは、すべてのフォーム要素の値、チェック、および選択された属性の初期値を無視し、常にVueインスタンスのデータをデータソースとして使用します。JavaScriptを介してコンポーネントのデータオプションで初期値を宣言する必要があります<textarea>select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view层 模板-->
<div id = "app">
输入的文本：<input type="text" v-model="message">{
{message}}
<select v-model="selected">
<option disabled value="">--请选择--</option>
<option>A</option>
<option>B</option>
</select>
<span>
选中的值：{
{selected}}
</span>
</div>
<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
<!--Model: 数据-->
data: {
message: '123',
selected: ''
}
});
</script>
</body>
</html>
注：v-model式の初期値がどのオプションとも一致しない場合、<select>要素は「選択されていない」状態でレンダリングされます。IOSでは、これにより、ユーザーが最初のオプションを選択できなくなります。この場合、iOSは変更イベントをトリガーしないためです。したがって、上記のように空の値で無効化オプションを提供することをお勧めします。