Vue
#Vue的核心思想: 数据模型和视图绑定，绑定之后我们要操作视图（标签）那么就可以直接操作数据模型
Vue的入门语法
引入vue
一定要写一个区域，用于使用vue
在该区域下方编写script标签，在里面new Vue()
往Vue中传入json
“el”:"#区域的id"
"data"表示数据模型
"methods"表示声明的函数
“watch”表示添加的监听
Vue绑定标签体的文本: 使用插值表达式 {{数据模型}}
Vue绑定属性
v-bind:属性名=“数据模型”
可以简写成 :属性名=“数据模型”
Vue双向绑定
只能使用在表单项的value属性中
语法:
v-model:value=“数据模型”
可以简成 v-model=“数据模型”
Vue的条件渲染
v-if和v-else
v-show
Vue的列表渲染
使用场景:用来显示数组
使用语法
v-for="(遍历出来的元素,下标) in 要遍历的数据模型"
事件驱动
语法
v-on:事件名=“函数”
可以简写成 @事件名=“函数”
函数声明
“methods”:{
“函数名”:function(){},
函数名(){}
}
事件的其它内容
- 阻止默认
- event.preventDefault()
- @click.prevent
- 阻止冒泡
- event.stopPropagation()
- @click.stop
属性侦听
“watch”:{
“要监听的数据模型”:function(inputValue){}
}
inputValue表示改变后的内容
