Vue-笔记一

1. Vue常用指令：

{{ }}  差值表达式，会将数据解释为文本

v-html 可以输出真正的html

v-if  <h6 v-if="seen">6级标题</h6>

v-for 遍历数组或者对象  <li v-for="value in arrs">{{ value }}</li>

v-on:click=”方法名” 缩写为：@click=”方法名”

v-bind:name=”message” 缩写为：:name=”message”

v-once 执行一次的插值，当数据再次改变，插入的值将不会更新

2. 计算属性：computed ， 方法：methods

计算属性 VS 方法：

两种方式的最终结果是一样的，不同的是计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。只要message没有发生改变，多次访问reversemessage1，计算属性会立即返回之前的计算结果，不必再次执行函数。但是每当触发重新渲染时，调用方法将总会再次的执行函数。

3. class与style的绑定：

(1) 根据isActive和hasError的值判断是否显示样式。而且v-bind:class指令也可以和普通的class属性共存。

      在对象中传入更多属性实现动态切换多个class。

      <div v-bind:class="{ active: isActive, 'test-danger': hasError }">样式显示或者隐藏</div>

      也可以传入一个class对象实现动态切换多个class。

      <div v-bind:class="classObj">样式显示或者隐藏111</div>

       

      也可以绑定一个返回对象的计算属性。

      

     把数组传给v-bind:class，以应用一个class列表。

    <div v-bind:class="[activeClass, errorClass]">把数组传给v-bind:class，以应用</div>

     

    根据条件切换标签中的class，可以用三元表达式。

    <div v-bind:class="[isActive? activeClass:'', errorClass]">把数组传给v-bind:class</div>

     在数组中也可以使用对象语法。

     <div v-bind:class="[{ active: isActive }, errorClass]">把数组传给v-bind:class</div>

(2) 绑定内联样式：

    1) v-bind:style=”{ color: #f00, fontSize: ‘16px’ }”

    2) <p v-bind:style="{ color: activeColor, fontSize: fontSize+'px' }">home-footer</p>

        

    3) 直接绑定一个样式对象：【常常结合返回对象的计算属性使用】

        <p v-bind:style="styleobject">底部段落内容</p>

        

        数组的形式：

          

4. 条件渲染

v-if   v-else v-else

v-show

5. 列表渲染

v-for：在遍历对象时，是按照object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。建议在使用v-for时提供key。

6. 数组更新检测：

     观察数组的变异方法：【变异方法： 会改变原始数组】

      push() pop() shift() unshift() splice() sort() reverse() 数据中的数组发生变化也将导致视图发生  更新。

    非变异方法：filter() concat() slice()不会改变原始数组，但是会返回一个新的数组。

      

一段取值范围的v-for：<li v-for="n in 10">{{ n }}</li>

V-for和v-if一起使用时：当处于同一节点时，v-for的优先级比v-if更高，v-if将分别重复运行于每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级将会很有用。

7. 事件处理

(1) 监听事件

    可以用v-on指令监听DOM事件，(v-on:事件名=“操作函数”缩写为 @事件名=“操作函数Fun”)

(2) 事件处理方法

    v-on:click=”Fun名” （@click=”Fun名”）

(3) 内联处理器的方法

(4) 事件修饰符（事件修饰符是由点开头的指令后缀来表示）

.stop   .prevent  .capture  .self  .once  .passive

注意：使用修饰符顺序很重要，相应的代码会以同样的顺序产生。v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

     .passive

(5) 按键修饰符

(6) 系统修饰符

8. 组件注册：

全局注册： Vue.Component(“组件名”, { 选项 });

局部注册：

9. Prop验证：

给props中的值提供一个带有验证需求的对象，而不是一个字符串数组。当prop验证失败的时候，Vue将会产生一个控制台的警告。

注意：prop会在一个组件实例创建之前进行验证，所以实例的属性（data, computed）在default或者validator函数中是不可用的。

2. 类型检查：

type类型：String  Number Boolean Array Object Date Function Symbol