Vue学习-01.基础数据绑定

1. html 页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        名字<input type="text" v-model="name">
        <span v-show="name">你的名字是: {{name}}</span>
    </div>
    <div>
        年龄<input type="text" v-model="age">
       <span v-show="age">你的年龄是: {{age}}</span>
    </div>
    <div>
        性别<input type="text" v-model="sex">
        <span v-show="sex" >你的性别是: {{sex}}</span>
    </div>

</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>

</body>
</html>

2. js代码

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {
        name: null,
        age: null,
        sex: null
    }

});

3. 效果图

Vue学习-02.v-for指令(数据迭代)

1. html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-for迭代指令</h2>
<ul>
    <li v-for="food in foodList">{{food.name}}:￥{{food.discount ? food.price * food.discount : food.price}}</li>
</ul>

</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>

</body>
</html>

2.js 代码

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {
       foodList: [
           {
               name: '葱',
               price: 10,
               discount: .2,
           },
           {
               name: '姜',
               price: 12,
               discount: .5,
           },
           {
               name: '蒜',
               price: 5
           }
       ]
    }

});

3. 效果图

Vue学习-03.v-bind指令(属性)

1. html 页面

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-bind</h2>
    <!--v-bind可以省略-->
    <a v-bind:href="url">点我</a>
    <a :href="url" :class="">点我</a>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {
        url: "http://www.baidu.com"
    }

});

3. 效果

点击跳转百度

Vue学习-04.v-on指令(事件)

1. html 页面

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-on</h2>
    <!--mouseenter  获取焦点-->
    <!--mouseleave 失去焦点-->
    <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick(1)">点我</button>


    <!--submit.prevent 无刷新提交表单-->
    <!--v-on: 可以替换为 @-->

    <form @submit.prevent="onSubmit()" @keyup.enter="onKeyUp">
        <input type="text">
        <input type="submit" value="提交">
    </form>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {  //定义数据

    },
    methods:{  //定义方法
        onClick: function (data) {
            console.log("click"+data);
        },
        onEnter: function () {
            console.log("enter")
        },
        onOut:function () {
            console.log("out")
        },

        onSubmit:function () {
            console.log("out")
        },

        onKeyUp:function () {
            console.log("表单提交")
        }
    }

});

3. 效果图

Vue学习-05.v-model指令及其修饰符(重点)

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-model</h2>
    <!--v-model.lazy 失去焦点时更新-->
    <!--v-model.trim 去前后空格-->
    名称：<input type="text" v-model.trim="name">
    <pre>名称是：{{name}}</pre>
    <!--v-model.number 自动转换为number 类型-->
    价格：<input type="text" v-model.number="price">
    <pre>价格是：{{price}}</pre>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {  //定义数据
        name: "洋葱",
        price: null,
    },
});

3. 效果图

Vue学习-06. v-model在其他元素及类型上的用法

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-model</h2>
    <!--单选框-->
    <div>
        <label>
            男<input type="radio" v-model="sex" value="male">
        </label>
        <label>
            女<input type="radio" v-model="sex" value="female">
        </label>
        <br>
        性别是{{sex}}
    </div>
    <br>
    <!--多选框-->
    <div>
        <label>
            科目一<input type="checkbox" v-model="project" value="one">
        </label>
        <label>
            科目二<input type="checkbox" v-model="project" value="two">
        </label>
        <br>
        科目是{{project}}
    </div>

    <!--文本框 textarea 与 imput text 无区别-->
    <!-- 下拉列表   -->
    <br>
    <div>
        <div>你来自哪里？ {{from}}</div>
        <select v-model="from">
            <option value="1">北京</option>
            <option value="2">上海</option>
        </select>
    </div>

    <br>
    <div>
        <div>你要去哪里？ {{go}}</div>
        <select v-model="go" multiple="multiple">
            <option value="1">北京</option>
            <option value="2">上海</option>
        </select>
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {  //定义数据
        sex: "female",
        project: ["two"],
        from: 2,
        go: []
    },
});

3. 效果图

Vue学习-07.控制流指令

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' || role=='super_admin'">
        管理员你好
    </div>
    <div v-else-if="role == 'hr'">
        hr你好,代查看简历列表：<br> ...
    </div>
    <div v-else>
        你没有权限访问此页面
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {  //定义数据
        role: "super_admin", //改变参数有不同效果
    },
});

