[JavaScript知识库]vue从入门到精通之基础篇（一，前端开发h5

*   字符串 {{ ‘xxx’ }}

*   判断后的布尔值 {{ true }}

*   三元表达式 {{ true?‘是正确’:‘错误’ }}

• 可以用于页面中简单粗暴的调试

• 注意: 必须在data这个函数中返回的对象中声明

[](

)(3).什么是指令

• 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示

  • 比如html页面中的属性 <div v-xxx ></div>

• 比如在angular中 以ng-xxx开头的就叫做指令

• 在vue中 以v-xxx开头的就叫做指令

• 指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

[](

)(4).vue中常用的v-指令演示

• v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少

• v-html: 元素的innerHTML

• v-if : 判断是否插入这个元素,相当于对元素的销毁和创建

• v-else-if

• v-else

• v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换

 v-text 只能用在双标签中

 v-text 其实就是给元素的innerText赋值

 v-html 其实就是给元素的innerHTML赋值

 v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素

 如果有if和else就不需要单独留坑了

 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用

 v-if和v-else-if都有等于对应的值，而v-else直接写

 v-if家族都是对元素进行插入和移除的操作

 v-show是显示与否的问题

 注意: 指令其实就是利用属性作为标识符,简化DOM操作,

  看：v-model="xxx"

  v-model 代表要做什么  xxx代表针对的js内存对象

  写在那个元素上，就对哪个元素操作

[](

)(5).v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

[](

)(6).v-bind使用

• 给元素的属性赋值

  • 可以给已经存在的属性赋值 input value

  • 也可以给自定义属性赋值 mydata

• 语法 在元素上 v-bind:属性名="常量||变量名"

• 简写形式 :属性名="变量名"

• 
  <div v-bind:原属性名="变量"></div>
  
  <div :属性名="变量">
  
      
  
  </div>
  
  
  
  

[](

)(7).v-on的使用

• 处理自定义原生事件的,给按钮添加click并让使用变量的样式改变

• 普通使用 v-on:事件名="表达式||函数名"

• 简写方式 @事件名="表达式"

[](

)(8).v-model

• 双向数据流（绑定）

  • 页面改变影响内存(js)

  • 内存(js)改变影响页面

[](

)(9).v-bind 和 v-model 的区别?

• input v-model="name"

  • 双向数据绑定 页面对于input的value改变，能影响内存中name变量

  • 内存js改变name的值，会影响页面重新渲染最新值

• input :value="name"

  • 单向数据绑定 内存改变影响页面改变

• v-model: 其的改变影响其他 v-bind: 其的改变不影响其他

• v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

[](

)(10).v-for的使用

• 基本语法 v-for="item in arr"

• 对象的操作 v-for="item in obj"

• 如果是数组没有id

  • v-for="(item,index) in arr" :class="index"

• 各中v-for的属性顺序(了解)

  • 数组 item,index

  • 对象 value,key,index

[](

)(11).过滤器filter

• filters

  • 将数据进行添油加醋的操作

  • 过滤器分为两种

    • 1:组件内的过滤器(组件内有效)

    • 2:全局过滤器(所有组件共享)

[](

)局部过滤器的使用

• 先注册,后使用

• 组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据

• 使用方式是 {{ 原有数据 | 过滤器名 }}

• 过滤器fn:

  • 声明function(data,argv1,argv2...){}