Vue(2.x)之hello world

作者: BugMyGod | 来源:发表于2018-07-25 15:05 被阅读0次

Vue(2.x)之hello world
测试“OpenWrite”一文多发
从一个简单的button组件教你如何实现一套自己的ui框架
mxgraph vue 笔记（一）转
建立vue2.5工程
web前端框架vue之指令
Vue hello world
Vue Hello World
vue3项目搭建
常用markdown语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../css/css1.css">
    <title> 1-vue基础  --  hello world </title>
</head>
<body>

<h1 id="h1">hello vue.js</h1>
<div id="app">
    {{message}}
</div>

</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>
</html>

image.png

<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:"hello world"
        },
        beforeCreate:function () {
            console.log("vue beforeCreate....")
        },
        created:function () {
            console.log("vue created...")
        },
        beforeMount:function () {
            console.log("vue beforeMount...")
        },
        mounted:function () {
            console.log("vue mounted ....")
        },
        beforeUpdate:function () {
            console.log("vue beforeUpdate...")
        },
        updated:function () {
            console.log("vue updated ...")
        },
        beforeDestroy:function () {
            console.log("vue beforeDestroy...")
        },
        destroyed:function () {
            console.log("vue destroyed....")
        }
    })
</script>

控制台打印结果：（PS：注意拼写错误）

image.png

生命周期图：（很形象）

image.png

Vue.js 允许自定义过滤器：

<h1 id="h1">hello vue.js</h1>
<div id="app">
    {{message|capitalize}}
</div>

  var app = new Vue({
        el:'#app',
        data:{
            message:'abcdefg'
        },
        filters:{
            capitalize:function (value) {
                if (!value){
                    return ''
                }else {
                    value = value.toString();
                    return value.charAt(0).toUpperCase()+value.slice(1);
                }
            }
        }
    })

image.png

缩写：
v-bind

<div v-bind:href="url"></div>
<div :href="url"></div>

v-on

<div v-on:click="doit"></div>
<div @click="doit"></div>

计算属性：

<div id="eg">
    <p>old:{{message}}</p>
    <p>computed:{{reversedMessage}}</p>
</div>

  var vm = new Vue({
        el:'#eg',
        data:{
            message:'hello'
        },
        computed:{
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
            }
        }
    })