#### vue介绍
* 2014年诞生,2013年react,09年angularjs
* 作者 尤雨溪
* 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持
* angular核心: 模块化 双向数据绑定(脏检测:一个数组($watch))
- 开发一个登陆的模块,登陆需要显示的头部、底部、中部
- 组件:组合起来的一个部件(头部、底部、中部)
- __细分代码__
+ 头部: 页面、样式、动态效果
+ 代码: template style script
* 框架对比,建议学完vue再看
* https://cn.vuejs.org/v2/guide/comparison.html#React
#### 数据流
* 1向:js内存属性发生改变,影响页面的变化
* 1向:页面的改变影响js内存属性的改变
#### vue中常用的v-指令演示
* 常用指令
* v-text 是元素的innerText只能在双标签中使用
* v-html 是元素的innerHTML,不能包含<!--{{xxx}} -->
* v-if 元素是否移除或者插入
* v-show 元素是否显示或隐藏
* v-model 双向数据绑定,v-bind是单向数据绑定(内存js改变影响页面)
class结合v-bind使用
* 需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:class="xxx"
* v-bind:属性名="表达式",最终表达式运算结束的结果赋值给该属性名
- 简化的写法是: `:属性名="表达式"`
* class:结果的分类
- 一个样式: 返回字符串(三元表达式和key和样式的清单对象)
<div v-bind:class="isRed?'red':'green'" >单个class</div>
- 多个样式:返回对象(样式做key,true或flase做值)
<div v-bind:class="{'red':true,'big':true}" >多个个class</div>
### v-for的使用
* 可以使用操作数组 (item,index)
<li v-for="(stu,index) in stus"></li>
data()
return{
stus:[{name:'zxy',score:'100'},{name:'yp',score:'600'}]
}
* 可以使用操作对象 (value,key,index)
<li v-for="(value,key,index) in person"></li>
data(){
return{
person:{name:'古爷',alise:'leaf'}
}
* key 是类似trank by 的一个属性
* 为的是告诉vue,js中的元素,与页面之间的关联,当识图删除元素的时候,是单个元素的删除而不是正版替换,所以需要关联其关系,设置(必须,性能)
<template>
<div>
<ul>
<li v-for="(stu,index) in stus" v-bind:key="index">index:{{index}},stu:{{stu}}</li>
</ul>
使用对象方式:</hr>
<ul>
<li v-for="(value,key,index) in person" v-bind:key="index">index:{{index}},stu:{{stu}>
value:{{value}} key:{{key}} index:{{index}}</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
stus:[{name:'zxy',score:'100'},{name:'yp',score:'600'}],
person:{name:'古爷',alise:'leaf'}
}
},
methods:{
}
}
</script>
<style>
</style>
漂亮的列表:
<template>
<div>
<ul>
<li v-for="(hero,index) in heros" :key="index" :class="{'A':'red','B':'blue','C':'green','D':'yellow'}[hero.score]">
{{hero.name}},{{hero.score}}<button v-on:click="de(index)">删除英雄</button></li>
</ul>
姓名:<input type="text" v-model="name"></br>
成绩:<input type="text" v-model="score"></br>
<button v-on:click="add()">添加英雄</button>
</div>
</template>
<script>
export default {
data(){
return{
name:'',
score:'',
heros:[{name:'zxy',score:'A',id:'1'},{name:'dy',score:'B',id:'2'},{name:'yp',score:'C',id:'3'},{name:'zs',score:'D',id:'4'}]
}
},
methods:{
add(){
//获取页面的值
this.heros.push({name:this.name,score:this.score});
this.name='';
this.score='';
},
de(index){
this.heros.splice(index,1)
}
}
}
</script>
<style>
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
</style>
* 父和子,使用的是父,被用的是子
* 父需要声明子组件,引入子组件对象,声明方式如下
```javascript
import 子组件对象 from './xxx.vue';
{
components:{
组件名:子组件对象
}
}
* 全局组件,使用更为方便,不需要声明,直接用
* 在main.js中引入一次,在main.js中使用 `vue.component('组件名',组件对象);`
* 所有的组件就可以直接通过组件名,使用
* 父组件通过子组件的属性将值进行传递
- 方式有2:
+ 常量: prop1="常量值"
+ 变量: :prop2="变量名"
* 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{{prop1}}
- 在js中应该如何使用prop1? this.prop1获取
//1:引入 vue
import Vue from 'vue';
import App from './global.vue';
//引入子组件对象
import headerVue from './componets/header.vue';
import bodyVue from './componets/body.vue';
import footerVue from './componets/footer.vue';
//声明全局组件
Vue.component('headerVue', headerVue); //注册一个组件,第一个参数是名称,在template中使用,第二个参数是实际的对象,显示成什么内容,具备什么功能
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);
new Vue({
el: 'div',
// render:function(c){
// return c;
// }
render: c => c(App)
//1:当参数是一个的时候,小括号可以省略
//2:当代码只有一行且是返回值的时候,可以省略大括号
})
global.vue
<template>
<div>
<header-vue textone="da"></header-vue>
<body-vue :texttwo="text2"></body-vue>
<footer-vue></footer-vue>
</div>
</template>
<script>
export default{
data(){return{
text2:"hahhh"
}},
methods:{
}
}
</script>
<style>
</style>
header.vue
<template>
<div>
我是{{textone}}头
<button @click="show">从js中获取父组件值</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},
//接受父组件值参数的设置
props:['textone'],
methods:{
show(){
alert(this.textone)
}
}
}
</script>
<style scoped>
div{
height: 100px;
background-color: yellowgreen;
}
</style></style>
body.vue
<template>
<div>
我是body,{{texttwo}}
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:['texttwo']
}
</script>
<style scoped>
div{
height: 100px;
background-color: skyblue;
}
</style>
#### 看文档的对象分类
* 1:全局的代表Vue.的
* 2:实例的代表this.或者new Vue().
* 3:选项代表 new Vue() 的参数
* 或者 export default里边的属性
#### 子向父组件通信(vuebus)(扩展)
* 通过new Vue()这样的一个对象,来$on('事件名',fn(prop1,pro2))
* 另一个组件引入同一个vuebus, 来$emit('事件名',prop1,pro2)
app.vue
<template>
<div>
<subVue></subVue>
<button @click="listen">爸爸焦急的听电话</button>
</div>
</template>
<script>
//引入连接器
import connect from './connector.js';
export default {
data(){
return {
text2:'哈哈呵呵'
}
},
methods:{
listen(){
connect.$on('phone',function(msg){
console.log(msg);
})
}
},
}
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: yellowgreen;
}
.blue{
background-color: skyblue;
}
.pink{
background-color: hotpink;
}
</style>
conector.js
import Vue from 'vue';
var connector = new Vue();
export default connector;
sub.js
<template>
<div>
我是底部
<button @click="callDaddy">打电话给爸爸</button>
</div>
</template>
<script>
import connect from '../connector.js';
export default {
data(){
return {
}
},methods:{
callDaddy(){
//发射信号
connect.$emit('phone','62分钟来');
}
}
}
</script>
<style scoped>
div{
height: 100px;
background-color: hotpink;
}
</style>
#### 总结
* -1 : 已经存在node_modules包,已经存在package.json和webpack.config.js文件
* 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系
* 2: 在index.html div->id->app
* 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系
* 4: 在main.js中引入vue,和相关组件对象
* 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容
* 6: 编写app.vue
- template 在2.x以后只能有一个根节点
- script 格式是export default { 选项options}
- style 加上scoped(范围的)之后,样式只对当前模板有效
* 7: 可能使用组件或者使用函数或者接受参数
- options(根属性):
+ data 是一个函数,return一个对象
+ methods 是一个对象,key是函数名,value是函数体
+ components 是一个对象,key是组件名,值是组件对象
+ props 是一个数组,元素是多个接受的参数
* 8: 套路总结
- 凡是在上边可以使用的东西
- 在下边就可以使用,通过this.
* 9:启动
- 进入到webpack.config.js 和package.json文件同在的目录中启动命令行
- 输入: 正在编码: npm run dev
+ 报错: 检查命令所执行的../ 上级,是否存在node_modules目录及相关文件是否存在
- 输入: 代码编写完毕,提交到公司 : npm run build