- 用开发版本的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和Number
content: [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_ = this
this.bus.$on('change', function (msg) {
this_.selfContent = msg
})
}
})
var vm = new Vue({
el: '#root'
})
</script>
</html>
具名插槽：用于标记往哪个具名插槽中插入子组件内容。
父组件：
<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.jsimport 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.jsimport store from './store' new Vue({ el: '#app', router, store, //所有的组件都能使用store components: { App }, template: '<App/>' })
-
使用
mutations{{this.$store.state.city}} -
使用
actions，它是一个方法，用dispatchthis.$store.dispatch('changeCity', city)actions使用mutations用commitctx.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文件夹
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
