vue官方文档笔记

vue知识点记录：

// 最小成本-渐近增量
// vue安装：方法1-直接script引入vue文件 方法2-npm安装 npm install vue 
// 方法3-命令行CLI vue提供了官方cli，为单页面快速搭建繁杂的脚手架

// <!-- 开发版本，包含有用的控制台警告 -->
{/* <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> */}
// <!-- 生成版本，对于体积和速度进行优化 -->
{/* <script src="https://cdn.jsdelivr.net/npm/vue"></script> */}


/* 
<div id="app">
    <app-nav></app-nav>
    <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
    </app-view>
</div>
 */
// 跨组件数据流-自定义事件通信-构建工具集成

// vue实例 var vm = new Vue({ //选项 })

// 一个vue应用由一个new Vue创建的根vue实例，以及可嵌套的可复用的组件树组成。
// ps：所有的vue组件都是vue实例且接受相同的选项对象。

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

// 数据对象
var data = {a:1}
// 将对象加入到一个vue实例中
var vm = new Vue({data:data})
// 获得这个实例上的属性 返回源数据中对应的字段
vm.a==data.a //true
// 设置属性也会影响到原始数据
vm.a = 2;
data.a //2
data.a = 3;
vm.a //3

// 当这些数据改变时，视图会进行重新渲染。ps：只有当实例被创建时data中存在的属性才是响应式的。
// 即当新增加的属性改动时不会触发视图的更新。so若你晚些时候需要一个属性，它一开始不存在，可以先设置一个初始值
// $watch 
vm.$watch('a',function(newValue,oldValue){
    // 这个回调将在`vm.a`改变后调用
})

// 每个vue实例在被创建时都要经过一系列的初始化过程-如设置数据监听-编译模板-将实例挂载到DOM并在数据变化时更新DOM，
// 同时这个过程中也会运行一些叫做生命周期钩子函数。

new Vue({
    el:'#app',
    data:{
        a:1
    },
    created () {
        // 生命周期钩子中的this上下文指向调用它的vue实例
        console.log(this.a)
    }
})

// 生命周期钩子函数
// new Vue() beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

// 在底层的实现上vue将模板编译成虚拟DOM渲染函数，结合响应系统，vue能够智能地计算出最少需要渲染多少组件，并把DOM
// 操作次数减到最少。

// 指令：带有v-前缀的特殊特性，指令特性的值预期是单个js表达式，v-用于识别模板中vue特定的特性。指令的指责-当表达式值改变时将其产生的连带影响响应
// 式地作用于DOM,如v-once能执行一次性地插值，当数据改变时，插值处的内容不会更新。<span v-once>{{msg}}</span>
// v-if将根据表达式值真假来操作<p v-if="seen">dssd</p>
// 双大括号将数据解析为普通文本而非html代码，未来输出真正的html则需要使用v-html指令。
// 双大括号语法不能作用在html特性上，此时应该使用v-bind指令<div v-bind:id="dynamicId"></div>,即属性通过v-bind进行绑定
// v-on监听dom事件<a v-on:click="do"></a>

// 指令参数，方括号括起来的js表达式作为指令的参数<a v-bind:[attributeName]="url">...</a> <a v-on:[eventName]="do"></a>

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

// 缩写：如(1)<a v-bind:href="url">...</a> 等价于 <a :href="url">...</a>
// (2)<a v-on:click="do"></a> 等价于<a @click="do"></a>

// 计算属性和侦听器
// 对于任何复杂逻辑推荐使用计算属性computed

// 计算属性缓存-方法  将函数定义为方法和一个计算属性可以实现同样的功能，不同的是计算属性是基于它们的响应式依赖进行缓存的，
// 只在相关响应式依赖发生改变时它们才会重新求值，即只要属性值没有发生改变，多次访问计算属性会立即返回之前的计算结果，不必
// 再次执行函数。而方法，每当重新渲染时调用方法将总会再次执行函数。使用缓存可以提高性能。

