Vue.js系列一

Posted 2020-08-31

一、什么是Vue.js

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、入门

引入类库文件：<script src="https://unpkg.com/vue/dist/vue.js"></script>

第一个demo:

html:

<div id="app">
       <p>{{ message }}</p>
</div>

js:

onload = function () {
    new Vue({
        el:"#app",
        data:{
            message:"hello world"
        }
    });
}

结果： hello world

三、使用

1、双向绑定

html:

<div id="app">
       <p>{{ message }}</p>
       <input v-model="message">
</div> 

js同上。

效果：当文本框里面的东西改变时，p标签的内容也改变。

2、列表渲染

html:

    <ul id="example-1">
        <li v-for="item in items">
             {{item.message}}
        </li>
    </ul>

js:

onload = function () {
    var example1 = new Vue({
        el: ‘#example-1‘,
        data: {
            items: [
                { message: ‘Foo‘ },
                { message: ‘Bar‘ }
            ]
        }
    })
}

结果：

• Foo
• Bar

3、处理用户输入

html:

<div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">翻转</button>
    </div>

js：

onload = function () {
    new Vue({
        el: "#app",
        data: {
            message: "hello world"
        },
        methods: {
            reverseMessage: function () {
                this.message=this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    });
}

结果：当点击按钮的时候字母就可以翻转

4、以上综合

html：

    <div id="app">
        <input v-model="newTodo" v-on:keyup.enter="addTodo" />
        <ul>
            <li v-for="todo in todos">
                <span>{{todo.text}}</span>
                <button v-on:click="removeTodo($index)">X</button>
            </li>
        </ul>
    </div>

js:

onload = function () {
    new Vue({
        el: "#app",
        data: {
            newTodo: "",
            todos: [
                { text: "add some todos" }
            ]
        },
        methods: {
            addTodo: function () {
                var text = this.newTodo.trim()
                if (text) {
                    this.todos.push({ text: text })
                    this.newTodo = ""
                }
            },
            removeTodo: function (index) {
                this.todos.splice(index, 1)//splice(删除的位置，删除的数量)
            }
        }
    });
}

效果：