Vue.js基础用法示例-优快云博客

本文链接：https://blog.youkuaiyun.com/tongkongyu/article/details/116564944

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 基本使用 <一> -->
    <div id="app">
        <!--插值表达式：1.将数据填充到HTML标签中 2.支持基本的计算操作-->
        <div>{{msg1}}</div>
        <div>hello - {{msg2}}</div>
        <div>{{1 + 2}}</div> <!-- 3 -->
        <div>{{msg3 + '----' + 123}}</div> <!-- Hello----123 -->
        <div>{{details()}}</div> <!-- Hello Vue and hello world!-->
    </div>
    <script>
        /*
            Vue的基本使用步骤：
                1.需要提供标签用于填充数据
                2.引入vue.js库文件
                3.可以使用vue的语法做功能了
                4.把vue提供的数据填充到标签里
            Vue编译过程：
                vue的代码经过Vue框架编译成原生js代码
        */
        var vm = new Vue({
            el: '#app', // el : 元素挂载位置（值可以是CSS选择器或者DOM元素）
            data: { // data : 模型数据（值是一个对象）
                msg1: 'Hello Vue',
                msg2: 'world',
                msg3: 'Hello'
            },
            methods: { // methods : 用来定义函数
                details: function () {
                    return this.msg1 + ' and hello world!';
                }
            }
        });
    </script>

    <hr>
    <!-- 基本使用 <二> -->

    <div id="vue_det">
        <p>site : {{site}}</p>
        <p>url : {{url}}</p>
        <p>Alexa : {{alexa}}</p>
    </div>
    <script>
        // 数据对象
        var data = {
            site: '菜鸟教程',
            url: 'www.runoob.com',
            alexa: 1000
        }
        var vm = new Vue({
            el: '#vue_det',
            data: data
        })
        // 两者引用相同的对象
        console.log(vm.site === data.site);
        // 设置属性会影响到原始数据
        vm.site = 'Runoob';
        console.log(vm.site);
        data.alexa = 123;
        console.log(vm.alexa);
        //除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
        document.write(vm.$data === data) // true
        document.write("<br>")
        document.write(vm.$el === document.getElementById('vue_det')) // true
    </script>
</body>

</html>