Vue入门

一、什么是 Vue

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。在前后端分离项目中经常使用到。

Vue 官网

二、Vue 常见指令

首先在 HTML 的标签引入 vue.js，以下 vue 指令都写在标签中

注意：vue.js 要是开发版的，生产版的不能调试

作用：vue 用来解析数据的指令

<body>
    <!--页面模板-->
    <div id="app">
        <!--模板中需要进行填充内容:内容取值-->
        {{ message }}
    </div>
    <script>
        // 创建 vue 实例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

v-bind

作用：表示通知 vue 在渲染的 DOM 标签时，将 bind 绑定的属性和 vue 实例 data 中同名属性值保持一致

<body>
    <!--页面模板-->
    <div id="app">
        <span v-bind:title="title">{{msg}}</span>
        <span :title="title">{{msg}}</span> <!--简写-->
    </div>
    <script>
        // 创建 vue 实例
        var app = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                msg: '移到上面来',
                title:"显示数据"
            }
        })
    </script>
</body>

v-model

作用：双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定，功能与 v-bind 类似，不过数据可同步改动

<body>
    <div id="app">
        <!--v-bind: 单向属性绑定指令,修改绑定属性值,不会改变vue实例中的data属性值-->
        v-bind: <input type="text" :value="username" > </br>
    <!--v-model:双向属性绑定指令,修改绑定属性值,会改变vue实例中的data属性值-->
    v-model:<input type="text" v-model:value="username" >
    <span>{{username}}</span>
    </div>
<script>
    // 创建 vue 实例
    var app = new Vue({
        el: '#app', // 指定 vue 渲染的模板
        data: { // 模板渲染时需要属性值
            username:"jere"
        }
    })
</script>
</body>

v-html

作用：如果数据是带有 html 格式的数据，用 v-html 将这数据渲染出来

<body>
    <!--页面模板-->
    <div id="app" v-html="content"></div>
    <script>
        // 创建 vue 实例
        var app = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                content:"<span style='color: hotpink'>hotpink</span>"
            }
        })
    </script>
</body>

v-if

判断指令，可以用 if、else-if 、else

<body>
    <!--页面模板-->
    <div id="app">
        <span v-if="age>18">大于18</span>
        <span v-else-if="age==18">等于18</span>
        <span v-else="age<18">小于18</span>
    </div>
    <script>
        // 创建 vue 实例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                age:17
            }
        })
    </script>
</body>

v-for

循环指令，遍历操作格式：（元素，索引）in 数组 / 集合

注意：要使用到索引的话，必须放在元素后面

<body>
    <!--页面模板-->
    <div id="app">
        <ul>
            <li v-for="e,index in emps">
                {{e.id}}---{{e.name}}----{{e.age}}---索引{{index}}
            </li>
        </ul>
    </div>
    <script>
        // 创建 vue 实例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                emps:[
                    {id:1,name:"悟空",age:18},
                    {id:2,name:"八戒",age:11},
                    {id:3,name:"悟净",age:10}
                ]
            }
        })
    </script>
</body>

v-on

事件绑定指令，可以缩写成 @

<body>
    <!--页面模板-->
    <div id="app">
        <!-- <ul>
<li v-for="e,index in emps" v-on:click="clickMe()">
{{e.id}}-&#45;&#45;{{e.name}}&#45;&#45;&#45;&#45;{{e.age}}-&#45;&#45;索引{{index}}
</li>
</ul>-->

        <!--简写方式-->
        <ul>
            <li v-for="e,index in emps" @click="clickMe()">
                {{e.id}}---{{e.name}}----{{e.age}}---索引{{index}} 点点会弹窗
            </li>
        </ul>
    </div>
    <script>
        // 创建 vue 实例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染时需要属性值
                emps:[
                    {id:1,name:"悟空",age:18},
                    {id:2,name:"八戒",age:11},
                    {id:3,name:"悟净",age:10}
                ]
            },
            methods:{ //用于 vue
                clickMe:function(){
                    alert("点到了")
                }
            }
        })
    </script>
</body>

三、Vue 事件处理

事件函数

事件被触发之后，执行逻辑

事件对象

描述事件源被触发到执行完事件函数的所有过程对象，里面封装整个过程产生所有数据

事件信息封装对象：使用 $event 标记

事件源

触发事件，并执行事件函数那个 html 标签

事件函数传值

$event：触发事件时，vue 自动将这个事件对象创建并保存在 $event 变量

<body>
    <div id="app">
        <ul>
            <li v-for="u in list" v-on:click="choseClick($event,u)">
                {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
            </li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                list: [
                    {id: 1, name: 'wukong', age: 18, sex: 1},
                    {id: 2, name: 'bajie', age: 17, sex: 1},
                    {id: 3, name: 'xishi', age: 18, sex: 0},
                    {id: 4, name: 'dongshi', age: 19, sex: 0}
                ]
            },
            methods:{
                choseClick:function (ev,u) {
                    console.log(ev); // 事件对象
                    console.log(this); // 当前 vue 实例对象
                    console.log(ev.target);// 事件源
                    console.log(u);// 传进来的参数值
                }
            }
        })
    </script>
</body>

四、Vue 实例属性

el

用来指示vue编译器从什么地方开始解析 vue的语法

data

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

methods

放置页面中的业务逻辑，js函数一般都放置在methods中

<script>
    //....
    methods:{
        fun1:function () {
            //....
        },
        fun2:function () {
        }
    }
</script>

filters

