VueVue 框架的定义所谓框架就是将一些复杂功能进行封装, 比如响应式更新 (若我们自己用 JS 也可以实现) 就不

Vue概述

框架的定义

所谓框架就是将一些复杂功能进行封装, 比如响应式更新 (若我们自己用 JS 也可以实现) 就不需要我们自己编写, 框架已经帮我们封装好了, 然后根据使用规则 v-for 进行使用, sping框架的 @Autowired也是同样道理

作用

响应式更新：数据一变，页面自动更新，省心又高效。
组件化：可以把页面分成一个个小模块（比如导航栏、商品列表），分别开发和维护，代码更清晰。
...

Vue引入

<body>
    <div id="app">
    <!-- {{插值表达式}}} -->
        <h1>{{msg}}</h1>
    </div>

    <script type="module" src="./vue入门.js">
     //这里面就相当于.js文件内容
     import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            //data()方法 : 存放数据的地方
            data() {
                //返回一个对象 , 里面存储的数据就是可以使用插值表达值的值
                return {
                    msg: 'Hello Vue!'
                }
            },
            //methods对象, 里面存放各个方法
            methods: {

      		},
            //vue生命周期, mounted()代表程序启动时需要执行的东西
      		mounted() {
        
      		},
        }).mount('#app');  //设置Vue应用实例接管的区域
    </script>
</body>

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

Vue常用指令

v-for

作用 : 实现响应式更新
代码示例

<body>
  <div id="app">
    <p v-for="name in names">{{name}}</p>

	  <!-- 
        userList : user对象集合
        user : 单个user对象
        index : 索引
        key : 提升渲染速度, 数据vue框架内部处理, 只需要保持值唯一性即可, 通常使用id进行填充
      -->
    <tr v-for="(user, index) in userList" :key="user.id">
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          names: ['张无忌', '张三丰', '韦一笑', '殷天正']
        }
      }
    }).mount('#app')
  </script>
</body>

v-bind

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

<body>
  <div id="app">
    <a v-bind:href="url">链接1</a>
    <br><br>
    <a :href="url">链接2</a>  //第二种写法
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data() {
        return {
          "url": "https://www.itcast.cn"
        }
      }
    }).mount('#app')
  </script>
</body>

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if：
- 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，不频繁切换的场景
- 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
v-show：
- 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景
代码示例

<td>
    <span v-if="user.gender == 1">男</span>
<span v-else-if="user.gender == 2">女</span>
<span  v-else>其他</span>
</td>

<td>
    <span v-show="user.job == 1">讲师</span>
<span v-show="user.job == 2">班主任</span>
<span v-show="user.job != 1 && user.job != 2">其他</span>
</td>

v-model

作用 : 在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据 . 这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型

<body>
  <div id="app">
    <input type="text" v-model="name"> <br>
    {{name}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      }
    }).mount('#app')
  </script>
</body>

v-on

作用 : 为html标签绑定事件（添加事件监听）

<body>
  <div id="app">
    <input type="button" value="点我一下试试" v-on:click="handle">
    <input type="button" value="再点我一下试试" @click="handle">  //第二种写法
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      },
      methods: {
         //绑定的方法
        handle(){
          console.log('试试就试试');
        }
      }
    }).mount('#app')
  </script>
</body>