new Vue（el, data, methods, computed, filters, components, 生命周期函数）
vue的生命周期（创建->消亡）
- beforeCreate
-
created:
一般情况下会在这里面做网络请求
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
模板语法
vue指令
插值指令
-
v-once:
只是一个指令 没有="" 内容只能被赋值一次 当数据改变时并不会改变
-
v-html:
按照html语法加载数据
-
v-text:
将数据加载到标签 并且覆盖标签内的所有内容
-
v-pre:
将所有的内容原封不动的展示出来 可以使模板插值语法失效 类似python的原始字符串
-
v-cloak:
这个属性类似于display:none vue不解析就不显示模板 在vue解析之前有这个属性，解析之后将这个属性删除
动态绑定指令
- v-bind:
动态绑定属性 (v-bind:src)可以缩写为(:src) 可以使用任何属性 :src='' 内容支持变量、数组、对象、方法、以及表达式
-
v-on:
绑定事件 (v-on:click)可以缩写为(@click) 支持所有事件
-
$event:
@click(prm, $event) $event默认写法 接收浏览器产生的event对象
-
stop修饰符:
@click.stop 可以阻止事件冒泡
-
prevent修饰符:
@click.prevent 阻止submit提交
-
键盘修饰符:
@keyup.enter 监听回车建做事件操作 enter表示回车 这里可以更改为其他键
-
once修饰符:
@click.once 事件只能被触发一次 这里防止重复提交很有效
-
v-for:
循环操作 在遍历对象时 如果只接受一个值 默认为value
- v-if:
条件成立时渲染代码快
- v-else:
else代码块
- v-else-if:
条件成立时渲染代码快
- v-show:
条件成立时显示代码块 否则隐藏代码块 和display:none相同 而v-if是直接不创建DOM 这里会始终有DOM只是不显示
- Vue.set(要修改的对象, 索引值, 要修改的值)
-
v-model:
双向绑定 用来同步更新 默认为value属性
<h2>{{message}}</h2>
<!--v-model 的双向绑定-->
<input type="text" v-model="message">
<!--双向绑定也可以用另一种方式来实现-->
<input type="text" :value="message" :input="valueChange">
<script >
function valueChange(event){
console.log("当输入框内容被改变 input时间触发, 通过浏览器产生的 event来获取input内容");
this.message = event.target.value;
}
</script>
<!--简写-->
<input type="text" :value="message" @input="message=$event.target.value">
虚拟DOM
渲染
ES6
数组的方法
- push方法
向list最后插入一个值
- pop方法
从list最后取出一个值并删除
- shift方法
从list取出第一个元素并删除
- unshift方法
在list最前插入一个值
-
splice方法
-
删除元素
如果是要删除元素 第一个参数为从第几个开始 第二个参数传入你要删除几个元素
如果只传第一个元素 则第一个参数下标的元素 后面的全部删除
-
插入元素
第一个表示开始元素 第二个参数默认为0 第三个以后的参数为要插入的参数
-
替换元素
第一个表示参数开始，第二个参数表示截止，第3个以后的参数表示插入的参数
- sort方法
将list进行排序
- reverse方法
将list进行反转
- 高级字符串
`` 可以识别换行符
function
add: function() {}
// 可以改写为
add(){}
add(...param){}
// ...表示可接受不定长的参数 此时param为list类型
// 类似于python的 def add(*param)
// 普通for循环
for (let i = 0; i < 10; i++){
console.log(list[i]);
}
// 索引for循环
for (let i in [1, 2, 3]){
console.log(list[i])
}
// 增强for循环
for (let item of [1, 2, 3]){
console.log(item)
}
// filter函数
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let newList = numList.filter(function(n){
return n >= 50
});
// map函数
let new2List = newList.map(function(n) {
return n * 2
});
// reduce函数 对数组中所有内容进行汇总 第一个参数为回调函数 第二个参数为初始化的值
let totalCount = new2List.reduce(function(preValue, n){
// 初始化preValue是高阶函数初始化的值 n是list中的元素
// 每一次回调都会将 return的结果赋值给preValue
return preValue + n
}, 0);
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let total = numList.filter(n => n <= 50).map(n => n * 2).reduce((pre, n) => pre + n, 0);
console.log(total);
组件化
-
基本使用
- 全局组件 全局组件表示注册的组件可以在任何地方使用
- 局部组件 创建的局部组件只能在挂载元素的内部使用
// 创建组件构造器(子组件)
const cpn1 = Vue.extend({
template: `
<div>
<h2>cpn1标题</h2>
<p>cpn1内容</p>
</div>
`
});
// 创建组件构造器（父组件）
const cpn = Vue.extend({
// ``是高级字符串 可以换行
template: `
<div>
<h2>cpn标题</h2>
<p>cpn内容</p>
<cpn1></cpn1>
</div>
`,
// 这里可以在组件构造器内注册其他组件 这注册的这个组件可以用在模板内
components: {
cpn1: cpn1
}
});
// 注册全局组件
Vue.component('my-dev', cpn);
// 注册局部组件 vm可以看做是root组件
const vm = new Vue({
el: '#app',
data: {},
methods:{},
// 注册局部组件
component:{
cpn: cpn
}
});
// 使用组件
// <my-dev></my-dev>
-
组件注册语法糖
- 注册 可以直接省略 extend 直接用对象进行替代
Vue.component('cpn1', {
template: `
<div>
<h2>cpn1标题</h2>
<p>cpn1内容</p>
</div>
`
});
<!--通过id 进行选择器给template属性赋值 替代template中看起来很难受的字符串-->
<script type="text/x-template" id="cpn">
<h3>标题</h3>
<p>内容。。。</p>
</script>
<template id="cpn2">
<h1>标题</h1>
</template>
<script>
Vue.component('my-cpn', {
template: "#cpn"
});
</script>
组件之间的通信
-
props的用法（父组件向子组件传递）
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 注意： 当定义分离模板时需要一个根组件 如果没有根组件则不能正常解析
<!--子组件模板-->
<template id="cpn">
<div>
<p>{{c_movies}}</p>
<h2>{{c_message}}</h2>
<ul>
<li v-for="item in c_movies"> {{item}}</li>
</ul>
</div>
</template>
<!--父组件模板-->
<div id="app">
<!-- props数据来双向绑定父组件中的数据-->
<cpn :c_movies="movies" :c_message="message"></cpn>
</div>
<script>
// 子组件
const cpn = {
template: "#cpn",
// 父亲组件向子组件传递数据
// 第一种 数组方式
// props: ['c_movies', 'c_message'],
// 第二种 对象方式
props: {
// 1.类型限制
// c_movies: Array,
// c_message: String,
// 2.提供一些默认值
c_message: {
// 数据类型
type: String,
// 默认值
default: '这个是消息数据',
// 是否必选参数
required: true,
},
c_movies: {
type: Array,
default: []
}
},
data() {
return {}
}
};
// 父组件
const vm = new Vue({
el: "#app",
data: {
message: '信息',
movies: ['海王', '海贼王', '庆余年', '神话']
},
components: {
cpn: cpn
}
});
</script>
- this.$emit的用法（子组件向父组件传递事件）
<!--子组件模板-->
<template id="cpn">
<div>
<button v-for="item in categories" @click="bthClick(item)">
{{item.name}}
</button>
</div>
</template>
<!--父组件模板-->
<div id="app">
<!--监听子组件事件-->
<!--监听到子组件事件后 如果绑定父组件的method若不传item 则默认就是item 不是event-->
<cpn @item_click="cpn_click"></cpn>
</div>
<script>
// 子组件
const cpn = {
template: "#cpn",
data() {
return {
categories: [
{id: '1', name: '热门推荐'},
{id: '2', name: '手机数码'},
{id: '3', name: '家用家电'},
{id: '4', name: '电脑办公'},
{id: '5', name: '生活日用'},
]
}
},
methods: {
bthClick(item) {
console.log(item);
// 发射子组件的自定义事件到父组件 传递item参数
this.$emit("item_click", item)
}
}
};
// 父组件
const vm = new Vue({
el: "#app",
data: [],
components: {
cpn
},
methods: {
// 接受item参数
cpn_click(item) {
console.log('监听到了来自子组件的事件！');
console.log(item);
}
}
});
</script>
