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,面包