Vue.js 入門から実践までの学習ノート (1) - Vue.js 文法入門
1.Vue インスタンス
Vue.js フレームワークを使用するページ アプリケーションでは、少なくとも 1 つの Vue インスタンスを作成する必要があります。構文はnew Vue().
Vue インスタンスを作成するときは、()、({...}) で渡されたオプション オブジェクトを渡す必要があります。このオブジェクトには、データ、メソッド、およびコンポーネントのライフサイクル フックを含めることができます。
提示：实例可以赋值给变量，如：var vm = new vue({......})
インスタンスのマウント: el 属性を介してレンダリングされるビューをバインドし、el： ‘#app’インスタンスが前の HTML タグ ステートメントでマウントされていることを示します。
data：{...}データオブジェクト、すべてのデータを入れますvm.$mount("#app")メソッドは手動で Vue インスタンスをマウントし、インスタンス自体を返します- el は () の内側にマウントされ
$mount、() の外側にマウントされます
var vm=new Vue({
...}).$mount("app")
2.補間（データバインディング）
1. テンプレート テキストのバインディング
のタグ間のテキスト値については、テキスト補間、つまり Mustache 構文 (二重中括弧) を使用して、 のインスタンスに記述された属性値を<html>呼び出す必要があります。<script><p>{
{message}}</p>
- 値が HTML コードの一部である場合、{
{HTML}} は HTML コードを実行せず、そのまま出力します (名前が示すように、テキスト補間、テキストのみを渡します)。
<p>{ {html}}</p> - v-html コマンドを使用して、HTML ステートメントを実行した後に結果を出力します。
<p v-html="html"></p>
2. HTML要素の属性値のバインディング
HTML 要素の属性値、つまりラベルの属性値の場合、たとえば<a href=?>{
{...}}</a>{ {}} は ? で使用できず、
v-bind 命令を使用して値を渡す必要があります。
<a v-bind:href="url">{
{
...}}</a>`
次のようなすべてのデータ バインディングに対して完全な JavaScript サポートを提供します。
<p>{
{
message.tuUpperCase()}}</p> //tuUpperCase()会把传进来的文本变为全大写字母。
{
{
a+b}}
{
{
isLogin？username：‘not login’}}
{
{
message.split(' ').reverse().join('')}} //反转句子
<div v-bind:id="'list-' + id"></div>·
これらの式は、最初に Vue インスタンスのデータ スコープで JavaScript として解析されます。
注: 各式には、次のようなステートメントや if ステートメントではなく、単一の式のみを含めることができます。
{
{
var a = 1}} //这是语句，不是表达式
{
{
if (OK) {
return message} }} //if语句也不会生效，可以用三元表达式来代替
3. 指示
ディレクティブは v- で始まる特別な属性であり、その値は単一の式に制限されています (値または JavaScript 式がサポートされています)。Vue インスタンスの属性値が変更される
とそれに応じて Vue インスタンスでそれにバインドされたタグの属性値も変更されます。<script><html>
1. いくつかの一般的なコマンドと使用法:
v-if ディレクティブ
<p v-if = "show">能看到吗</p> //v-if指令将根据show的值的真假来决定是否显示<p>的文本
一部のコマンドには、次のように、名前の後にコロンで示されるパラメーターを指定できます。
v-bind ディレクティブ
<a v-bind:herf= "url"></a> //用于响应式地更新HTML属性
<a :herf= "url"></a> //简写
v-on ディレクティブ
<button v-on:click="sayGreat"></button> //用于监听DOM事件
<button @click="sayGreat"></button> //简写
2. コマンドのパラメーターは動的パラメーターにすることができます
Vue.js バージョン 2.6.0 から、命令のパラメーターは動的パラメーターにすることができ、構文は次のように命令: [JavaScript 式] になります。
<a v-bind:[attribute]= "url"></a>
属性は、JavaScript 式として動的に評価されます。Vue インスタンスに object 属性があると仮定すると、値は href で、v-bind:herf と同等です; 値が null の場合、バインディングは削除されます。
<a></a>
注意1：在DOM中使用模板时（之间在HTML文件里写模板），需要避免使用大写字符命名动态参数，因为浏览器会把元素的属性名全部强制转换为小写。
也就是<html>里的动态参数名改成小写了，但是<script>里与之对应的名不会改成小写，就会找不到动态参数对应的数据对象。
注意2：动态参数不要使用复杂的表达式。因为HTML元素的属性命名有规范，不能有引号或空格。
错误示范：<a v-bind:['foo' + bar]= "value"></a>