vue

最新推荐文章于 2024-06-13 15:00:53 发布
最新推荐文章于 2024-06-13 15:00:53 发布
阅读量193 收藏
点赞数 1
文章标签： vue html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duhaoyu110/article/details/116381521
版权

vue笔记

(一)基础知识

第一个vue入门实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    {{msg}}
    <h3>用户名：{{username}}</h3>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"第一个vue程序",
            username:"杜浩宇"
        }
    })
</script>
vue实例中定义对象 数组等数据.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h2>{{msg}}</h2>
    <h2>姓名：{{ user.name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>信息：{{ user.des }}</h2>
    <h2>学校：{{schools}}</h2>
    <h2>users:{{users[0].name}}</h2>
</div>
</body>
</html>

<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el: "#app", // 指定vue的作用范围
        data: {
            msg: "vue 学习的第一天",
            age: 23,
            user: {name: "duhaoyu", des: "河北科技师范学院"},
            schools: ["北京大学", "天津大学", "清华大学", "河北大学"],
            users: [
                {name: "lxx", age: 23, school: "河北科技师范学院"},
                {name: "lww", age: 23, school: "燕山大学"}
            ]
        }
    })
</script>
使用{{属性名}}获取数据时使用表达式运算符相关的操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
<!--    使用{{属性}}的方式，可以进行相关的逻辑运算，算术运算等-->
    <h2>{{age + 1 == 24}}</h2>
</div>
</body>
</html>

<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el: "#app", // 指定vue的作用范围
        data: {
            msg: "vue 学习的第一天",
            age: 23
        }
    })
</script>
使用vue时el的指定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app" class="aa">
    {{msg}}
</div>
</body>
</html>

<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        /*
         * 指定vue的作用范围，可以是id选择器，可以是类选择器，所有的css选择器都可以
         *  推荐使用id选择器，因为id选择器具有唯一性
         * 注意：不要将el指向body 或者 html
         */
        el: ".aa",
        data: {
            msg: "vue 学习的第一天",
            age: 23
        }
    })
</script>
使用v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue2.5.js"></script>
</head>
<body>
<div id="app">
<!--
v-text 和 {{}}的区别：
    v-text ： 会覆盖原来标签当中的数据，{{}}不会
    {{}}会产生过插值闪烁，v-text不会
-->

<!--
   v-html：也可以获取数据，还可以解析数据中的html标签
   v-text： 只能取值，不会解析html标签
-->
    <span v-text="msg"></span> <br>
    <span v-html="msg"></span>
</div>
</body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "<a href=''>hello vue</a>"
        }
    })
</script>
vue事件绑定(一)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点我" v-on:click="aaa" v-on:mouseover="bbb" v-on:mouseout="ccc"/>
    </div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    /*
     * js事件的三要素：
     *   1.事件源：发生事件的源头称为事件源，一般是指html标签
     *   2.事件：发生特定动作，onclick单击。。。
     *   3.事件处理函数或事件处理程序
     *
     * vue事件：
     *   在vue中，可以通过v-on进行事件的绑定
     *   vue中，事件处理函数统一声明在vue对象中methods属性中
     */
    var app = new Vue({
        el: "#app",
        data: {},
        methods:{
            aaa:function () {
                alert('aaa');
            },
            bbb:function () {
                console.log("mouser over");
            },
            ccc:function () {
                console.log("mouse out");
            }
        }
    })
</script>
vue事件绑定(二)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{age}}</h1>
        <input type="button" value="给年龄加一" v-on:click="changeAge"/>
<!--        简化写法-->
        <input type="button" value="给年龄加一(简化)" @click="changeAge"/>
    </div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg:"hello vue",
            age:23
        },
        methods:{
            changeAge:function () {
                console.log(this.age);
                if(this.age >= 120) return;
                this.age++;
            },
            decrmentAge:function () {
                if(this.age < 2) return;
                this.age--;
            },
            // 函数的简化写法
            change(){
                this.age++;
            }
        }
    })
</script>
vue事件参数传递
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    {{age}}
    <input type="button" value="改变年龄" @click="changeAge(10,'xiaohei')"/>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            age:23
        },
        methods:{
            changeAge(number,name){
                this.age += number;
                console.log(name);
            }
        }
    })
