vue之用法

引入vue.js

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

绑定事件 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-2">
    <span v-bind:title="message">  // v-bind 绑定事件指令
        鼠标悬停几秒显示此处动态绑定的提示信息！
    </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app02 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>
</body>
</html>

条件判断 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-3">
    <span v-if="seen">  // v-if 判断指令，seen是true就展示
        看到我了！
    </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app3 = new Vue({
        el: "#app-3",
        data: {
            seen: true
        }
    })
</script>
</body>
</html>

循环 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: "#app-4",
        data: {
            todos: [
                {"text": "西瓜"},
                {"text": "苹果"},
                {"text": "西红柿"}
            ]
        }
    })
</script>
</body>
</html>

事件监听 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-5">
    <p>
        {{message}}
    </p>
    <button v-on:click="reverseMessage">反转信息</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app5 = new Vue({
        el: "#app-5",
        data: {
            message: "Hello Vue!"
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

监听输入框 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-6">
    <p>
        {{message}}
    </p>
    <input type="text" v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app6 = new Vue({
        el: "#app-6",
        data: {
            message: "Hello Vue!"
        }
    })
</script>
</body>
</html>

Vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-7">
    <ol>
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("todo-item", {  // 模板组件
        props: ['todo'],  
        template: '<li>{{todo.text}}</li>'
        }
    );
    var app7 = new Vue({
        el: "#app-7",
        data: {
            groceryList: [
                {id: 0, text: "苹果"},
                {id: 1, text: "西瓜"},
                {id: 2, text: "西红柿"}
            ]
        }
    })
</script>
</body>
</html>

相关阅读:
【转载】Android IntentService使用全面介绍及源码解析
 【转载】作为Android开发者，你真的熟悉Activity吗？
【转载】从使用到原理学习Java线程池
 Linux 基础知识+常见命令
 Python中的字典合并
 Python的__hash__函数和__eq__函数
 C#中实现Hash应用
 深入理解python元类
 Docker搭建Gitlab服务器
 python的加密方式
原文地址：https://www.cnblogs.com/aaronthon/p/9225910.html