Vue基本使用

2020-01-12

字数统计: 1.3k字 | 阅读时长: 6分

Vue 基本使用

指令、表达式
插值、动态属性
v-html:会有 xss 风险，会覆盖子组件

<p>文本插值{{msg}}</p>
<p>js表达式{{flag?true:false}}</p>
<p :id="dynamic">绑定的动态id{{msg}}</p>
<p v-html="rewhtml">容易导致 XSS 攻击</p>
<a v-on:[dynamic]="doSomething"> 动态事件 </a>

computed、watch
computed 有缓存，data 不变则不会重新计算
wacth 默认浅监听
watch 监听引用类型需要深度监听，拿不到 oldval
class 和 style
使用动态属性
使用驼峰式写法

<p :class="{{black :isblack}}">判断是否</p>
<p :class="[black,yellow]">使用class数组</p>
<p :class="styleData">使用style</p>
data(){ return{ isblack:true, black:"black", yellow:"yellow", styleData:{
fontSize:"40px",//转化为驼峰式 color:"red", backgroundColor:"#ccc" } } }

条件渲染
v-ifv-else 的用法,可使用变量,也可以使用===表达式
v-if 和 v-show 的区别
v-if 和 v-show 的使用场景
v-if 条件满足就渲染,条件不满足不渲染
v-show 条件满足就渲染,条件不满足的使用 display:none 但还是渲染
v-if 有更高的切换开销,v-show 有更高的初始渲染开销。
如果需要频繁切换,则使用 v-show 较好，如果运行条件不太可能改变,使用 v-if 较好

循环列表渲染
key 的重要性，key 不能乱写（random 或 index）
vo-for 和 v-if 不能一起使用

<ul>
  遍历数组
  <li v-for="(item,index) in listarr" :key="item.id">
    {{item.title}}
  </li>
</ul>
遍历对象
<ul>
  <li v-for="(val,key,index) in listObj" :key="key">
    {{val.title}}
  </li>
</ul>

事件
event 参数，自定义参数
事件修饰符，按键修饰符
观察事件被绑定到哪里

<button @click="add1">+1<button>
methods(){
    add1(event){
        打印出原生的event对象
        console.log(event,event.__proto__.constructor)
        打印出事件在哪个dom元素上监听
        console.log(event.target)
        打印出事件在哪个dom元素触发
        console.log(event.currentTarget)
        //event是原生的
        //事件被挂载到当前元素
    }
}

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!-- Alt或Shift被一同按下也会触发-->
<button @click.ctrl="onClick">a</button>
<!-- 只有Ctrl被按下时触发-->
<button @click.ctrl.exact ="onCtrlClick">a</button>

表单
v-model
表单项 textarea checkbox radio select
修饰符 lazy number trim

<!-- 截取前后空格 -->
<input v-model.trim="name" />
<!-- 在“change”时而非“input”时更新  -->
<input v-model.lazy="name" />
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number" />
<textarea v-model="msg"></textarea>
<!-- <textarea>{{msg}}</textarea>在vue中是不被允许的 -->
<!-- 单个复选框，绑定到布尔值 -->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
<!-- 多个复选框，绑定到同一个数组： -->
<div id="example-3">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 单选框 -->
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<!-- 多选时 (绑定到一个数组)：-->

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br />
  <span>Selected: {{ selected }}</span>
</div>