vue过滤器集合，主要用来格式化操作。性别判断、日期格式化都会用到

下面的 {{u.sex | sexFilter}} 意思是左边参数赋值给右边

<div id="app">
    <ul>
        <!--{{u.sex | sexFilter}}左边参数赋值给右边-->
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            list: [
                {id: 1, name: 'wukong', age: 18, sex: 1},
                {id: 3, name: 'xishi', age: 18, sex: 0},
                {id: 4, name: 'dongshi', age: 19, sex: -1}
            ]
        },
        filters: {
            sexFilter: function (value) {
                if (value === 1){
                    return '男'
                }else if (value === 0){
                    return '女'
                }else{
                    return '保密'
                }
            }
        }
    })
</script>

mounted

定义：是一个函数，在 vue 实例创建完成后被立即调用（ html 加载完成后执行），一般用于初始化 data 中的数据

作用：从后端接口拿数据，对 data 数据进行数据初始化

问题：调用 mounted 时发生了什么

vue 实例创建
vue 属性初始化（解析 vue 模板），此时的属性都是默认值
执行 mounted 方法，从后端接口拿数据，对 data 数据进行数据初始化
设置数据，渲染 vue 模板

前后端分离项目采用 ajax 异步方式请求接口获取数据

<div id="app">
    <ul>
        <!--{{u.sex | sexFilter}}左边参数赋值给右边-->
        <li v-for="u in emps" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            emps: []
        },
        mounted: function () {
            var _this = this; // _this 指的是 vue
            $.get("/data/emps.json", function (data) {
                _this.emps = data;
            })
        }
    })
</script>

五、Vue 生命周期

vue的生命周期.png

六、Vue 综合案例 demo

员工列表

@RestController
@RequestMapping("employees")
public class EmployeeController {
    @Autowired
    private IEmployeeService employeeService;

    @GetMapping("/list")
    public Object list(){
        return employeeService.list();
    }
}

<div id="app">
    <ul>
        <li v-for="e in emps">
            {{e.id}}---{{e.name}}----{{e.age}}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            emps: []
        },
        mounted: function () {
            var _this = this;
            $.get("http://localhost:8088/employees/list", function (data) {
                _this.emps = data
            })
        }
    })
</script>

员工添加

问题：是用同步表单还是异步表单？

表单的2种提交方式

前后端分离项目一般都使用异步表单

@PostMapping("/saveOrUpdate")
public JsonResult saveOrUpdate(Employee employee){
    employeeService.saveOrUpdate(employee);
    return JsonResult.success();
}

将form表单转换成异步表单有两种形式

第一种方式：使用 $.post( "xxx" , $( "#formId" ).serialize( ),function(data){

})

第二种方式：需要先引入jQuery.form.js,并在 HTML 引入中放在jQuery.js的下面，代码如下

<div id="app">
    <form id="formId">
        <input type="hidden" name="id">
        名称：<input type="text" name="name"><br>
        年龄：<input type="text" name="age"><br>
        <input type="button" id="btn" @click="submitForm()" value="提交">
    </form>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            emps: []
        },
        methods: {
            submitForm: function () {
                $("#formId").ajaxSubmit({
                    url: "http://localhost:8088/employees/saveOrUpdate",
                    type: "post",
                    success: function (data) {
                        if (data.code === 200) {
                            window.location.href = "list.html"
                        } else {
                            alert("输入有误")
                        }
                    }
                });
            }
        }
    })
</script>

success方法里面用回调的data去获取后端传来的JSON对象中的code，判断状态码是否为200，如果是200，就跳页面，如果不是就弹窗报错

window.location.href 可以跳页面

员工编辑

@GetMapping("/detail")
public Object detail(Long id){
    return employeeService.getById(id);
}

<!--回显用 v-model -->
<div id="app">
    <form id="formId">
        <input type="hidden" name="id" v-model="emp.id">
        名称：<input type="text" name="name" v-model="emp.name"><br>
        年龄：<input type="text" name="age" v-model="emp.age"><br>
        <input type="button" id="btn" @click="submitForm()" value="提交">
    </form>
</div>
<script>
    //获取url上的请求参数
    function getParams() {
        //获取问号及问号后面的内容
        var url = window.location.search;
        var params = new Object();
        if (url.indexOf("?") != -1) {
            //截取问号后面的内容,再使用&分割多个属性
            var arr = url.substr(1).split("&");
            for (var i = 0; i < arr.length; i++) {
                //使用=分割为keyvalue
                var keyValue = arr[i].split("=");
                params[keyValue[0]] = keyValue[1];
            }
        }
        return params;
    }
    
    var vue = new Vue({
        el: "#app",
        data: {
            emp: []
        },
        methods: {
            submitForm: function () {
                $("#formId").ajaxSubmit({
                    url: "http://localhost:8088/employees/saveOrUpdate",
                    type: "post",
                    success: function (data) {
                        if (data.code === 200) {
                            window.location.href = "list.html"
                        } else {
                            alert("输入有误")
                        }
                    }
                });
            }
        },
        mounted:function () {
            // 步骤一: 获取 id
            var params = getParams();
            // 步骤二: 发起异步请求获取员工对象
            if (params) {
                var _this = this;
                $.get("http://localhost:8088/employees/detail", {id: params.id}, function (data) {
                    console.log(data)
                    _this.emp = data;
                })
            }
        }
    });

posted @ 2021-08-08 14:40 JereCode 阅读(120) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Loading

编码记录