DellLee Vue学习笔记

用开发版本的Vue.js

使用组件里面的data

var app = new Vue({el:"#app",data () {return {content:"Hello !"}}
})
setTimeout(function(){app.$data.content = "bye wrold"
},2500)

M V VM设计模式

局部组件和全局组件

      //局部组件
var TodoItem = {props: ['input'],template:"<li>{{input}}</li>",
}// Vue.component("TodoItem",{//     props: ['input'],
//     template:"<li>{{input}}</li>",// })//全局组件
var app = new Vue({el:"#app",data () {return {list:['apple','bnana'],inputValue:""}},components: {TodoItem },
})

注意

<todo-item v-for="(item,index) in list"   //先有index下面才能用
:input="item" :index="index"                 //绑定的数据需要加“ ”
@delete="delItem"></todo-item>        //delItem不用自组件加返回的数据

子组件传回的index，并触发父组件的函数
this.$emit('delete',this.index)
@delete="delItem"

Vue生命周期

不放在metdods里面，一共11个，这里只有8个

var life = new Vue({el: '#life',data: {value: 'Hello Wrold'},//不放在metdods里面beforeCreate() {console.log("beforeCreate");},created() {console.log("created")},beforeMount() {console.log(this.$el)console.log("beforeMount")},mounted() {console.log(this.$el)console.log("mounted")},beforeUpdate() {console.log("beforeUpdate")},updated() {console.log("updated")},beforeDestroy() {console.log("beforeDestroy")},destroyed() {console.log("destroy")}})

全部生命周期钩子

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

模板语法
v-test：原始输出
v-html：编译输出
v-后面的内容是js表达式：v-test="value + '字符串' "

如果一个功能可以通过methods、watch、computed实现时，优先使用computed

computed计算属性的getter和setter

computed: {fullName: {get: function() {return this.firstName + ' ' + this.lastName;},set: function(value) {var arr = value.split(" ");this.firstName = arr[0];this.lastName = arr[1];console.log("value")}}}

Vue中的样式绑定

:class="{activated: isActivated}" 根据isActivated的值决定是否使用.activated{ color:red;}样式

:class="[activated]" 其中activated是一个变量，所以需要赋一个字符串，这里就是样式的名字"activated"

:style="styleobj"
:style="[styleobj,{font-size:'10px'}]"
data:{styleobj:{color:red;}}
this.styleobj.color=black;

v-if、v-else-if、v-else要紧接使用

数组方法 splice
list.splice(1,1,{value=10})
index：必需、整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需，要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX：可选，向数组添加的新项目。

template模板占位符，主要用于分组的条件判断和列表渲染。替代div位置

Vue的set方法响应式
数组：index为2的数组内容改成5
Vue.set(vm.userInfo, 1, 5)或者
vm.$set(vm.userInfo, 1, 5)

对象：key和值
Vue.set(vm.userInfo, "name", "Rain")或者
vm.$set(vm.userInfo, "name", "Rain")
官方的解释：
Vue.set( target, key, value )
参数：
{Object | Array} target
{string | number} key
{any} value
返回值：设置的值。

用法：
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

table、ol、ul、option中使用组件的重要事项！！！

//row是一个组件
<table><tbody><tr is="row"></tr></tbody>
</table><ul><li is="row"></li>
</ul><ol><li is="row"></li>
</ol><option><select is="row"></select>
</option>

Vue中操作DOM方法ref ！！！

例如：两个子组件求和显示在主组键

<counter ref="one" @change="handleAdd"></counter>
<counter ref="two" @change="handleAdd"></counter><script>this.total = this.$refs.one.number + this.$refs.two.number
</script>

:value有冒号的后面都是JS，传字符串去掉:

父组件向子组件传值

Vue中的单向数据流，子组件不能修改父组件传递的数据，因为传递的数据是引用，别人也可能回引用这个数据，所以子组件不能对它做修改；如果需要修改，那么在子组件中data定义一个自己的数据作出修改使用。
```
data: function() {return { number: this.count
//number为子组件的data，count为父组件传递的值}
}
```

子组件向父组件传值
- 事件名字和值
  this.$emit('change', value)
- 官网是这样解释的：
  vm.$emit( eventName, […args] )
  参数：
  {string} eventName
  [...args]
  触发当前实例上的事件。
  附加参数都会传给监听器回调。

组件参数校验

把“[]”改为对象“{}”

 props: {content: String  //只接受String}props: {//接受String和Numbercontent: [String , Number]  }props: {content: {type: [String , Number],  //校验required: false,   //是否必传default: '默认值'   //默认值}}props: {content: {type: String,//自定义校验器validator: function(value) {  return (value.length > 5)}}}

非props特性

官方的解释：
非 Prop 的特性：
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的组件，这个插件需要在其上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上：

<bootstrap-date-input data-date-picker="activated">
</bootstrap-date-input>

然后这个 data-date-picker="activated" 特性就会自动添加到<bootstrap-date-input>的根元素上。
给组件绑定原生事件
<child @click.native = "handleClick" />
子组件有一个button点击后触犯父组件的函数

非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）

例如：点击Dell，Rain编变成Dell，反之。

<!DOCTYPE html>
<html><head><script src="../vue/Vue.js"></script>
</head><body><div id='root'><child content="Dell"></child><child content="Rain"></child></div>
</body><script>//每一个Vue组件上都有bus属性Vue.prototype.bus = new Vue() Vue.component("child", {data: function () {return {selfContent: this.content}},props: {content: String},template: '<div\@click="handleClick">{{selfContent}}</div>',methods: {handleClick: function () {this.bus.$emit('change', this.selfContent)}},mounted: function () {//this作用域发生了变化，所以保存起来 var this_ = thisthis.bus.$on('change', function (msg) {this_.selfContent = msg})}})var vm = new Vue({el: '#root'})</script></html>

Vue中使用插槽
参考：https://blog.csdn.net/kingov/article/details/78293384

具名插槽：用于标记往哪个具名插槽中插入子组件内容。

父组件：

<div><demo><div slot="header">替换子组件name为header的slot</div><!-- <span>替换子组件的没有具名的slot</span> --><div slot="footer">替换子组件name为footer的slot</div></demo>
</div>

子组件：

Vue.component('demo',{template:'<div><slot name="header">\<h1>子组件name为Header的slot</h1>\</slot>\\<slot>\<p>子组件不具名slot</p>\</slot>\
\<slot name="footer">\<p>子组件name为footer的slot</p>\</slot></div>'})

作用域插槽（将子组件的值传到父组件供使用）

父组件：template是必须的

<test-slot><template slot-scope="props"><p>{{ props.addr }}</p><p>{{ props.cname }}</p><p>{{ props.age }}</p></template>
</test-slot>

子组件：

<template><div class="hello"><slot :cname="items[2].cname"></slot> <slot :addr="items[2].addr"></slot> <slot age="18"></slot> </div>
</template><script>data (){return {items:[{ text:'文字1' , cname:'tom' , addr:'usa' },{ text:'文字2' , cname:'wangwu' , addr:'uk' },{ text:'文字3' , cname:'zhangsan' , addr:'un' }]}</script>

动态组件
参考：https://blog.csdn.net/qq_36529459/article/details/79573040
通过 Vue 的元素加一个特殊的 is 特性来实现
<component v-bind:is="currentTabComponent"></component>
在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或一个组件的选项对象

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

重新创建动态组件的行为通常是非常有用的，但是我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
```

<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>
```

is
预期：string | Object(组件的选项对象)

用于动态组件且基于 DOM 内模板的限制来工作。

示例：

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>
<!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table><tr is="my-row"></tr>
</table>

v-once指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul><li v-for="i in list" v-once>{{i}}</li>
</ul>

Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
首先安装 vuex :
npm install vuex --save

为了便于日后的维护 , 我们分开写更好
store/index.js

import Vue from 'vue'
import vuex from 'vuex'Vue.use(vuex);export default new vuex.Store({state: {city: '北京'},actions:{changeCity (ctx, city) {   //上下文ctex，city数据ctx.commit('changeCity',city)  //ctx作用是帮助我们使用commit方法},mutations: {changeCity (state, city) {state.city = city }}
})

main.js

import store from './store'new Vue({el: '#app',router,store,                //所有的组件都能使用storecomponents: { App },template: '<App/>'
})

使用mutations

{{this.$store.state.city}}
使用actions，它是一个方法，用dispatch

this.$store.dispatch('changeCity', city)

actions使用mutations用commit

ctx.commit('changeCity',city)
- changeCity是一个actions，city是数据
- changeCity执行mutations中的changeCity方法
- mutations中的changeCity方法改变state中city的值

参考：https://segmentfault.com/a/1190000009404727

编程式导航

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

参考：https://router.vuejs.org/zh/
参考：https://www.cnblogs.com/superlizhao/p/8527317.html

LocalStorage实现页面数据持久存储

使用keep-alive优化路由页面性能

activated和deactivated将会在<keep-alive>树内的所有嵌套组件中触发.

主要用于保留组件状态或避免重新渲染。

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

动态路由配置及banner布局

z-index堆叠
参考：http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

position: fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

实现header渐隐渐现功能

对全局事件的解绑

deactivated  () {window.removeEventListener('scroll', this.handleScroll)
}

递归组件实现详情列表
实现层级列表：

npm dev build打包项目生成dist文件夹

DellLee Vue学习笔记相关推荐

菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...

DellLee Vue学习笔记

DellLee Vue学习笔记相关推荐

最新文章

热门文章