前端视图开发:

html 标签 +css 样式 + js 交互

前端给后端传数据:注册页面

1. 用户在表单中修改数据(修改视图 View)
2. 视图改变后,会同时改变js中的数据 (修改Model模型)
3. 直接将js中的数据传给后端 (修改Controller控制器)

前端展示后端数据:学生列表

1. 将后端的数据传入到js data中(修改Model模型)
2. 前端页面上有一个空的表格来获取data中的数据(修改视图View)

Vue 入门总结

1. Vue的基本使用

1.1 Vue的基本使用

1. 引入vue.js文件
2. 创建Vue实例
3. 挂载到某个元素上
4. 使用Vue的语法
5. 使用Vue的指令

1.2 Vue的指令

1. 插值表达式: {{}} 替换文本内容

2. v-bind: 单项数据绑定 v-bind:属性名="数据"

   ▼
   html
   复制代码
   <div id="app">
       <img v-bind:src="imgUrl" alt="">
   </div>
   
   <script>
       let app = new Vue({
           el: '#app',
           data: {
               imgUrl: 'https://www.baidu.com/img/bd_logo1.png'
           }
       })
   </script>
   

3. v-on: 事件绑定 v-on:事件名="函数名"

   ▼
   html
   复制代码
   <div id="app">
       <button v-on:click="btnClick">按钮</button>
   </div>
   
   <script>
       let app = new Vue({
           el: '#app',
           data: {
               imgUrl: 'https://www.baidu.com/img/bd_logo1.png'
           },
           methods: {
               btnClick: function () {
                   console.log('按钮被点击了')
               }
           }
       })
   </script>
   

4. v-if 和 v-show 的区别

   • v-if: 控制元素的显示和隐藏, 如果为false, 元素会被移除
   • v-show: 控制元素的显示和隐藏, 如果为false, 元素会被隐藏

▼
html
复制代码
    <div id="app">
        <button v-on:click="btnClick">按钮</button>
        <div v-if="isShow">显示</div>
        <div v-show="isShow">显示</div>
    </div>
    
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                btnClick: function () {
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
    ```
5. v-for: 循环遍历
    ```html
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="stu in students">
<!--            <td>{{stu.name}}</td>-->
<!--            <td>{{stu.age}}</td>-->
            <td v-for="value in stu">{{value}}</td>
<!--            <td v-for="(value,key,index) in stu">{{value}}</td>-->
        </tr>
            
        </table>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                list: ['a', 'b', 'c'],
                students: [
                    {name: '张三', age: 18},
                    {name: '李四', age: 19},
                    {name: '王五', age: 20},
                ]
            }
        })
    </script>
    ```
6. v-model: 双向数据绑定
    ```html
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })
    </script>
    ```