Vue框架学习日志2021.3.27

在使用vue时，自定义的js文件一定要放在html的最后。

<div id="app">
  {{message}}{{sentences}}
</div>

var a ;
var app = new Vue({
  el: '#app',
  data: {
    message: 'I hope I will pass the exam	',
	sentences:a 
	}
})

以上是最基本的vue用法。

箭头函数：(参数列表)=>{函数体}不能用于构造函数
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

指令：形如v-的在标签内的属性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
如：<p v-if="seen"> 111</p>
<a v-bind:href="url">...</a>
<a v-on:click="dosomething">111</a>等等
动态参数：
<a v-bind:[attributeName]="url"> ... </a>
若attributeName值为“href”则代码等价于
<a v-bind:href="url">...</a>

缩写：记住两个最常用的

v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

关于颠倒字符串：如s 调用方法：s.split("").reverse().join("");.其中，split中的参数代表按什么分割，为""时，就分割每一个字符，join同理，split分割后，返回一个数组，reverse用于颠倒数组，join将数组重组为字符串。

计算属性：以在.js文件中以 computed: 声明，如：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

绑定仍然可以用“Mustache”语法 (即双大括号)

计算属性的 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]
    }
  }
}
// ...

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。