vuejs Q&A

vuejs主要特性？

1. 模板渲染
2. 响应式双向数据绑定
3. 组件化开发
4. 路由

虚拟DOM好处？

• 初始视图没有优势，反而中间多了一层虚拟DOM，所以性能没有提高
• 更新视图优势明显：减少重复生成与删除DOM操作，减少查询定位DOM元素的操作，能修改操作完成的就绝不使用生成与删除来操作

vue-cli 脚手架是什么？有什么作用？

• 是一种开发vue应用的前端自动化构建工具
• 主要有以下作用：

1、生成项目目录结构
2、本地开发调试
3、代码部署
4、热加载
5、单元测试

Vue实体外部，如何获取和赋值（数据）

var app = new Vue({
    el: '#app',
    data: {
        name: 'wt'
    }
});
// 获取数据
console.log(app.$data.name);
console.log(app.name);

// 赋值
app.$data.name = “你好”;
app.name = “你好”;

Vue实体内部，如何获取和赋值（数据）

var app = new Vue({
    el: '#app',
    data: {
        name: 'wt',
        message: ''
    }，
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
});

条件

条件命令有哪些？ v-if v-else v-else-if v-show

v-if/v-else/v-else-if : 可以使用<template>  初始开销低，少切换
v-show : 不可以使用<template>  切换开销低，初始频繁

列表

列表命令有哪些？ v-for
列表命令作用于 数组 和 对象

MVVM vs MVP

MVVM：由M、V、VM三部分组成，vuejs主要实现VM部分，我们开发主要负责M、V两层
MVP: 由M、V、P三部分组成，P负责业务逻辑和DOM操作

MVVM优点：面向数据、代码少、效率高
MVP优点： 面向DOM、代码多、效率低

数据的双向绑定

• 单向绑定

把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新

• 双向绑定

如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
主要适用场景： 一般是表单元素（能与用户交互的那些）

• 双向绑定的实现

v-model

组件化

生命周期函数

Vue生命周期函数是一种 在某时间点 自动执行的函数（钩子函数）

• 定义

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

// 并非定义在methods中
// 生命周期函数中，this指代vue实例

模板语法

• 标签内容

有3种语法：
1、插值表达式
<span>{{ msg }}</span>

2、v-text
<span v-text="msg"></span>

3、v-html
<span v-html="msg"></span>

注意：
v-text 与 {{}} 作用一样
3种语法都可以写js表达式：{{ msg + 'LEE'}}   <span v-text="msg + 'LEE'"></span>

• 标签事件（绑定）

<div id="app">
  <button v-on:click="greet">Greet</button>
  <!-- 简写 -->
  <button @click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
</script>

• 标签属性

有2个属性是特殊的：class和style，其他属性（包括：class和style）都可以按如下绑定标签属性

<div id="app">
  <div v-bind:id="box">Greet</div>
  <!-- 简写 -->
  <div :id="box">Greet</div>
  <div :id="hasColor?'container':''">Greet</div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js',
    box: 'container',
    hasColor: true
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
</script>

• 注意

1、无论是标签内容、事件、属性都可以使用js表达式，与微信小程序不同，vuejs可以直接调用方法，例如 {{ greet() }}