// 计算属性-侦听属性
// vue通过侦听属性来观察和响应vue实例上的数据变动。ps：当数据需要随其他数据变动时推荐使用计算属性而不是滥用watch

// 计算属性的setter ps：计算属性默认只有getter，在需要时可以提供setter

// 侦听器 当需要在数据变化时执行异步或开销较大的操作时推荐watch操作

// Class 与 Style绑定
// v-bind可以用来绑定操作元素的class列表和内联样式(通过表达式计算出字符串结果)。因字符串拼接麻烦且易错，因此在
// 将v-bind用于class和style时，vue.js做了专门的增强。表达式结果的类型除了字符串类型之外还可以是对象或数组。
// 对象语法：v-bind:class可以传一点对象，以动态地切换class,可以在对象中传入更多属性来动态切换多个class
// <div class="statics" v-bind:class="{active:isActive,'text-danger':hasError}"></div>
// ps v-bind:class指令可以与普通class属性共存。
// 绑定的数据对象不必内联定义在模板里：
/* 
<div v-bind:class="classObj"></div>
data:{
    classObj:{
        active:true,
        'text-danger':false
    }
}
 */

//  可以把数组传给v-bind:class 

// 条件渲染
// v-if指令用于条件性地渲染一块内容。
// v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
// v-if是惰性的，在初始渲染时条件为假则什么也不做-直到第一次条件变为真时才开始渲染条件块。
// v-show不管初始条件是什么，元素总是会被渲染，且只是简单地基于css进行切换。
// ps：v-if会有更高的切换开销，而v-show有更高的初始渲染开销。

// v-for 把一个数组对应为一组元素，渲染一个列表
// 变异方法：会改变调用了这些方法的原始数组，如push()-pop()-shift()-unshift()-splice()-sort()-reverse()
// 非变异方法：不会改变原始数组，总是返回一个新数组，如filter()-concat()-slice()

// v-for优先级高于v-if，当只想为部分项渲染节点时，可以使用这种优先级机制，平时不推荐。
// 如果目的是有条件地跳过循环的执行，则可以将v-if置于外层元素。

// 事件处理：v-on指令可以监听dom事件，并在触发时运行一些js代码；v-on可以接收一个需要调用的方法名称

// v-model指令在表单<input> <textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新
// 元素，负责监听用户输入事件以更新数据，并对一些极端场景做特殊处理。ps：v-model会忽略所有表单元素的value/checked/
// selected特性的初始值而总将vue实例的数据作为数据来源。

// ps:v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件；
// checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件；

// v-model双向绑定实现原理：v-bind绑定响应式数据，触发input事件并传递数据，监听input事件并把input事件所携带的值
// 传递给v-model所绑定的属性。既绑定了数据，又添加了一个input事件监听
{/* <input v-model="sth"> */}
{/* <input v-bind:value="sth" v-on:input="sth=$event.target.value" /> */}

// 组件注册-全局注册&局部注册
// Vue.component('component-name',{...})
/* 
var ComponentA = {}
new Vue({
    el:'#app',
    components: {
        'component-a':ComponentA
    }
})
 */
// ps：局部注册的组件在其子组件内不可用，若希望ComponentA在ComponentB中可用，则：
 /* 
var ComponentA = {...}
var ComponentB = {
    components: {
        'component-a':ComponentA
    },
    // ...
} 
*/
/* 
import ComponentA from './ComponentA.vue';
export default {
    components: {
        ComponentA
    },
    // ...
}
 */
// 组件命名推荐字母全小写且必须包含一个连字符
// 定义组件名的方式有两种：短横线分隔命名，引用时也使用短横线方式；首字母大写命名，
// 引用时可以短横线形式引用也可首字母大写形式引用。

// 通过prop向子组件传递数据
// prop是你可以在组件上注册的一些自定义特性，当一个值传递给一个prop特性的时候，它变成了那个组件实例的一个属性。
// 可以用props选项将其包含在该组件可接受的prop列表中。

　　参考 & 感谢：vue官网 & 各路大神