Av在线操,亚洲非洲AV中文国产

一、什么是 Vue

Vue (讀音 /vju?/) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。在前后端分離項目中經(jīng)常使用到。

Vue 官網(wǎng)

二、Vue 常見指令

首先在 HTML 的 <head> 標(biāo)簽引入 vue.js，以下 vue 指令都寫在 <body> 標(biāo)簽中

注意：vue.js 要是開發(fā)版的，生產(chǎn)版的不能調(diào)試

作用：vue 用來解析數(shù)據(jù)的指令

<body>
    <!--頁面模板-->
    <div id="app">
        <!--模板中需要進行填充內(nèi)容:內(nèi)容取值-->
        {{ message }}
    </div>
    <script>
        // 創(chuàng)建 vue 實例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染時需要屬性值
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

v-bind

作用：表示通知 vue 在渲染的 DOM 標(biāo)簽時，將 bind 綁定的屬性和 vue 實例 data 中同名屬性值保持一致

<body>
    <!--頁面模板-->
    <div id="app">
        <span v-bind:title="title">{{msg}}</span>
        <span :title="title">{{msg}}</span> <!--簡寫-->
    </div>
    <script>
        // 創(chuàng)建 vue 實例
        var app = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染時需要屬性值
                msg: '移到上面來',
                title:"顯示數(shù)據(jù)"
            }
        })
    </script>
</body>

v-model

作用：雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定：使用 v-model 進行雙向數(shù)據(jù)綁定，功能與 v-bind 類似，不過數(shù)據(jù)可同步改動

<body>
    <div id="app">
        <!--v-bind: 單向?qū)傩越壎ㄖ噶?修改綁定屬性值,不會改變vue實例中的data屬性值-->
        v-bind: <input type="text" :value="username" > </br>
    <!--v-model:雙向?qū)傩越壎ㄖ噶?修改綁定屬性值,會改變vue實例中的data屬性值-->
    v-model:<input type="text" v-model:value="username" >
    <span>{{username}}</span>
    </div>
<script>
    // 創(chuàng)建 vue 實例
    var app = new Vue({
        el: '#app', // 指定 vue 渲染的模板
        data: { // 模板渲染時需要屬性值
            username:"jere"
        }
    })
</script>
</body>

v-html

作用：如果數(shù)據(jù)是帶有 html 格式的數(shù)據(jù)，用 v-html 將這數(shù)據(jù)渲染出來

<body>
    <!--頁面模板-->
    <div id="app" v-html="content"></div>
    <script>
        // 創(chuàng)建 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>
        // 創(chuàng)建 vue 實例
        var vue = new Vue({
            el: '#app', // 指定 vue 渲染的模板
            data: { // 模板渲染時需要屬性值
                age:17
            }
        })
    </script>
</body>

v-for

循環(huán)指令，遍歷操作格式：（元素，索引）in 數(shù)組 / 集合

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

<body>
    <!--頁面模板-->
    <div id="app">
        <ul>
            <li v-for="e,index in emps">
                {{e.id}}---{{e.name}}----{{e.age}}---索引{{index}}
            </li>
        </ul>
    </div>
    <script>
        // 創(chuàng)建 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>
        // 創(chuàng)建 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 事件處理

事件函數(shù)

事件被觸發(fā)之后，執(zhí)行邏輯

事件對象

描述事件源被觸發(fā)到執(zhí)行完事件函數(shù)的所有過程對象，里面封裝整個過程產(chǎn)生所有數(shù)據(jù)

事件信息封裝對象：使用 $event 標(biāo)記

事件源

觸發(fā)事件，并執(zhí)行事件函數(shù)那個 html 標(biāo)簽

事件函數(shù)傳值

$event：觸發(fā)事件時，vue 自動將這個事件對象創(chuàng)建并保存在$ 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); // 當(dāng)前 vue 實例對象
                    console.log(ev.target);// 事件源
                    console.log(u);// 傳進來的參數(shù)值
                }
            }
        })
    </script>
</body>

四、Vue 實例屬性

el

用來指示vue編譯器從什么地方開始解析 vue的語法

data

用來組織從view中抽象出來的屬性，可以說將視圖的數(shù)據(jù)抽象出來存放在data中

methods

放置頁面中的業(yè)務(wù)邏輯，js函數(shù)一般都放置在methods中

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

filters

vue過濾器集合，主要用來格式化操作。性別判斷、日期格式化都會用到

下面的 {{u.sex | sexFilter}} 意思是左邊參數(shù)賦值給右邊

<div id="app">
    <ul>
        <!--{{u.sex | sexFilter}}左邊參數(shù)賦值給右邊-->
        <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

定義：是一個函數(shù)，在 vue 實例創(chuàng)建完成后被立即調(diào)用（ html 加載完成后執(zhí)行），一般用于初始化 data 中的數(shù)據(jù)

作用：從后端接口拿數(shù)據(jù)，對 data 數(shù)據(jù)進行數(shù)據(jù)初始化

問題：調(diào)用 mounted 時發(fā)生了什么

vue 實例創(chuàng)建
vue 屬性初始化（解析 vue 模板），此時的屬性都是默認(rèn)值
執(zhí)行 mounted 方法，從后端接口拿數(shù)據(jù)，對 data 數(shù)據(jù)進行數(shù)據(jù)初始化
設(shè)置數(shù)據(jù)，渲染 vue 模板

前后端分離項目采用 ajax 異步方式請求接口獲取數(shù)據(jù)

<div id="app">
    <ul>
        <!--{{u.sex | sexFilter}}左邊參數(shù)賦值給右邊-->
        <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表單轉(zhuǎn)換成異步表單有兩種形式

第一種方式：使用 $.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方法里面用回調(diào)的data去獲取后端傳來的JSON對象中的code，判斷狀態(tài)碼是否為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上的請求參數(shù)
    function getParams() {
        //獲取問號及問號后面的內(nèi)容
        var url = window.location.search;
        var params = new Object();
        if (url.indexOf("?") != -1) {
            //截取問號后面的內(nèi)容,再使用&分割多個屬性
            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();
            // 步驟二: 發(fā)起異步請求獲取員工對象
            if (params) {
                var _this = this;
                $.get("http://localhost:8088/employees/detail", {id: params.id}, function (data) {
                    console.log(data)
                    _this.emp = data;
                })
            }
        }
    });

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue 入門

Vue 入門

一、什么是 Vue

二、Vue 常見指令

{{屬性}}

v-bind

v-model

v-html

v-if

v-for

v-on

三、Vue 事件處理

事件函數(shù)

事件對象

事件源

事件函數(shù)傳值

四、Vue 實例屬性

el

data

methods

filters

mounted

五、Vue 生命周期

六、Vue 綜合案例 demo

員工列表

員工添加

員工編輯

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue 入門

一、什么是 Vue

二、Vue 常見指令

{{屬性}}

v-bind

v-model

v-html

v-if

v-for

v-on

三、Vue 事件處理

事件函數(shù)

事件對象

事件源

事件函數(shù)傳值

四、Vue 實例屬性

el

data

methods

filters

mounted

五、Vue 生命周期

六、Vue 綜合案例 demo

員工列表

員工添加

員工編輯

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、什么是 Vue

二、Vue 常見指令

三、Vue 事件處理

四、Vue 實例屬性

五、Vue 生命周期

六、Vue 綜合案例 demo