Vue学习-08.计算属性

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <th>学科</th>
        <th>分数</th>
        </thead>
        <tbody>
        <tr>
            <td>数学</td>
            <td><input v-model.number="math"></td>
        </tr>
        <tr>
            <td>物理</td>
            <td><input v-model.number="physics"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input v-model.number="english"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>
        </tr>

        <tr>
            <td>平均分</td>
            <td>{{avg}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {  //定义数据
        math: 79,
        physics: 98,
        english: 88,
    },

    computed: { //计算属性
        sum: function () {
            return this.math + this.physics + this.english;
        },
        avg:function () {
            return Math.round(this.sum / 3);
        }
    }
});

3. 效果图

Vue学习-09.全局及局部组件

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="seg1">
    <alert></alert>
</div>
<div id="seg2">
    <alert></alert>
</div>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容


var alert_component = {
    template: '<button @click="on_click">弹弹弹</button>',
    methods: {
        on_click: function () {
            alert("弹弹弹")
        }
    }
}

new Vue({
    el: "#seg1",
    components : {
        alert: alert_component,
    }

})

3. 效果图

Vue学习-10.配置组件

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .liked{
            background-color: cyan;
        }
    </style>
</head>
<body>

<div id="app">

    <like></like>
</div>

<template id="like-component-tpl">
    <button :class="{liked: liked}" @click="toggle_like()">
        ~\(≧▽≦)/~{{like_count}}
    </button>
</template>

<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容


var like_component = {
    template: '#like-component-tpl',  //模板对应id
    data: function () {
        return{
            like_count: 10,
            liked: false,
        }
    },
    methods:{
        toggle_like: function () {
            if(!this.liked)
                this.like_count ++;
            else
                this.like_count --;
            this.liked = !this.liked;
        }
    }
}

new Vue({
    el: "#app",
    components : {
        like: like_component,
    }
})

3. 效果图

Vue学习-11.父子通信

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <user username="www"></user>
</div>


<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容


var user_component = {
    template: '<a :href="\'/user/\'+ username">{{username}}</a>',
    props: ['username'],
    methods: {

    }
}

new Vue({
    el: "#app",
    components : {
        user: user_component,
    }

})

3. 效果图

Vue学习-12.子父通信

1. html 页面

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <balance></balance>
</div>


<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>

2. js 内容


Vue.component('balance', {
    template: '<div><show @show-balance="show_balance"></show>' +
    '<div v-if="show">您的余额$33</div>' +
    '</div>',
    methods:{
        show_balance: function (data) {
            //打印传递的数据
            console.log(data);
            this.show = true;
        }
    },
    data: function () {
        return{
            show : false,
        }
    }
});
Vue.component('show', {
    template: '<button @click="on_click()">显示余额</button>',
    methods: {
        on_click: function () {
            //自定义触发事件
            this.$emit('show-balance', {a:1,b:2});
        }
    }
});



new Vue({
    el: "#app",
})

Vue初步学习一

Vue学习-01.基础数据绑定

1. html 页面代码

2. js代码

3. 效果图

Vue学习-02.v-for指令(数据迭代)

1. html 页面

2.js 代码

3. 效果图

Vue学习-03.v-bind指令(属性)

1. html 页面

2. js 内容

3. 效果

Vue学习-04.v-on指令(事件)

1. html 页面

2. js 内容

3. 效果图

Vue学习-05.v-model指令及其修饰符(重点)

1. html 页面

2. js 内容

3. 效果图

Vue学习-06. v-model在其他元素及类型上的用法

1. html 页面

2. js 内容

3. 效果图

Vue学习-07.控制流指令

1. html 页面

2. js 内容

Vue学习-08.计算属性

1. html 页面

2. js 内容

3. 效果图

Vue学习-09.全局及局部组件

1. html 页面

2. js 内容

3. 效果图

Vue学习-10.配置组件

1. html 页面

2. js 内容

3. 效果图

Vue学习-11.父子通信

1. html 页面

2. js 内容

3. 效果图

Vue学习-12.子父通信

1. html 页面

2. js 内容

3. 效果图

猜你喜欢