Vue:
轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
**双向数据绑定:保留了angular的特点,**在数据操作方面更为简单;
组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
坑:
1.淘宝 镜像快,npm,cnpm都可能出问题,多试几次
2.组件必须由同一个父及,就是一个最大的div包着所有自己写的东西,最容易错
<template>
错误!!!!!h1在外面
<div>
<h1>meng</h1>
</div>
<h1>props:{{id}}</h1>
</template>
<template>
<!-- 所有元素都要有标签抱着-->
<div>
<h1>meng</h1>
<h1>props:{{id}}</h1>
</div>
</template>
3.组件名不能大写,用横线隔开,dom会转小写!!
错误示范!!!!!!!!!!Todo-title
<Todo-title slot="todo-title" v-bind:title="title"></todo-title>
Vue.component('Todo-title',{
props: ['title'],
template: '<h3>{{title}}</h3>',
})
先控制台下载:
npm install cnpm -g #淘宝镜像
cnpm install vue-cli -g
淘宝 镜像快,npm,cnpm都可能出问题,多试几次
ElementUI
创建新项目:
vue init webpack vueElement01
名字随便
下面一路no,运行时构建自己搞
cd vueElement01
#安装router
cnpm install vue-router --save-dev
#安装element-ui
cnpm ielement -ui -s
#安装依赖
cnpm install
#安装SASS加载器
cnpm install sass-loder node-sass --save-dev
#上面SASS加载器不行就
npm install --save-dev sass-loader
#因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass
#启动测试
cnpm run dev
下载时间几分钟,耐心等
这时我写的简单界面,新式的不用webpack,非要自己写启动配置类,类名必须是webpack.config.js,并且要在项目的根目录级别,他不可在src里面如下
继续:
父组件向子组件传递数据,用prpos
下面 props:[“mzh”],对应v-bind:mzh="item"
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view-->
<div id="app">
<!--父子组件传值,mzh用props接,用也是mzh-->
<meng v-for="item in items" v-bind:mzh="item"></meng>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component("meng", {
props:["mzh"],
template: '<li>{{mzh}}</li>'
});
//上下传值,最上面的是中间商
var vm=new Vue({
el:"#app",
//model
data:{
items:["A","B","C"]
}
});
</script>
</html>
子组件向父组件传递事件,this.$emit(‘remove123’,index);
绑定时,v-on:remove123,你看子组件接收的 props:[‘item’,‘index’],可以获取当前index,实际调用父组件的removeItem,执行操作
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items"
v-bind:item="item"
@index="index" v-on:remove123="removeItem(index)" v-bind:key="index"></todo-items>
</todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.component('todo',{
template: " <div>\n" +
" <slot name='todo-title'></slot>\n" +
" <ul>\n" +
" <slot name='todo-items'></slot>\n" +
" </ul>\n" +
" </div>"
})
Vue.component('todo-title',{
props: ['title'],
template: '<h3>{{title}}</h3>',
})
//子组件
Vue.component('todo-items',{
props:['item','index'],
template: '<li>{{index}}-------{{item}} <button @click="remove">删除</button></li>',
methods: {
remove:function(index) {
//子组件方法,和上面的v-on对应
this.$emit('remove123',index);
}
}
})
var vm=new Vue({
el: "#app",
data:{
title:"动态列表",
items:["java","spring","mybatis","springboot"]
},
methods:{
removeItem:function (index) {
console.log(this.items[index]);
this.items.splice(index,1);
}
}
})
</script>
</html>
路由设置
1.写组件
2.router下,导入文件,设置路由,名字起好
//去#号
mode:'history',