vue 06 基础语法

1,模板语法 :vue.js实际上内置了一套模板引擎,它是数据驱动的,那么我们只需要关注我们的数据层,其次数据层面的内容发生改变了以后,我们对应的模板引擎里的语法也会同步的发生改变,因此我们的模板也是至关重要的,

1. Mustache语法:   {{msg}}  :和angular 的专用绑定语法是一样的.
2. Html赋值:  v-html="";在data里面定义一个字符串,这个字符串里面包括我们的html标签,他会把这个标签当作标签来输出, 而不是当作文本来输出.
3. 绑定属性: v-bind: id =""
4. 使用表达式:{{ok?"YES":"NO"}}
5. 文本赋值  :v-text =""
6. 指令  v-if  ="";
7. 过滤器:  {{message|capitalize}}和v-bind :id="rawld l formatld"

2.Class和Style的绑定

1. 对象语法:v-bind:class="{active:isActive,"text-danger":hasError}">
2. 数组语法:
3. style绑定对象语法:v-bind :style="{color:activeColor,fontSize:fontSize +"px"}"

3.条件渲染

1. v-if
2. v-else
3. v-else-if
4. v-show
5. v-cloak

4.事件处理器:

1. v-on:click="greet" 或者@click = "greet"
2. 事件修饰符:v-on:click.stop、v-on:click.stop.prevent、v-on:click.self、v-on:click.once.stop:阻止冒泡   。prevent:阻止默认事件，阻止按钮的默认事件，a链接，submit 默认事件。once只让他生效一次。self给某个div添加时间，子元素没有。
3. v-on:keyup.enter事件。

5.Vue组件

1. 全局组件和局部组件
2. 父子组件-数据传递
1. Parent---->Child    :pass  Props
2. Child  ---->Parent  :pass  Emit Events
3. 在vue里，为什么不允许子组件向父组件传递数据： 因为组件之间的嵌套会非常的复杂，如果说父组件嵌套了一个子组件，子组件又嵌套了一个第三方的组件,那么如果说这个是数据都是双向同步了,就会导致我们data 里的变量非常的混乱 ,所以说,vue只允许父组件里的数据流通到子组件里,但是不允许子组件修改父组件的变量,可以通过Emit这种方式变相的修改 .SPA的话是一个局部组件.多页面的话是全局组件.
3.Slot,面包