vue -- 搭建环境，模板语法，数据绑定

用script的方式创造一个vue项目

在官网下载vue.js，以如图所示的方式部署

image.png

创建第一个vue应用

    
    
    


    

        
        {{ message }} {{ name }}
    
    

• 想让vue工作，必须创建一个vue实例，而且要传入一个配置对象
• root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
• root容器里的代码被称为vue模板
• vue实例和容器是一一对应的
• 真实开发中只有一个vue实例，并且会配合着组件一起使用
• {{ xxx }}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
• 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

注意区分js表达式和js代码（语句）

1. 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方

• a
• a+b
• demo(1)
• x === y ? 'a' : 'b'

2. js代码

• if(){}
• for(){}

    
    
    


    

        
        

            
im {{ name }}

            
my age is {{ age }}
        
    
    

vue模板语法

vue 模板语法有2大类：

1. 插值语法

• 功能：用于解析标签体内容。
• 写法：{{ xxx }}。xxx是js表达式，且可以直按读取到data中的所有属性

2. 指令语法

• 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件...）
• 举例：v-bind:href="xxx” 或 简写为 ：href="xxx"，xxx同样要写is衣达式。 且可以直接读取到data中的所有属性。
• 备注：vue中有很多的指令，且形式都是：V-??，此处我们是拿v-bind举个例子。

        
        

            
插值语法
            
hi {{ name }}
            
指令语法
            
            click to study
            click to study
        
    

另一种是之前的写法

• data

        //data的两种写法
        new Vue({
            el:'#root',
            //data的第一种写法，对象式
            // data:{
            //     name: 'dkw'
            // }
            //data的第二种写法，函数式
            data:function () {//不能写成箭头函数，因为箭头函数的this是全局变量，window
                console.log('@@@',this) //此处this是vue实例对象
                return{
                    name:'dkw'
                }
            }
        })

image.png