vue基础知识

2020-04-09 本文已影响0人猫晓封浪

new Vue() 创建 Vue 实例，其中 Vue.components() 也可以创建 Vue 实例。
Vue生命周期函数：vue 实例在某一时间点会自动执行的函数。生命周期图示
vue模板语法：

{{}} 表示的插值表达式
v-text 表示的文本（标签不会被解析）插值
v-html 表示的html文件（可解析标签）插值

这插值表达式和其他的模板指令在“=”后内容都表示js表达式，所以都可以跟简单的js表达式，如：

<div id = "app">
    <div>{{name + ' word'}}</div>
    <div v-text = "name + ' word'"></div>
    <div v-text = "name + ' word'"></div>
</div>
<script>
    var vm = new Vue({
        el: "app",
        data: {
            name: "hell"
        }
    })
</script>

计算属性、方法与侦听器
其中计算属性（computed）和侦听器（watch）都存在一个缓存机制（即与之相关的属性不发生变化时，会复用先前值），但是相同情况下计算属性的代码较侦听器更为简洁。

  <div id="app">
    {{fullName}}
    {{year}}
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        firstName: "hello",
        lastName: "word",
        year: "2019"
      },
      computed: {
        fullName: function(){
          console.log("计算一次")
          // 返回fullName的值，而不是进行赋值操作
          return this.firstName + " " + this.lastName
        }
      }
    })
  </script>

如图所示：当修改与计算属性 fullName 无关的属性 year 时，计算属性并没有执行，而是进行复用，当修改与之相关的属性时，便会执行一次。这就是计算属性（computed）就缓存机制，侦听器（watch）同理。
注意：计算属性直接通过名字（键值）就可以调用，方法必须是调用才可以。
4.1 计算属性的getter和setter

    fullName: {
          get: function(){
            return this.firstName + " " + this.lastName
          },
          set: function(value){
            var arr = value.split(" ")
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }

其中：当取计算属性的值（ {{fullName}} ）时，get 方法被执行。当设置计算属性的值时，set 方法被执行。
当在控制台执行 vm.fullName = "Bye bye" 时，这时 set 方法被执行，更改了 firstName 和 lastName 的值，此时计算属性发现get方法中使用到的属性被改变，执行 set 方法，此时页面中显示的是“Bye bye”。

Vue中的样式绑定
5.1 class的对象语法（使用对象的形式）
动态绑定 class ，其中 :class="{activated: isActivated}" ：activated 表示类名，该类型是否绑定在该标签中取决于 isActivated 的值（Boolean值）。

   <div id="app">
    <div @click="divclick" :class="{activated: isActivated}">
      {{message}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "hello word",
        isActivated: false
      },
      methods: {
        divclick: function(){
          this.isActivated = !this.isActivated
        }
      },
    })
  </script>

5.2 class的数组语法（使用数组的形式）
其中 :class="[activated]" 数组中绑定的是变量，即 data 中属性的值。

  <div id="app">
    <div @click="divclick"
      :class="[activated]">
      {{message}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "hello word",
        activated: ''
      },
      methods: {
        divclick: function(){
          this.activated = this.activated === "activated" ? "" : "activated"
        }
      },
    })

5.3 style的动态绑定同理也有数组语法和对象语法
:style="[styleObj, {fontSize: '20px'}]" ：其中 styleObj 为数组语法，在 data 中为样式对象，{fontSize: fs + 'px'} 为对象语法。

  <div id="app">
    <div @click="divclick"
      :style="[styleObj, {fontSize: fs + 'px'}]">
      hello word
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        styleObj: {
          color: "black"
        },
        fs: 20
      },
      methods: {
        divclick: function(){
          this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
        }
      },
    })
  </script>

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

条件渲染
v-if 和 v-show 都可以控制页面中元素是否显示。区别： v-if 直接控制 dom 元素是和否在页面中（dom销毁和重建）， v-show 是给 dom 元素添加 display 属性（基于css切换）。其中如果 dom 元素频繁的显示和隐藏，使用 v-show 性能更好。
注意，v-show 不支持 <template> 元素，也不支持 v-else。

  <div id="app">
    <div v-if="show === 'a'">this is a</div>
    <div v-else-if="show === 'b'">this is b</div>
    <div v-else>this is c</div>
    <div v-show="show === 'a'">this is show</div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        show: "a"
      }
    })
  </script>

此时在控制台执行 vm.show = 'b' 会发现页面中只显示 ‘this is b’ 其中 ‘this is show’ 对应的 dom 元素的 display 为 none。如下：

注意：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。所以在切换 dom 时，尽可能添加 key 值，减少复用带来的 bug 。

列表渲染（in 或 of 都可以，of 更接近 JavaScript 迭代器的语法）
在 Vue 中使用 v-for 进行列表渲染。为了提升循环显示的性能，都会给循环添加一个唯一的 key 值。不推荐使用 index ，不一定唯一，会影响性能。所以一般列表的数据格式如下：

  <div id="app">
    <div v-for="(item, index) of list" :key="item.id">
      {{item.name}} -- {{item.id}} -- {{index}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        list: [{
          id: "001",
          name: "hello"
        }, {
          id: "002",
          name: "word"
        }]
      }
    })
  </script>

当要修改数组内容的时候，不能通过数组下标（索引）的形式改变数组（不是响应性的），可以通过 Vue 提供的几个变异方法（变异方法 (mutation method)）改变数组且动态显示，或者修改数据的引用（替换数组）。 push（向最后一位添加）、 pop（删除最后一位并返回删除项）、 shift（删除第一位并返回删除项）、 unshift（向第一位添加）、 splice（截取某一位）、 sort（排序）、 reverse（反转）
在控制台输入 vm.list.splice(1, 1, {id: "003", name: "bye"}) ，此时页面中显示 hello -- 001 -- 0 bye -- 002 -- 1
当修改数据的引用时，页面也会随之变化。在就控制台执行 vm.list = [{id: "001", name: "hello"}, {id: "002",name: "bye"}] ，此时页面显示与上述方法一致， hello -- 001 -- 0 bye -- 002 -- 1

相同方法，对象也可以与数组一样的方法进行循环渲染。在对象循环中，可以传入三个参数 v-for="(item, key, index) of list"，item 为对象的键值， key 为对象的键名， index 为其下标值。对象的列表循环渲染中可以使用 vm.list.name = "bye" ，直接修改页面渲染的数据，但是如果要向其添加数据，只能使用修改引用的方法。

Vue的set方法

      data: {
        list: [{
          id: "001",
          name: "hello"
        }, {
          id: "002",
          name: "word"
        }],
        list1: {
          name: "name",
          age: 18
        }
      }

对于对象数据（list1）响应式修改除引用实现页面响应性的方法，还有一种是使用 Vue.set(object, propertyName, value) ，即 Vue.set(vm.list, "address", "beijing") 或者 vm.$set(vm.list, "address", "beijing") （全局 Vue.set 的别名）。
对于数组数据（list）响应式修改除使用vue提供的变异方法和修改引用外，也可以使用 Vue 的 set 方法，即 Vue.set(vm.list, 2, {id: '003', name: 'name'}) 或者 vm.$set(vm.list, 2, {id: '003', name: 'name'}) （全局 Vue.set 的别名）

vue基础知识

猜你喜欢

热点阅读