vue学习记录1

记录一下我的学习过程，总结一下看官方文档和视频讲解上看不懂的名词，加深自己的记忆。

一、介绍

Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进式框架。与其他单片框架不同，Vue是从头开始设计的，可逐步采用。核心库仅专注于视图层，易于获取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也能够为复杂的单页应用程序提供强大的功能。

1.渐进式框架：大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。

2.视图层：把一个网页应用抽象一下，那么HTML中的DOM其实就是视图。

3.单文件组件：把一个页面拆分成为多个、多层次的组件。通过多层引用，大大缩小vue文件的长度和页面复杂度。

4.单页应用程序（SPA）：一个页面就是一个应用。

5.响应的数据绑定：vue.js会自动对页面中某些数据的变化做出响应。

6.组合的视图组件：ui页面映射为组件树，划分组件可维护，可重用，可测试。

7.Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

二、安装与部署

1.直接下载js脚本，放入项目文件夹，通过script引入。（建议下载开发版本）

2.cdn引入

3.npm和cli：有单独写安装步骤

三、创建第一个vue应用

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

1.el元素：用id选择器的方式选中div

2.data:用于保存数据，我们在视图中声明了哪些变量，就需要在data里注册这些变量，并且给这些变量进行初始化赋值。

四、数据与方法

1.数据属性：当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

大致意思是说在vue实例里有设置值的，数值发生变化，在视图就会重新渲染。

（唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。）

2.实例属性与方法：

例如vm.$data等（前缀 $，以便与用户定义的属性区分开来。）

例如vm.$watch('a', function (newValue, oldValue) { // 这个方法要放在改变变量之前})

五、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

简单来说就是这里有一些函数可以让你在不同过程进行操作。

具体可以看api，我这里举几个例子：

beforeCreate:function(){

//这个是在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。}

created:function(){

//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。}

beforeMount:function(){

//在挂载开始之前被调用：相关的 render 函数首次被调用。}

mounted:function(){

//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。}

比如：

setTimeout(function(){

vm.msg="1";},3000);

页面就会执行一次beforeUpdate和updated的生命周期函数。

六、模板语法 插值

1.文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值  例如：{{ msg }}

（绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。）

2.HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令

例如：

<span v-html="rawHtml"></span>

data:{tawHtml:'<span style="color:red">this is should be red</span>'}

(不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。)

3.特性：

v-bind:属性=" "

(可以让属性动态的变化）

4.使用javascript表达式

加法运算 {{ number + 1 }}

三元运算 {{ ok ? 'YES' : 'NO' }}

函数运算 {{ message.split('').reverse().join('') }} （变量反序排列）

七、模板语法 指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如：

<p v-if="seen">现在你看到我了</p>

（v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素）

1.参数

例如：

v-bind:href="url"

v-on:click="doSomething"

在这里参数是监听的事件名。

2.动态参数

v-bind:[attributeName]="url"

（动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。）

3.修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

八、class与style绑定

1.对象语法

（1）可以传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

（2）可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性还有style共存。

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

（当 isActive 或者 hasError 变化时，class 列表将相应地更新。）

（3）绑定的数据对象不必内联定义在模板里

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

（4）计算属性

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2.数组语法

（1）把一个数组传给 v-bind:class

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

（2）根据条件切换列表中的 class，可以用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

（这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。）

数组语法中也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

九、条件渲染

v-if:直到条件第一次变为真时，才会开始渲染条件块。

v-show:元素总是会被渲染，只是简单地基于 CSS 进行切换。

十、列表渲染

1.v-for="item in items"   ; v-for="item of items"

2.v-for="(item, index) in items"（:key="index"）

3.v-for="value in object"

4.v-for="(value, name) in object"

5.v-for="(value, name, index) in object" (:key="index")

6.维护状态：以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

十一、事件绑定

v-on

初始化vue对象参数内添加一个methods属性

在methods内可以调用data数据

修饰符

十二、表单输入绑定

v-model 双向绑定

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

设置默认值（在data内设置值）

提交在methods内设置方法

十三、组件基础

把经常重复的功能封装为组件，达到便捷开发的功能

1.创建调用

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', {

data: function () { return { count: 0 } },

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

})

<div id="components-demo">

<button-counter></button-counter>

</div>

2.组件的复用

每用一次组件，就会有一个它的新实例被创建。

3.通过Prop向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

 

十四、组件注册

 

十五、单组件文件