__vue__

简介扫盲

css预处理器

用一种专门得编程语言 进行web页面样式设计，在通过编译器转化为正常得css文件

• SASS 基于Ruby
• LESS 基于NodeJS

ECMAScript标准

js框架

• jQuery
• Angular 模块化开发：搞出来一个前端的mvc—> view data vm:数据双向绑定
• React 新概念：虚拟DOM —> 利用内存
• VUE （综合Angular和React的优点）计算属性—>vue特色
• Axios 前端通信框架 可用Ajax替代

ui框架

js构建工具

• Babel js编译工具 主要用于浏览器不hi吃的ES新特性 比如用于编译TypeScript
• WebPack 模块打包器 打包 合并 按序加载

三端统一

nodejs

Node.js就是一个服务端的，非阻断式io的、事件驱动的、异步刷新的Javascript运行环境。
而npm则是Node.js中内置的js包的管理工具。

基础

v-bind

指令带有v-表示vue提供的特殊属性 绑定元素

v-bind:元素

v-if v-else v-for

v-on

指令监听DOM事件

<button v-on:cl ick="sayHi">
    click me
</button>

<script>
	var vm = new Vue({
        el:"#id",
        data:{
            msg:Hi
        },
        methods:{
            sayHi:function(event){//加了监听事件
                alert(this.msg);
            }
        }
    });
</script>

七大常用属性

• el
• data
• template
• methods
• render
• computed
• watch

v-model

用于双向绑定

在、、 元素上创建绑定

v-model会忽略所有表单元素的value checked selected特性的初始值而将Vue实例的数据作为数据来源 ，

应通过JavaScript在组件的data选项中声明初始值。

v-clock

解决闪烁问题

<style>
    [v-clock]{
        display:none;
    }
</style>

vue组件

类似于自定义标签

<script>
Vue.component(“zhan",{
	template:'<li>Hello</li>'              
});
</script>

<zhan></zhan>

props

用于在component中接收参数值

Axios

异步通信框架：用在浏览器和NodeJS，实现了ajax异步通信

使用

<script>
	var vm = new Vue({
        el:'#vue',
        mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(console.log(response.data)));
        }
    })
</script>

vue实例里加

data(){

​ return

}

将ajax的data传到前端

计算属性

计算出来的结果 保存在属性中，

内存中运行：虚拟DOM

computed:{  //注意不要和methods中的方法同名
	currentTime:function(){
		return Date.now();
	}
}

插槽slot

<script>
	Vue.component("todo",{
       template:
        '<div>\
        	<slot naem="todo-title"></slot>\
        	<ul>\
        		<slot name="todo-items"></slot>\
        	<ul>\
        <div>'
    });
    Vue.component("todo-title"，{
        props:['title'],
        template:'<div>标题</div>'
    });
    
    Vue.component("todo-items"，{
        props:['item'],
        template:'<div>java</div>'
    });
    
    var vm = new Vue({
       el:"#id",
       data:{
           	title:"标题"，
       		todoItems:['111','2222','3333']     
       }
    });
</script>

<div id="id">
    <todo>
    	<todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item='item'></todo-items>
    </todo>
</div>

自定义内容分发

三大模块

1. 前端
2. Vue实例
3. 组件

Vue.component("do",{
	props:[],
	template:'',
	methods:{
		自定义事件名:function(参数){
		//	this.$emit  自定义事件fenfa
			this.$emit("自定义事件名",参数)；
	}
})

vue-cli脚手架开发

快速生成vue模板

vuex做状态管理

vueui

• ElementUI 饿了么出品
• ICE 阿里巴巴出品

webpack

当下热门的前端资源模块化管理和打包工具 他可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源

vue-router路由

import VueRouter from 'vue=router'
//显示使用
Vue.use(VuRouter);
//导出路由
export default new VueRouter({
	routes:[
		{
			//路由路径  @RequestMapping
			path:'/',  
			name:'',
			//跳转的组件
			Component:
			//嵌套路由
			Children:[{path:'',comppnent:},{}]
		}
	]
});

<router-link to='/main'>首页</router-link>
<router-view></router-view>

所以，如果只是在开发过程中需要的工具或者文件我们 使用 --save-dev 即可；

如果是项目运行必须的文件，那么就使用 --save就好了；

element-ui

sass加载器

cnpm install sass-loader node-sass --save-dev 

生命周期图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y9L6EGg5-1634091661570)(C:\Users\17795\AppData\Roaming\Typora\typora-user-images\image-20210909142055608.png)]

挂钩子

 <script>
	export default {
        beforeRouteEnter:(to,from,next)=>{
            //操作 进入路由之前
            next();
        },
        beforeRouterLeave:(to,from,next)=>{
             //操作  进入路由之后
            next();
        }
    }
</script>