</script>
v-show,v-if使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <!--
        v-if,v-show都是用来控制页面中的标签是否展示
        v-show : true 展示，false 不展示，可以写boolean值得表达式
        v-if: true 展示，false 不展示，

     区别：
        v-show：底层在控制页面标签是否展示时，使用的是css中display属性
        v-if：底层使用直接操作dom元素，通过对dom元素的删除和增加来控制标签是否展示
    -->
    <h1 v-show="isShow">{{msg}}</h1>
    <h1 v-if="isShow">{{content}}</h1>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            content:"duhaoyu",
            isShow:true
        },
        methods: {

        }
    })
</script>
v-show,v-if显示隐藏案例(一)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 v-show="isShow">{{msg}}</h1>
    <input type="button" value="展示" @click="show"/>
    <input type="button" value="隐藏" @click="hide"/>
    <input type="button" value="切换显示状态" @click="transform"/>
    <!--        另一种写法-->
    <input type="button" value="切换显示状态2" @click="isShow = !isShow"/>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            isShow: true
        },
        methods: {
            hide() {
                this.isShow = false;
            },
            show() {
                this.isShow = true;
            },
            transform() {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-show,v-if显示隐藏案例(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <img width="200px" v-show="isShow" @mouseover="hide" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=141156173,2221205300&fm=26&gp=0.jpg" alt="这是图片">
    </div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue",
            isShow:true
        },
        methods:{
            hide(){
                this.isShow = false;
            }
        }
    })
</script>

v-bind指令学习

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        .aa {
            border: 1px red solid
        }

        .bb {
            border: 1px yellow solid
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!--
        v-bind:
            用来将html中的标签的属性绑定到vue的实例中，通过vue中数据的改变，来影响html标签当属性值得改变
    -->
        <img :width="width" v-bind:src="src" alt="" :class="isClass?'aa':'bb'">
    </div>
</body>

</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            width: 200,
            src: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=141156173,2221205300&fm=26&gp=0.jpg",
            // src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201604%2F14%2F20160414123551_2tANx.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618376497&t=12d1769aeb2c43776376be096105d283"
            isClass: false
        },
        methods: {

        }
    })
</script>

v-bind案例(一)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <style>
        .aa{
            border: 1px red solid;
        }
        .bb{
            border: 1px green solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <img width="200" :src="src" @mouseover="change" alt="" @mouseout="recover" :class="cls">
    </div>
</body>

</html>

<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1694681277,1453280371&fm=26&gp=0.jpg",
            cls:"aa"
        },
        methods: {
            change(){
                this.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1963304009,2816364381&fm=26&gp=0.jpg";
                this.cls = "aa";
            },
            recover(){
                this.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1694681277,1453280371&fm=26&gp=0.jpg";
                this.cls = "bb";
            }
        }
    })
</script>

v-for指令使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>

<body>
<div id="app">
    <!--
        遍历对象：
        v-for使用： <h2 v-for="(value,key,index) in user"></h2>
    -->
    <h1>遍历对象</h1>
    <h2 v-for="(value,key,index) in user">
        index: {{index}}
        key: {{key}}
        value:{{value}}
    </h2>
    <h1>遍历数组</h1>
    <h2 v-for="(value,index) in areas">
        {{value}} ---- {{index}}
    </h2>
    <h1>遍历对象数组</h1>
<!--
    为了给每一个遍历出来的对象都有一个唯一标识，让vue内部更好的识别，在使用v-for的时候，一般要加一个:key属性
-->
    <h2 v-for="(user,index) in users" :key="user.id">
        {{index}} ----- {{user.name}} ----- {{user.age}}
    </h2>
</div>
</body>

</html>

<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            user: {name: "duhaoyu", age: 23},
            areas: ["北京", "天津", "上海", "廊坊"],
            users: [
                {name: "张三", age: 24},
                {name: "李四", age: 25},
                {name: "王五", age: 26}
            ]
        }
    })
</script>

v-model指令学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
<!--
    v-model:
        用来绑定form表单标签当中的value属性交给vue管理
-->
        <input type="text" v-model="msg">
        {{msg}}
        <input type="button" @click="change" value="改变数据">
    </div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
        },
        methods:{
            change(){
                this.msg = "杜浩宇学vue"
            }
        }
    })
</script>

(二)小案例

