Vue入门笔记-基本指令

Vue基本指令

v-html: 会把HTML字符串渲染成标签

v-text: 会把HTML标签渲染成字符串

v-if v-else: 必须用在相邻的兄弟元素

v-if：通过是否渲染元素来决定显示；

v-show: 通过display属性来决定

注：如果需要频繁显示切换，用v-show

v-for : 用 in 或者 of 都可以遍历 数组，对象，字符串，具体数字

数组响应式更新需要用到数组的api修改，直接修改DOM元素不会响应式更新

v-pre: 在模板中跳过vue的编译，直接输出原始值。

<div v-pre>{{msg}}</div>            - - - 网页中显示 {{msg}}

v-cloak: 存在于vue实例化之前，实例化之后自动消失(可利用它让元素一开始隐藏，有vue实例化之后显示)

CSS: [v-cloak] { display:none; }     - - - 让含有v-cloak属性的vue实例化之前的元素隐藏

HTML: <div id="app" v-cloak> {{str}} </div>

v-once: 只进行一次DOM渲染

注：v-pre v-cloak v-once 后面都不用跟表达式，直接写入标签

v-bind: 绑定任意属性，包括自定义属性 v-bind:src 可简写为 : src

class 和 style 绑定：

Style： <div :style="Bian"></div>                        - - - 直接使用Bian变量
        <div :style="{ width: divWidth }"></div>         - - - 绑定一个对象
Class： <div :class=" active ? 'oneClass' : '' " ></div> - - - 三元运算符绑定
        <div :class="[one, two, 'three' ]" ></div>       - - - 绑定数组
        <div :class="[one, two, {thr：three} ]" ></div>  - - - 数组里嵌套对象
        <div :class="[one, two]" class='three'></div>    - - - 绑定class和原生class共存

v-model:表单 、 及 元素上创建双向数据绑定 。负责监听用户的输入事件以更新数据 ，触发后将输入框的值与数据进行同步

使用checkbox时：
1.v-model里的值在data赋值 false or true 实现同意阅读 继续下一步
2.v-model里的值在data赋值 数组 实现多选

事件修饰符：lazy:输入框事件转变为使用 change 事件进行同步

   number：将用户的输入值转为数值类型 

   trim:自动过滤用户输入的首尾空白字符

methods: 方法绑定事件的时候

• 不加小括号，函数第一个形参默认事件对象
• 加小括号，括号内写：$event - >函数接收默认事件对象

变异方法：Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组：filter()、concat() 和 slice()

computed: 计算属性是一个对象，在里面写方法，方法名直接使用，它的值就是这个方法的返回值

 计算属性有 -get 和 -set 方法 ，set( val)  val - 就是当前方法所处对象的值

 计算属性有缓存依赖

 使用方法不传递参数 -》 方法本身有参数，默认为原生对象event

 使用方法传递参数，需传递$event -》 方法参数才是原生对象event

watch:watch是监听器，只要数据被修改了就会重新渲染

 watch一般用来监听某个值的变化然后进行一些操作，可能并不需要得到新的值

 watch里的方法有两个默认参数，第一个参数：新值 ，第二个参数：旧值

v-on:事件修饰符：

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 当元素发生冒泡时 ，谁有该事件修饰符，就先触发谁。
• .self - 只当事件在该元素本身 (比如不是子元素) 触发时触发回调
• .once - 只触发一次回调
• .passive - 该修饰符表示就是设置{passive:true}，表示处理事件函数中不会调用preventDefault函数，就会减少了额外的监听，从而提高了性能；所以不能和.prevent修饰符一同使用，否则浏览器会报错。
• {keyCode | keyAlias} - 监听组件根元素的原生事件