Vue基础总结（未完结）

Vue

• 渐进式前端js框架；适合做前端分离的项目；Angular指令优势；react组件优势
• 特点：简单入门容易；中文文档齐全；生态发达（插件多）
  安装
• src引入

<script src="xxx/vue.js"></script>

• npm安装
  npm i @vue/cli
  实例化

new Vue({
  el:"指定模板",
  data:{存放vue实例的数据}
})

vue指令

// v-开头特殊html属性
// vue的指令连接了html模板与vue实例数据
// 指令的值是单个html 
v-text="5+8";
v-text="msg.length";
v-text="5>8?'yes':'no'";
v-text="msg.split('').reverse().join('')";
// 指令的参数:参数名
v-bind:title="msg"
v-bind:disabled="!can"

文本渲染指令

• {{ }}
• v-text=“指令的值”
• v-html=“含html的文本”

属性渲染指令

• v-bind:title=“msg”
• 简写:
  :title=“msg”

条件渲染

• v-if=“表达式”
  当表达式为真的时候显示；为假的时候隐藏

• v-else-if 多重条件

• v-else 通常与v-if搭配使用

• v-show=“表达式”
  v-show 通过css方式隐藏
  v-if 通过直接移除dom结构隐藏
  频繁切换用v-show,反之用v-if

表单绑定指令

• v-model

事件绑定

• v-on:事件名=“事件处理函数”
  v-on:click=“showMsg”
  v-on:click=“showMsg()”
• @click=“showMsg” 简写
• 事件处理函数
  method:{
  showMsg();
  }
• 如果响应函数带括号默认 不带 $event时间参数
• 如果响应函数不带括号默认 会带$event事件参数
• 如果带括号（$event）手动指定事件参数