vue实现备忘录案例(一)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>备忘录</title>
</head>
<body>
<div id="app">
    <h2>备忘录功能实现</h2>
    输入备忘录内容：<input type="text" @keyup.enter="add" v-model="content"/> <input type="button" value="添加到备忘录" @click="add"/>
    <ul v-show="items.length > 0">
        <li v-for="item,index in items">{{index+1}}.{{item}} <a href="javascript:" @click="deleteItem(index)">删除</a>
        </li>
    </ul>
    <h5 v-show="items.length == 0"> 备忘录暂时没有内容</h5>
    <h2>当前备忘录总数：{{items.length}}条</h2>
    <input type="button" @click="clearItems" value="清空所有"/>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            items: ["今天要好好学习", "今天要去市场买菜", "今天学习了vue"],
            content: ""
        },
        methods: {
            add() {
                if (this.content) {
                    this.items.push(this.content);
                    this.content = "";
                } else {
                    alert('请输入备忘内容');
                }
            },
            deleteItem(index) {
                this.items.splice(index, 1);
            },
            clearItems() {
                this.items = [];
            }
        }
    })
</script>
vue实现购物车案例(一)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<body>
<div id="app">
    <h2>购物车功能实现之methods实现</h2>
    <table border="1px">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>count</th>
            <th>price</th>
        </tr>
        <tr v-for="item,index in items" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><input type="button" @click="descCount(index)" value="-"/>{{item.count}}<input type="button" value="+"
                                                                                        @click="incrCount(index)"></td>
            <td>{{(item.price * item.count).toFixed(2)}}</td>
        </tr>
    </table>
    <h3>总价格：{{getTotal()}}</h3>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            items: [
                {id: "1", name: "苹果手机", count: 1, price: 20.26},
                {id: "2", name: "华为手机", count: 1, price: 30.16}
            ]
        },
        methods: {
            descCount(index) {
                if (this.items[index].count <= 1) {
                    return;
                }
                this.items[index].count--;
            },
            incrCount(index){
                this.items[index].count ++;
            },
            getTotal(){
                var total = 0;
                for (let i = 0; i < this.items.length; i++) {
                    total += this.items[i].count * this.items[i].price;
                }
                return total.toFixed(2);
            }
        }
    })
</script>

vue实现购物车案例(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<body>
<div id="app">
    <h2>购物车功能实现之computed实现</h2>
    <table border="1px">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>count</th>
            <th>price</th>
        </tr>
        <tr v-for="item,index in items" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><input type="button" @click="descCount(index)" value="-"/>{{item.count}}<input type="button" value="+"
                                                                                               @click="incrCount(index)">
            </td>
            <td>{{(item.price * item.count).toFixed(2)}}</td>
        </tr>
    </table>
    <h3>总价格：{{totalPrice}}</h3>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            items: [
                {id: "1", name: "苹果手机", count: 1, price: 20.26},
                {id: "2", name: "华为手机", count: 1, price: 30.16}
            ]
        },
        methods: {
            descCount(index) {
                if (this.items[index].count <= 1) {
                    return;
                }
                this.items[index].count--;
            },
            incrCount(index) {
                this.items[index].count++;
            }
        },
        /*
         *用来书写计算的相关方法，计算属性。
         * 相对于methods来说计算不会重复计算，有缓存机制，更好提高效率
         */
        computed: {
            totalPrice() {
                var total = 0;
                for (let i = 0; i < this.items.length; i++) {
                    total += this.items[i].count * this.items[i].price;
                }
                return total.toFixed(2);
            }
        }
    })
</script>

vue事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <!--
            事件修饰符：用来和事件共同使用，决定给事件触发条件和触发机制
            .stop  停止事件冒泡
            .prevent 阻止标签的默认行为
            .self 只触发自身行为
            .once 只能让标签上的事件执行一次
         注意：可以多个事件修饰符连续使用
            example: @click.stop.once
        -->

