一: Vue是单页面的应用 渲染页面也是采用插值语法 -->
1插值语法:
{{}}解析标签体的内容 列如:{{}}
1.创建Vue实例时:el(挂载点),data(数据),methods(方法)
2. v-on指令的作用是事件绑定,简写为@
3.方法中通过this,关键字获取data中的数据
4.v-text指令的作用:设置元素的文本值,简写为{{}}
5.{{}}里面还可以写表达式{{msg.substring(0,4)}}
6: Vue的判读语句后面支持变量 也支持直接写布尔值 v-if v-else-if v-else
7:v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引
循环的时候需要加key key最好时候对象里面的属性 如果没有再使用index-->
v-for 使用in 和 of 都可以
复制代码
2:指令语法
解析标签 包括标签属性 标签体的内容 绑定事件...
1:v-bind表示属性使用动态变量 可以简写: 他是单向绑定 data流向页面
class对象里面的key 表示类名
bind对象里面的key 表示属性名
列如:
<h1 v-bind:class="{red:flag}" @click="flag=!flag" >我什么都不爱学</h1>
<h1 v-bind:style="{color:flag?'red':'',}" @click="flag=!flag" >我都不爱学</h1> -->
**2:v-model:双向绑定data流向页面 也可以页面流向data 不过只能应用于表单类元素**
3:Vue传参直接在点击事件后面()写
例如:<ul>
<li v-for="(item,index) in arr"
:key="item.id"
@click="choose(index)"
:style="{color:item.flag?'red':'',}"
>{{item.title}}
</li>
</ul>
4:@keyup后面可以接修饰符 .enter .keyCode值
复制代码