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