<!--        .stop 用来阻止事件的冒泡-->
        <h2>stop事件修饰符</h2>
        <div style="width: 200px;height: 200px;background: red"  @click="parent">
            <div style="width: 100px;height: 100px;background: green" @click.stop="child">

            </div>
        </div>
        <h2>prevent事件修饰符</h2>
        <a href="http://www.baidu.com" @click.prevent="prevent">百度一下</a>
        <h3>self事件修饰符</h3>
        <div style="width: 200px;height: 200px;background: red"  @click.self="parent">
            <div style="width: 100px;height: 100px;background: green" @click="child">
            </div>
            <div style="width: 100px;height: 100px;background: aqua" @click="child">
            </div>
        </div>
        <h2>once事件修饰符</h2>
        <input type="button" value="点我" @click.once="clickMe"/>
    </div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
                alert('parent click')
            },
            child(){
                alert('child click')
            },
            prevent(){
                alert('prevent')
            },
            clickMe(){
                alert('click me')
            }
        }
    })
</script>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<!--
    按键修饰符：用来键盘上个事件(keyup,keydown....)进行连用，用来修饰键盘上特定的按键触发对应的事件
     .enter
     .tab
     .delete(退格键 和 删除键)
     .esc
     .space
     .up
     .down
     .left
     .right
-->
<div id="app">
    <h1>{{msg}}</h1>
<!--    keyup：鼠标抬起事件-->
    <input type="text" v-model="msg" @keyup.enter="test">
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
        },
        methods:{
            test(){
                console.log('test');
            }
        }
    })
</script>

(三) axios

3.1axios发送GET方式请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios发送GET方式请求</title>
</head>
<body>

</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    // 发送axios的get请求
    // axios.get("http://localhost:8080/demo?id=1")
    //     .then(function (response) {
    //     console.log(response.data);
    // }).catch(function (error) { //请求地址出错
    //     console.log(error);
    // });

    axios.get("http://localhost:8080/user?id=11").then(function (response) {
        console.log(response.data);
    })
    //es6简化写法 (类似于java的lambda表达式)
    axios.get("http://localhost:8080/user?id=12").then(response => {
        console.log(response.data.bir);
    })

    axios.get("http://localhost:8080/user2/50").then(response => {
        console.log(response.data);
    })

</script>
3.2axios发送POST方式请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios发送POST方式请求</title>
</head>
<body>

</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    // axios.post("http://localhost:8080/user3", {
    //     name: "xiaosi",
    //     age: 24,
    //     bir: 2012 - 12 - 15
    // }).then(res =>
    //     console.log(res)
    // )
    /*
     * axios的并发请求，axios。all()
     * 两个请求同时执行
     */
    function demo() {
        return axios.get("http://localhost:8080/demo")
    }
    function user() {
        return axios.get("http://localhost:8080/user?id=11")
    }
    axios.all([demo(),user()]).then(axios.spread((demoRes,userRes) => {
        console.log(demoRes);
        console.log(userRes)
    }));
</script>
3.3后端请求代码
package com.duhaoyu.controller;

import com.duhaoyu.entity.User;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@CrossOrigin //允许跨域访问
@RestController
public class AdminController {
    @GetMapping("demo")
    public String demo() {
        System.out.println("Demo");
        return "Demo OK";
    }

    @GetMapping("user")
    public User getUser(@RequestParam("id") Integer id) {
        System.out.println("id" + id);
        System.out.println("user ....");
        return new User(id, "duhaoyu", 23, new Date());
    }

    @GetMapping("user2/{id}")
    public User user2(@PathVariable("id") Integer id) {
        return new User(id, "lxx", 23, new Date());
    }

    @PostMapping("user3")
    public Map<String, Object> save(@RequestBody User user) {
        System.out.println(user);
        HashMap<String, Object> map = new HashMap<>();
        map.put("success","添加成功");
        return map;
    }
}
3.4实体类
package com.duhaoyu.entity;

import com.fasterxml.jackson.annotation.JsonFormat;

import java.util.Date;

public class User {
    private Integer id;
    private String name;
    private Integer age;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date bir;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                ", bir=" + bir +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Date getBir() {
        return bir;
    }

    public void setBir(Date bir) {
        this.bir = bir;
    }

    public User() {
    }

    public User(Integer id, String name, Integer age, Date bir) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.bir = bir;
    }
}

(四)重要部分

vue生命周期
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 id="sp">{{msg}}</h1>
<!--
    vue生命周期：
        1.初始化阶段
            beforeCreate()，created()，beforeMount()， mounted()
        2.运行阶段
            beforeUpdate，updated
        3.销毁阶段
            beforeDestroy,destroy
