小白的vue学习之路

最新推荐文章于 2023-10-16 12:32:14 发布

weixin_37770640

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_37770640/article/details/80669187

版权

#### 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，不能包含
* 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>

spice用法：

#### 父子组件使用
* 父和子，使用的是父，被用的是子
* 父需要声明子组件，引入子组件对象，声明方式如下

```javascript
import 子组件对象 from './xxx.vue';

{
components:{
组件名:子组件对象
}
}

* 全局组件，使用更为方便，不需要声明，直接用
* 在main.js中引入一次，在main.js中使用 `vue.component('组件名',组件对象);`
* 所有的组件就可以直接通过组件名，使用

#### 父传子
* 父组件通过子组件的属性将值进行传递
- 方式有2:
+ 常量: prop1="常量值"
+ 变量: :prop2="变量名"
* 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{{prop1}}
- 在js中应该如何使用prop1？ this.prop1获取

main.js

//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)

main.js

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

weixin_37770640

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
小白的vue学习之路

指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-prev-cloakv-once#### vue介绍* 2014年诞生,2013年react,09年angularjs* 作者尤雨溪* 核心概念: 组件化双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持* angular核心： ...
复制链接

扫一扫