vue基础的学习

2024-02-06 15:31:04

https://www.yuque.com/kanyuyou/zy6htq/dimlbc
语雀地址

只是关心视图层
el：挂载点可以根据# . 来选择

Mustache 语法

可以写变量和简单的表达式

1.v-on

添加一个事件监听器.

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

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

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

2.v-bind 动态绑定属性

将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致缩写.

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

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

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

3.v-if/v-else
控制切换元素

4.v-for
绑定数组的数据来渲染一个项目列表

5.v-model

一个组件本质上是一个拥有预定义选项的一个 Vue 实例
注册组件：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

6.v-html/v-text（不灵活）

computed 和 methods 的区别

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
    
 <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

使用methods

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

//调用，因为是方法，所以有括号
<p>Reversed message: "{{ reversedMessage() }}"</p>

1.computed是属性调用，而methods是函数调用

computed定义的方法是以属性访问的形式来调用，如 {{reversedMessageComputed}}
methods定义的方法，则要加上 () 来调用，如 {{reversedNameMethod()}} ，否则视图中会渲染出如下内容
function () { [native code] }

2.computed带有缓存功能，而methods不是

var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

缓存意味着只要 message 还没有发生改变，多次访问 reversedMessageComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。而 reversedNameMethod() 方法，每次调用都会重新执行函数

码农公寓