-->
    <input type="button" @click="changeData" value="改变数据" />
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"vue生命周期"
        },
        methods:{
            changeData(){
                this.msg = "vue 生命周期2";
            }
        },
        // 第一个执行生命周期函数，在这个函数执行的时候vue实例仅仅完成内部事件的初始化，以及生命周期方法的初始化
        beforeCreate(){
            console.log(this.msg);
        },
        // 第二个生命周期执行的函数，在这个函数执行的时候已经完成自定义的data，methods等的初始化以及语法校验
        created(){
            console.log(this.msg);
        },
        // 第三个生命周期的执行函数，在这个函数执行的时候仅仅是将el属性指向的html编译成模板，并没有完成页面的渲染
        beforeMount(){
            console.log(document.getElementById("sp").innerText);
        },
        // 第四个生命周期执行的函数，在这个函数执行的时候会将data的数据渲染到模板上并形成虚拟dom
        mounted(){
            console.log(document.getElementById("sp").innerText);
        },
        // 第五个运行阶段执行的函数，如果data中的数据发生改变会触发该函数，只是改变了data中的数据，但是页面中的数据还没有改变
        beforeUpdate(){
            console.log("beforeUpdate");
            console.log(document.getElementById("sp").innerText);
        },
        // 第六个运行阶段执行到该函数时，vue实例中的data数据和页面已经保存一致了
        updated(){
            console.log("updated");
            console.log(document.getElementById("sp").innerText);
        },
        // 第七个执行的函数，vue实例仅仅是刚刚开始销毁data methods ...数据还可以拿到
        beforeDestroy(){
            console.log("beforeDestroy" + this.msg);
        },
        // 第八个执行的函数，vue实例的所有events，child component(子组件),事件监听都被销毁了...
        destroy(){

        }
    })
</script>
用户列表案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.css"  rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
    <div class="container-fluid">
<!--        标题行-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
        </div>
<!--        数据行-->
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
<!--                添加按钮-->
                <a href="" class="btn btn-success btn-sm">添加</a>
                <table style="margin-top: 10px" class="table table-striped table-bordered">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>工资</th>
                        <th>年龄</th>
                        <th>简介</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2455</td>
                        <td>23</td>
                        <td>出生于95年，八月26日，获得过三好学生</td>
                        <td>
                            <a href="" class="btn btn-info btn-sm">修改</a>
                            <a href="" class="btn btn-danger btn-sm">删除</a>
                        </td>
                    </tr>
                </table>
                <form>
                    <div class="form-group">
                        <label class="control-label">编号</label>
                        <div>
                            <p class="form-control-static">1</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="email" class="form-control" id="name" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="salary">工资</label>
                        <input type="password" class="form-control" id="salary" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="email" class="form-control" id="age" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="description">简介</label>
                        <input type="password" class="form-control" id="description" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-info">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{

        }
    })
</script>
学好Java就改名
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端小白如何快速上手Vue框架(上篇)
Logbook的博客
03-05 13万+
前言: 我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大. 然后当然先查vue官方文档,官网会有如下提示: 然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航. 推荐vue学习文...
MVC和MVVM区别
qq_40007317的博客
06-09 1万+
1、MVC MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 2、MVVM vue框
Vue笔记（三）
最新发布
lklalmq的博客
06-13 885
自定义指令// 局部注册指令el.focus();
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
weixin_44504809的博客
05-20 1万+
Vue Vue介绍、Vue基础语法、Vue生命周期、axios的使用
Vue简介
橘猫吃不胖的博客
03-17 5381
Vue简介1 概述2 Vue热加载3 Vue的双向数据绑定的原理 1 概述 Vue.js 可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。 Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue2
02-21
武德莫项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
VUE
03-28
VUE
Vue
02-09
Vue
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
vue 项目源码
08-07
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue 项目源码"很可能是某个公司在实际开发过程中创建的一个Vue项目实例，包含了完整的前端应用代码。在这个项目中，我们可以深入理解Vue的核心...
Vue篇(超详细讲解)
2301_77112535的博客
12-14 6802
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
vue基础详解（全）
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
初识Vue
Floatwor青舟的博客
10-30 1293
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
什么是 vue？超简单基础入门
黑马程序员官方博客
01-03 4796
构建用户界面用 vue 往 html 页面中填充数据，非常的方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！要学习 vue，就是在学习 vue 框架中规定的用法！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8204
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值