この記事で共有する内容は、Vue でよく使用される手順の概要です。次に、具体的な内容を見てみましょう。
1 v -model
v-if は条件付きレンダリング ディレクティブであり、要素に基づいて削除および挿入します。 true または false の式の基本的な構文は次のとおりです: v-if="expression"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
注: v-if ディレクティブは、条件式の値に基づいて要素の挿入または削除を実行します。 v-for 命令は、配列に基づいてリストをレンダリングします。これは、JavaScript のトラバーサル構文 v-for="item in items"
name
age
{{item.name}}
{{item.age}}
v-bind:class<)。 /code><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">v-bind:argument="expression"</pre><div class="contentsignin">ログイン後にコピー</div></div></p>1.4 v-model</li><h4>v-model (フォーム要素が設定された後は値、チェック済み、および選択は無視されます)、フォーム <input> および <textarea> でよく使用されます。 h4 ><div></ul>フォーム要素とデータの双方向バインディング（マッピング関係）を実現します<p></div><code>v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：<p id="app">
<p v-text="message"> </p>
<input type="text" v-model="message">
</p>
</body>
<script type="text/javascript"> var app = new Vue({
el:"#app",
data:{
message:"nice to meet you"
}
})</script>expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：
<a v-on:click="doSomething">
显示结果如下、
注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
1.2 v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <p v-on:click.capture="doThis">...</p> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <p v-on:click.self="doThat">...</p>
items是一个数组，item是当前被遍历的数组元素。
示例代码：
<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>1.3 v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-text="expresstion"
1.4 v-model