Vue那些事之基础

Vue.js

Vue.js是一套构建用户界面的渐进式框架。

● 渐近式框架：由浅入深、由简单到复杂地使用。
● 优势：代码体积小，基于虚拟DOM，数据双向绑定，生态圈繁荣。
● 可以胜任Web开发、移动端开发、跨平台APP开发。

安装Vue

一种是使用cdn加速器进行安装

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

一种是在npm的安装

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建一个Vue实例

<script>
    console.log(Vue)  // Vue 是一个类
    // 创建一个vue实例
    // {} 所包裹的内容，叫做选项
    var app = new Vue({
      el: '#app',  // 挂载
      // 声明式变量（具有响应式功能、双向绑定）
      // 1-当data中的变量发生变化时，页面DOM自动更新
      // 2-当被绑定在页面的这个变量发生DOM更新时，data中的数据也自动更新
      data：{
		//这里写你想要写的内容
	}
      })

Vue的指令

指令的值必须是表达式，不能是语句

【文本类指令】
● v-text ，用于把文本的值渲染在Dom上，比如字符串或者数值。
● {{ }}，文本插值，也可以把字符串或者数值渲染在Dom上，其缺点就是有{{ }}一闪而过的问题。
● v-html ，用于渲染纯html字符串，浏览器可以解析这些字符串，可以防止XXS，CSRF攻击

【v-bind】
v-bind :class 、v-bind:style是动态属性，动态样式
他们支持数组语法，也支持对象语法

<div :class="color" class="color">2020</div>
<div :class="[isCol ? 'red' : 'green', font]" class="color">2020</div>
<div :class="{'red': isCol, 'font-class': !isCol}" class="color">2020</div>
<div :style="[aStyle, bStyle]">2020</div>
<div :style="{'font-size': size+'px', 'color': col }">2020</div>
  // :class='' 是一组 class类名
  // :style='' 是一组 “css属性-css属性值”的键值对

【v-on】
v-on用于绑定js事件处理器，简写方式 v-on:click，简写 @click，
灵活使用事件修饰符，键盘修饰符

<div @click='say("hi", $event)'></div>
.stop//是阻止冒泡
.prevent//阻止默认事件
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发。
.right -  只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器

【v-model】
v-model，用于绑定表单，可以让我们非常方便地取到表单的值
表单修饰符
v-model 等价于 v-bind:value+v-on:input

 <!-- .trim 的使用 -->
 <input type="text" v-model.trim='username'>
 //把文本类表单绑定的值，去除前后的空字符串
 
 <!-- .number 的使用 -->
 <input type="text" v-model.number='num'>
 <input type="text" v-model.number='price'>
 <button type="button" @click='calc'>总价</button>
 //.number 可把文本类数字字符，自动转化成数值类型

<!-- .lazy 的使用 -->
<input type="text" v-model.lazy='desc'>
//这个修饰符的作用，当表单失焦时，才同步更新 data中被绑定的变量，以达到性能优化的目的

【v-for】
v-for的第一个作用，就是用于列表数据的渲染，其语法 v-for=’(item,index) in array’
v-for的第二个作用，是用于对象数据的遍历渲染

<!-- 列表渲染 -->
<div v-for='(item,idx) in list'>
      <span v-text='idx'></span>
      <span>-</span>
      <span v-text='item.id'></span>
      <span>-</span>
      <span v-text='item.task'></span>
</div>
 <!-- 对象遍历与渲染 -->
<div v-for='(value, key, index) in user'>
      <span v-text='index'></span>
      <span>-</span>
      <span v-text='key'></span>
      <span>:</span>
      <span v-text='value'></span>
</div>

【v-if v-else-if v-else】
它们的作用就用来实现动态显示与隐藏，切换显示与隐藏，只是简单地给目标添加display=none/block的CSS属性，其性能损耗更小

重点区分v-if 和 v-show的区别
● 前者条件为false时，元素将从DOM中被移除
● 后者是用display:none来实现显示隐藏的

【v-show】
切换显示与隐藏，只是简单地给目标添加display=none/block的CSS属性，其性能损耗更小