Vue.js 起步

Vue.js 起步
每个Vue应用都需要通过实例化Vue来实现。
语法格式如下：

var vm = new Vue({
	//选项
})

提问：
（1）实例化vue有什么作用呢？为什么要实例化，是为了new 一个对象吗？然后操控对象中的数据吗？

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello,北京！',
            }
        })
    </script>
</body>
</html>

可以看到在Vue的构造器中有一个el参数，它是DOM元素中的id。在上面的实例中id是app，在div元素中

<div id='app'></div>

这意味着我们所改动的东西都在此div内，div外不受影响。
接下来我们看看如何定义数据对象。

data 用于定义属性，实例中的属性为message。
methods 用于定义的函数，可以通过return来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

提问：
（2）有些函数需要return，有些函数为什么不需要return？
我的理解是有些需要返回一个东西，这个需要return，有些不需要返回东西就可以不return；不return的话就返回undefined。
比如：

function test() {
	return ''我喜欢你;
}

这个需要return一个我喜欢你。

function test() {
	let a = 1;
	let b = 2;
	let c;
	c = a + b;
}

这个不需要返回，就不需要return；

<div id="app">
    <h1>标题: {{ title }}</h1>
    <p>路径：{{ url }}</p>
    <p>信息:{{ message }}</p>
    <p>{{ details() }}</p>
</div>

当一个Vue实例被创建时，它向Vue的响应式系统中加入data对象所有的属性，当这些属性的值发生改变时，html视图也会发生相应的变化。
提问：
（3）如何理解vue中的this和用法？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
<body>
    <div id="app">
        <h1>标题: {{ title }}</h1>
        <p>路径：{{ url }}</p>
        <p>信息:{{ message }}</p>
        <p>{{ details() }}</p>
    </div>
    <script>
        var data = {
                title: '学习vue',
                url: 'www.baidu.com',
                message: 'hello,北京！',
        };
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                details: function(){
                    return this.title+ ',' + '学的不仅是技术，而是梦想';
                }
            }
        })
        //它们引用相同的对象
        document.write(vm.title === data.title); //true
        document.write('<br />');
        //设置属性也会影响到原始数据
        vm.title = '我不想吃饭';
        document.write(vm.title + '<br />');
    </script>
</body>
</html>

除了数据属性，Vue实例还提供了一些有用的实例属性和方法，它们都用$，以便与用户自定的属性区分开来。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
<body>
    <div id="app">
        <h1>标题: {{ title }}</h1>
        <p>路径：{{ url }}</p>
        <p>信息:{{ message }}</p>
        <p>{{ details() }}</p>
    </div>
    <script>
        var data = {
                title: '学习vue',
                url: 'www.baidu.com',
                message: 'hello,北京！',
        };
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                details: function(){
                    return this.title+ ',' + '学的不仅是技术，而是梦想';
                }
            }
        })
        document.write(vm.$data === data); //true
        document.write('<br />');
        document.write(vm.$title); //undefined why???
        document.write('<br />');
        document.write(vm.$el === document.getElementById('app'));
    </script>
</body>
</html>

猜你喜欢