Vue入门

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表示改变后的内容

生命周期和钩子函数

created钩子函数

mounted钩子函数