myVueNode

一 Vue特性

1.数据绑定

2.组件化

<div id="myVue">{{message}}</div>

var myVue = new Vue({
        el: "#myVue",
        data: {
            message: "hello"
        }
    })

Vue.js 的使用都是通过构造函数 Vue({option}) 创建一个 Vue 的实例：
var vm = new Vue({})。一个 Vue 实例相当于一个 MVVM 模式中的

2.1.1 vue模板

el:类型为字符串，DOM元素或函数。作用是为实例提供挂载元素。

template:类型为字符串,默认会将temlpate元素替换挂载元素并合并挂载元素和模板根节点的属性（如果属性具有唯一性，类似 id，则以模板根节点为准）。如果 replace 为 false，模板 template 的值将插入挂载元素内。通过 template 插入模板的时候，

挂载元素的内容都将被互联，除非使用 slot 进行并发

div class="tpl">my name is lbb</div>
<script id="tpl" type="x-template">
    <div class="tpl">my name is lbb</div>
</script>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#myVue",
        template: "#tpl",
    })
</script>

2.1.2 vue数据

Vue.js 实例中可以通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定
并使用。需要注意的是，如果传入 data 的是一个对象，Vue 实例会代理起data 对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们也可以引用 Vue 实例 vm 中的 $data 来获取声明的数据

<div id="myVue">{{text}}</div>
<script type="text/javascript">
    var dataArr = {
        "text": "1"
    }
    var vm = new Vue({
        el: "#myVue",
        data: dataArr
    })
    vm.$data === dataArr;//true
    vm.a === dataArr.a;//true
    //设置属性也会影响到原始数据
    vm.a = 2;
    data.a;// 2
    //反之亦然
    data.a = 5;
    vm.a;// 5 
</script>

需要注意的是，只有初始化时传入的对象才是响应式的

2.1.3 方法

我们可以通过选项属性methods对象来定义方法，并且使用v-on指令来监听DOM事件

　　另外，Vue.js 实例也支持自定义事件，可以在初始化时传入 events 对象，通过实例的
　　$emit 方法进行触发。这套通信机制常用在组件间相互通信的情况中，例如子组件冒泡触发父组件事件方法，或者父组件广播某个事件，子组件对其进行监听等

<button v-on:click="alert">alert</button>
<script type="text/javascript">
    var vm = new Vue({
        el:"#mu",
        data: {
            a:1
        },
        methods:{
            alert: function(){
                alert(this.a);
            }
        },
        events: {
            'event.alert': function(){
                alert("event.alert"+this.a)
            }
        }
    })
    vm.$emit('event.alert');
</script>

2.1.4生命周期钩子

Vue.js 实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑

猜你喜欢