hello案例的引入、模板语法、数据绑定、el与data的两种写法

hello案例引入

1、容器与vue实例之间必须是一一对应的关系，当我们需要处理一个容器中的uoge对象时会需要用到组件。

2、容器中双括号内{{xxx}}必须存放一个js表达式，里面的xxx可以自动读取到date中的所有属性，在此基础上你可以使用js的一些方法，比如xxx.toUpperCase()；

        引出问题：js表达式和js代码（语句）？

                （1）表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方。通俗来说，就是一个可以得到结果的语句。

                （2）js代码（语句）：它包含了js表达式，它的范围就不仅仅局限于可以生成值的语句，一个条件判断语句同样可以成为js代码。

3、data中的数据一旦发生改变，页面中用到该数据的地方也会自动更新。

           

模板语法   

1、vue指令的特点：v-开头

        指令语法：形式都是：v-xxx 。例子：v-bind：将之后遇见的标签属性当作js表达式来处理。v-bind: 可以简写成 : 。指令语法用于解析标签（包括但不限于标签属性、标签体内容、绑定事件）

        插值语法：就是{{}}中插入一个值，这个值可以在vue中被管理。用于解析标签体内容

2、多级结构的应用需要注意，调用时有点类似c中结构体的形式

数据绑定

1、什么叫做绑定？简单来说就是在数据和页面值之间建立连接

        单向绑定：v-bind，vue中数据改变会直接影响页面值的变化，但是反过来不成立

        双向绑定：v-model（全称：v-model:value），数据和页面值可以相互影响，但是v-model的限制在与只能用于表单类元素（输入型元素）
        这不禁让我想到了c语言中对于变量的直接引用和引用地址之区别el

el与data的两种写法

1、el的两种写法（都可以）

（1）el: +标签；

（2）对象+.$mount('标签')；

2、data的两种写法：

 （1）对象式：

                date:{

                        xxxxxx；

                }

        （2）函数式：将来主要用函数式

                data:function(){

                return{}

                }

3、vue管理的函数一定不能写成箭头函数，否则this就不再是vue实例而是Window