Vue(一)

目录

Vue(一)

MVVM

  • Model：模型层，在这里表示JavaScript对象
  • View：视图层，在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件，Vue.js就是这一层的实现者
    • 向上与视图层进行双向数据绑定
    • 向下与Model层通过接口请求进行数据交互

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--View层 模板-->
<div id="app">
    {{message}}
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        /*Model层 数据*/
        data: {
            message: "hello, vue!"
        }
    });
</script>

</body>
</html>

基本语法

v-bind

  • 可以使用v-bind来实现数据绑定
<div id="app">
    <span v-bind:title="message">
        鼠标悬停，查看绑定信息
    </span>
</div>
  • 前缀为v-的属性称为指令，是Vue提供的特殊属性

v-if，v-else

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>

v-for

<div id="app">
    <li v-for="(item, index) in items">
        {{index}}: {{item.message}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'A'},
                {message: 'B'},
                {message: 'C'}
            ]
        }
    });
</script>

事件处理

v-on

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "Hi"
        },
        methods: {
            sayHi: function (e) {
                alert(this.message);
            }
        }
    });
</script>

双向绑定

v-model

  • 可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素
<div id="app">
    输入的input：<input type="text" v-model="message1"/> {{message1}}
    <br/>
    输入的textarea：<textarea v-model="message2"></textarea> {{message2}}
    <br/>
    性别：
    <input type="radio" name="sex" value="男" v-model="checked" /> 男
    <input type="radio" name="sex" value="女" v-model="checked"/> 女
    <p>
        选中了：{{checked}}
    </p>
    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>
        选中了：{{selected}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message1: "",
            message2: "",
            checked: "",
            selected: ""
        }
    });
</script>

组件

  • 组件是一组可复用的Vue实例
<div id="app">
    <my-component v-for="item in items" v-bind:message="item"></my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("my-component",{
        props: ['message'],
        template: "<li>{{message}}</li>"
    });

    let vm = new Vue({
        el: "#app",
        data: {
            items: ["Java", "Linux", "前端"]
        }
    });
</script>
posted @ 2021-02-08 22:14  一天到晚睡觉的鱼  阅读(83)  评论(0)    收藏  举报