Vue.js基础 - 悦读

1.vue.js简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.vue快速入门

2.1 准备工作：

准备一个html文件，并在其中引入Vue模块【注意：模块化的js，引入时，需要设置 `type="module"`】
创建Vue程序的应用实例，控制视图的元素
准备元素（div），交给Vue控制

以上三步准备工作的最终代码如下：
<body>
  <div id="app">{{message}}</div>
  <script type="module">
   import{createApp} from '';
   createApp({
        
   }).mount('#app');
  </script>
</body>

2.2 数据驱动视图：

准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。

通过插值表达式渲染页面。插值表达式的写法：{{...}}

最终代码如下：
<body>
  <div id="app">
    {{message}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          message: 'Hello Vue'
        }
      }
    }).mount('#app')
  </script>
</body>
注意事项：

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。
插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错。
Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 `<div id="app">...</div>` 的里面。

3. Vue指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	控制元素的显示与隐藏：判定为true时渲染,否则不渲染
v-show	控制元素的显示与隐藏：与v-if的区别在于切换的是display属性的值（频繁切换场景中，效率比v-if高）
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

3.1 v-for指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

3.2 v-bind 指令

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：`v-bind:属性名="属性值"`

简化：`:属性名="属性值"`

注意：v-bind 所绑定的数据，必须在data中定义。
<body>
  
  <div id="app">
    <a v-bind:href="url">链接1</a> <br><br>
  </div>
  
  <script type="module">
    import { createApp } from '.js'
    createApp({
      data(){
        return {
          url: 'https://www.baidu.com'
        }
      }
    }).mount('#app')
  </script>
</body>

3.3 v-if指令&v-show指令

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

场景：要么显示，要么不显示，不频繁切换的场景

其它：可以配合 v-else-if / v-else 进行链式调用条件判断

3.3.1V-show和v-if的区别:

v-if通过条件判断决定是否在DOM中插入或移除元素，适用于条件很少变化的情况。
v-show通过CSS属性控制元素的显示与隐藏，适用于需要频繁切换显示状态的情况。
v-if在切换过程中会销毁和重建内部的事件监听和子组件，而v-show只是简单地基于CSS切换。
v-if有更高的切换消耗，v-show有更高的初始渲染消耗。
v-if动态添加时会完全移除该元素，而v-show仅是隐藏/显示。
<div id="app">
    <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>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

3.4 v-model指令

v-model 会根据控件类型自动选取正确的方法来更新元素。

<body>
  <div id="app">
    <input type="text" v-model="name"> <br>
    {{name}}
  </div>
  
  <script type="module">
    import { createApp } from ''
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      }
    }).mount('#app')
  </script>
</body>

3.5 v-on指令

v-on 指令可以事件监听：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>