基于vue.js官方文档及查阅多方资料整理vue学习笔记

vue学习笔记

引入vue

• < script >标签：需要下载官方vue.js版本，然后通过< script >标签在**.html**文件里引入

• NPM：

• CDN：直接复制< script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”>< /script >

• CLI命令行工具：直接创建 .vue文件

  引入成功，在控制台会出现这两条警告：

注意点：一旦引入vue，就会暴露一个全局变量 Vue( )。Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

模板语法

• 字符串模板与DOM模板：

  
      
  {
        {sometext}}
      
  
      	{
        {sometext}}
      
      
  
  
  

  < p >就是DOM模板，在vue中会先获取DOM内容缓存下来，然后绑定数据，当数据发生变化，利用之前缓存的模板，重新绑定数据并渲染；

  < some-tag>就是字符串模板，唯一区别就是js不用获取直接就可以拿到，获取到模板后缓存下来就一样了

  为什么要区分字符串模板和DOM模板？就是自定义标签，主要会有如下结构出现：

  <table>
      <my-tr>my-tr>
      <my-tr>my-tr>
      <my-tr>my-tr>
  table>
  

  因为W3C规定，table中只能有tr，td等不能有其它的，所有DOM获取不到my-tr,而字符串模板就仅仅是个字符串，与规定无关，所以可以随便写，只要最终编译出来的结构符合W3C要求就行

• 插值：{ { }}

• 通过使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

  这个将不会改变: {
        { msg }}
  

• 通过v-html可以输出真正的HTML标签（双大括号会将数据解释为普通文本，而非 HTML 代码）

• 避免用大写命名键名，如：

  
   ... 
  

• 修饰符 .

  .prevent：

  ...
  

计算属性和侦听器

• 模板内的表达式应该非常便利，放入太多的逻辑会让模板过重且难以维护，对于任何复杂逻辑，都应当使用计算属性。

• 计算属性 VS 方法：

   
  Computed reversed message: "{
        { reversedMessage }}"
   
  Reversed message: "{
        { reversedMessage() }}"
  
  
  

• 计算属性 VS 侦听属性

  Watch侦听器，只有当自己的值被改变的时候才会触发watch里的函数执行，否则改变与之无关的数据的值的时候，watch里的函数不会执行

  当有一些数据需要随着其它数据变动而变动时，不要滥用侦听属性，更好的做法是使用计算属性而不是命令式的 watch 回调（侦听器watch只有才数据发生改变,执行异步或开销较大的操作的时候使用）

  {
        { fullName }}
  
  
  

• 计算属性的setter

  计算属性默认只有 getter ，不过在需要时也可以提供一个 setter ：

  computed: {
         
    fullName: {
         
      // getter
      get: function () {
         
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
         
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
  

Class与style绑定

• 可以传入多个属性来动态切换多个class

• 绑定的多个属性可以写在一个对象里，不必全内联定义在模板里

• 三元表达式

• 数组语法中的对象语法

注意点：在一个自定义组件上使用 class 属性时，这个自定义组件上已经存在的 class 不会被覆盖。

• 内联样式style

  用法与class一样

条件渲染 v-if

• v-if、v-else-if、v-else同时使用时：

  
    A
  
  
    B
  
  
    C
  
  
    Not A/B/C
  
  

• 添加key值，表示独立唯一性，不会被复用

• v-show与v-if用法一样，不一样的是v-show 只是简单地切换元素的 CSS 属性 display。带有 v-show 的元素始终会被渲染并保留在 DOM 中，而v-if为false时会删除DOM元素

注意点：

v-show 不支持