一、Hello World

1-1、示例1

Vue03-HelloWord插图

1、现有html容器;

2、再有vue实例。

new Vue({});中的{}是配置对象。配置对象是:key:value的格式。

el:element元素。id对应#,class对应.

 

把容器中变化的数据,交给Vue实例去保管:

Vue03-HelloWord插图(1)

const x多余,去掉即可。

1-2、示例2




    
    Title

    
    
    



    
    
        {{message}}
    

    


浏览器展示:

Vue03-HelloWord插图(2)

双向绑定:ViewModel层

Vue03-HelloWord插图(3)

 不用刷新页面,就能展示页面信息的变化。vue不改变DOM对象,是虚拟DOM

 

1-3、小结

Vue03-HelloWord插图(4)

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

二、Hello 案例分析

2-1、一个Vue实例,不能同时接管两个实例

Vue03-HelloWord插图(5)

页面展示:

Vue03-HelloWord插图(6)

只接管第一个实例。

2-2、多个实例不能对应一个容器

Vue03-HelloWord插图(7)

Vue03-HelloWord插图(8)

2-3、一个Vue实例对应一个容器

容器和Vue实例的关系是:一一对应! 

Vue03-HelloWord插图(9)

三、注意

3-1、Vue的组件简介

以后开发的时候,一个.Vue文件中,只有一个容器,和一个Vue实例。当容器中需要维护的数据很多时,可以如下分配:

Vue03-HelloWord插图(10)

用多个组件管理。

3-2、JS表达式 VS JS代码

HTML容器中,并不是Vue实例有什么,容器才能放什么。

Vue03-HelloWord插图(11)

页面展示:

Vue03-HelloWord插图(12)Vue03-HelloWord插图(13) 

Vue03-HelloWord插图(14) 

页面展示:

Vue03-HelloWord插图(15)

3-3、小结

Vue03-HelloWord插图(16)

本站无任何商业行为
个人在线分享 » Vue03-HelloWord
E-->