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

104828720
1.4k 声望222 粉丝

编程其实很枯燥,所以一定要有追求。


« 上一篇
WebServer Q&A
下一篇 »
JS Q&A