1-2-vue框架-基础-模板语法和指令

模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。
指令和模板语言要结合使用

下面的学习，都使用vue3来学习，
vue介绍，使用vue创建项目：https://www.cnblogs.com/andy0816/p/15072167.html
都在项目中进行模板语法的学习，

文本插值：使用花括号{{ msg }}

<template>
<H1>{{msg}}</H1>
<p>{{msg}}</p>
</template>


<script>
  export default {
    data(){
      return {
        msg:"学习vue"
      }
    }
  }

</script>

使用 JavaScript 表达式​

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。
js表达式一定要有单一结果，
一个简单的判断方法是是否可以合法地写在 return 后面。

因此，下面的例子都是无效的：

template
<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令v-html

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令
这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。
下面会学习很多的指令

指令v-bind

<template>

<p>{{msg}}</p>
<p v-bind:id = "msg">{{msg}}</p>
</template>


<script>
  export default {
    data(){
      return {
        msg: '页面加载于 ' + new Date().toLocaleString(),
      }
    }
  }

</script>

• v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

这种方法可以绑定各种属性，

<a :href="url"> ... </a>

<button :disabled="isButtonDisabled">Button</button>

条件渲染

条件v-if

<template>
  <p v-if="seen">现在你看到我了</p>
</template>

<script>
  export default {
    data(){
      return {
       seen:true
      }
    }
  }

</script>

• 很明显，可以通过seen: true或者false，进行控制是否显示
• 至于这个指令是如何运行的，怎么就能达到了这个效果，现在不去深究，后面再说

v-if v-else

v-if判断语句之用，v-else则是和v-if一起出现，
当v-if判断为true时，v-else不执行；
当v-if判断为false时，v-else才执行。

<template>
<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>


<script>
  export default {
    data(){
      return {
       awesome:true
      }
    }
  }
</script>

这是官网的一个案例，

v-else-if​

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show​

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 template 元素上使用，也不能和 v-else 搭配使用。

列表渲染：

循环v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

v-for 索引

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

Parent - 0 - Foo
Parent - 1 - Bar

v-for 与对象​

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

事件监听

v-on

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

data() {
  return {
    count: 0
  }
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理器​

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

举例来说：

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

• 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，
  通过它调用在 Vue 实例中定义的方法

• 所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
  这是vue厉害的地方，不需要操作dom，就关心逻辑就可以了，

表单输入绑定

双向绑定 v-model

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，
v-model 指令帮我们简化了这一步骤：

<template>
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
</template>

<script>
  export default {
    data(){
      return {
       message:"hello"
      }
    }
  }

</script>

• v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
• 是可以修改的，修改了输入框里面的，然后上面显示的内容是跟随变化的，

指令列表

• 上面介绍了一些常用的指令，
• 那指令到底有多少？？https://cn.vuejs.org/v2/api/#指令
  1，v-text
  2，v-html
  3，v-show
  4，v-if
  5，v-else
  6，v-else-if
  7，v-for
  8，v-on
  9，v-bind
  10，v-model
  11，v-slot
  12，v-pre
  13，v-cloak
  14，v-once

注意两个缩写

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

注意指令的配合

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>