Vue基本架构

初识Vue

    
    
    
    
    


    

        
        
{{msg}}
    
    

效果：

 

注意：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2.content容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3.content容器里的代码被称为Vue模板
4.Vue实例与容器是一一对应的
5.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
6.一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

基本结构：

    
    
    
    


    

        
Hello,{{msg}}!
    
    
    

效果：

总结：

1.el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，尽量使用id选择器

2.data用于存储数据，数据供el所指定的容器去使用

3.我们可以使用methods属性给Vue定义方法

模板语法：

    
    
    
    


    

        
你好，{{msg}}
        学习Vue
    
    
    

效果：

总结：

Vue模板语法包括两大类：

1.插值语法

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性