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() }}