Vue_2
ES6的新特性
es6 新特性: Ecmascript5 ——-es5，Ecmascript6 ——-es6
语法：1.变量声明 var 、let 、const
- var：使用这个关键字声明变量是全局变量,出现变量混淆
- let：作用:用来声明一个局部变量 作用范围:从定义出开始,到定义的代码块结束 [推荐]
- const：作用: 用来定义一个常量 作用: 变量一旦被定义不能被修改 特殊说明:修饰number字符串时变量的值不能修改，修饰对象的时候对象的地址不能修改，但是对象中的值可以随便修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
</body>
</html>
<!--引入vue-->
<script src="js/vue.js"></script>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"es6语法解析"
}
});
function test(){
for(let i=0;i<10;i++){
console.log("function inner: ",i)
}
console.log("function out: ",i)
const name = "xiaochen"; //常量
const user = {name:"小三"}; //const修饰对象: 对象地址不能改变 对象中属性值可以随意修改
console.log(user.name);
user.name="小明";
console.log(user.name);
}
test();//调用函数
//字符串模板 通过反引号使用字符串模板 ``
let html = "<div>\n" +
" <h1>我是标签</h1>\n" +
" <input type=\"text\" name=\"name\">\n" +
" <button>我是按钮</button>\n" +
" </div>";
let html1 = `<div>
<h1>我是标签</h1>
<input type="text" name="name">
<button>我是按钮</button>
</div>`;
console.log(html);
console.log(html1);
//es6 function(){} 注意:匿名函数存在自己this，简化写法：()=>{}箭头函数 注意:箭头函数没有自己this
//es5 对象定义方式 es6中对象的扩展:当对象属性名和属性赋值变量名一致时,可以省略变量名不写
let name = "小陈";
let age = 23;
let bir = "2012-12-12"
const user = {name:name,age:age,bir:bir} //es5
console.log(user);
const stu = {name,age,bir};//es6：属性名和赋值变量名一致,省略不写赋值变量名
console.log(stu);
</script>Vue中的组件（component）
组件的作用
组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。
组件使用
全局组件注册
说明 : 全局组件注册给根Vue实例,日后可以在任意Vue实例的范围内使用该组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<!--使用全局组件:根据组件名称使用全局组件-->
<login></login>
<login></login> <!--组件复用-->
<register></register>
</div>
</body>
</html>
<!--引入vue-->
<script src="js/vue.js"></script>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script>
//开发全局组件
//参数1: 组件名称 参数2: 指定组件内容的配置对象
//注意：在定义组件名称时，如果组件名称使用了驼峰命名法，在使用组件时，单词必须全部小写，同时使用-作为分隔使用
//如：组件名为usersList 使用： <users-list></users-list>
Vue.component('login',{
template:"<div><h3>用户登录组件</h3> <button>+</button></div>", //template: 模板 用来书写组件中html代码 注意:template属性必须存在一个根容器,有且只有一个根容器
});
Vue.component('register',{
template:"<div><h3>用户注册组件</h3></div>"
});
const app = new Vue({
el:"#app",
data:{},
methods:{},
computed:{}
});
</script>注意：
- Vue.component用来开发全局组件 参数1: 组件的名称 参数2: 组件配置{} template:’’用来书写组件的html代码 ，template中必须有且只有一个root元素
- 使用时需要在Vue的作用范围内根据组件名使用全局组件
- 如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用
局部组件注册
说明 : 通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加
第一种开发方式：
//1.局部组件登录模板声明
let login ={ //具体局部组件名称
template:'<div><h2>用户登录</h2></div>'
};
//2.注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件
//login,
}
});
//3.局部组件使用 在Vue实例范围内
<login></login>第二种开发方式
//1.声明局部组件模板 template 标签 注意:在Vue实例作用范围外声明
<template id="loginTemplate">
<h1>用户登录</h1>
</template>
//2.定义变量用来保存模板配置对象
let login ={ //具体局部组件名称
template:'#loginTemplate' //使用自定义template标签选择器即可
};
//3.注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{ //用来注册局部组件
login:login //注册局部组件
//login,
}
});
//4.局部组件使用 在Vue实例范围内
<login></login>组件中定义数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--使用组件-->
<users></users>
</div>
</body>
</html>
<!--引入vue-->
<script src="js/vue.js"></script>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script>
//++++++++++++++++++++++++++定义局部用户列表组件配置对象+++++++++++++++++++++++++++++++++++
const users = {
template:"<div><h3>用户列表-{{count}}-{{name}}-{{countSqrt}}-{{countSqrt}}</h3><button @click='changeCount'>+</button><ul><li v-for='item in items'>{{item}}</li></ul></div>",//用来定义组件html内容
data(){ //组件的数据---------------------
//出现:The "data" option should be a function that returns a per-instance value in component definitions.
//用来给当前组件定义一些列数据 注意:在组件中定义数据只能在当前组件可用
return {
count:0,
name:"小陈",
//items:["河南校区","北京校区","天津校区"],
items:[],
};
},
methods:{ //组件的方法----------------------
//用来给当前组件定义一系列事件
changeCount(){
this.count++;
}
},
computed: {//组件的计算属性---------------------
//用来给当前组件定义一些列计算属性 用来对页面中结果进行二次计算处理时候
countSqrt(){
console.log("------");
return this.count*this.count;}
},
created(){
//组件的生命周期函数------------------------
//组件已经注入data methods computed 相关数据方法
//发送请求
// axios.get("/xxx").then(res=>{
// this.items = res.data;
// });
this.items = ["江苏校区","上海校区","深圳校区"];
},
};
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
const app = new Vue({
el:"#app",
data:{
msg:"vue 组件中定义 data methods computed 生命周期函数等",},
methods:{},
computed:{},
components:{ //在这里注册组件都为局部组件
users,//注册组件 等价于 users:users,
}
});
</script>总结：
组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this指向的是当前组件的实例
props的使用
在组件上声明静态数据传递给组件内部
作用 : props用来给组件传递相应静态数据或者是动态数据的
//1.声明组件模板配置对象
let login = {
template:"<div><h1>欢迎:{{ userName }} 年龄:{{ age }}说明：{{ldes}}</h1></div>",
data(){
// 注意: 在props中定义数据,不能再data中重复定义,如果重复定义优先使用props中数据为主
return {
ldes: this.des,//将接受到的数据des赋给组件data 中的ldes
};
},
props:['userName','age','des'] //props作用 用来接收使用组件时通过组件标签传递的数据
}
//2.注册组件
const app = new Vue({
el: "#app",
data: {},
methods: {},
components:{
login, //组件注册
}
});
//3.通过组件完成数据传递
<login user-name="小陈" age="23" des="hello syc"></login>总结：
- 使用组件时可以在组件上定义多个属性以及对应数据
- 在组件内部可以使用props数组生命多个定义在组件上的属性名，日后可以在组件中通过 方式获取组件中属性值
在组件上声明动态数据传递给组件内部
//1.声明组件模板对象
const login = {
template:'<div><h2>欢迎: {{ name }} 年龄:{{ age }}</h2></div>',
props:['name','age']
}
//2.注册局部组件
const app = new Vue({
el: "#app",
data: {
username:"小陈陈",
age:23
},
methods: {},
components:{
login //注册组件
}
});
//3.使用组件
<login :name="username" :age="age"></login>
//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化prop单行数据流
单向数据流 **: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
- 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
向子组件中传递事件
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body>
<div id="app">
<h1>信息: {{msg}} 年龄:{{age}} 用户信息:{{user}}</h1>
<!--使用局部组件 传递一个父组件中事件
@别名: 代表想组件中传递一个事件事件名为aa value="findAll" 代表将父组件中指定事件传递给子组件中-->
<login @aa="findAll" @test="test"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
//如何将父组件中事件传递给子组件中：
// 1.在使用事件时使用@别名="传递事件名"
// 2.在组件中调用传递的事件时 this.$emit('别名')
//定义一个登录组件配置对象
const login = {
template:"<div><h3>用户登录-{{msg}}</h3><button @click='test'>点我触发事件</button></div>",
data(){
return {
msg:"我是子组件的信息",
age:34,
user:{id:2,name:"王五",age:12,bir:"2012-12-12"}
};
},
methods:{
test(){
alert('子组件中定义的事件....');
//调用父组件中findAll事件 aa 事件别名:
this.$emit('aa');//$emit用来调用父组件中相关事件
this.$emit('test',this.msg,this.age,this.user);//$emit用来调用父组件中传递的事件 并传递参数
}
}
};
const app = new Vue({
el:"#app",
data:{
msg: "Vue 中组件开发",
name: "小陈",
age:23,
user:{id:1,name:"小张",age:22}
},
methods:{
findAll(){
alert('父组件中定义的事件...');
},
test(msg,age,user){
//alert('父组件中定义test的事件....'+msg+age);
console.log("msg: ",msg);
console.log("age: ",age);
console.log("user: ",user);
this.age = age;
this.msg = msg;
this.user = user;}
},
computed:{},
components:{
login,
}
});
</script>组件的中插槽使用
（插槽）slot: 作用: 用来扩展自定义组件让组件变得更加灵活，用来个性化定制自己的组件 ，注意:插槽必须配合组件才能使用
说白了，就是在使用组件时，用自定义的内容替换插槽的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--使用组件-->
<login><h5 slot="aa">我是用户自定义slot内容</h5><h5 slot="bb">我是自定义bb中内容</h5></login>
<hr>
<login><button slot="bb">+++++</button> <div slot="aa">xxxxx</div></login>
<hr>
<login><input type="text"></login>
<hr>
<login></login>
<hr>
<login></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
const login = {
template:"<div><slot name='aa'><span>默认扩展</span></slot>" +
"<h3>用户登录界面</h3>" +
"<slot name='bb'><span>默认扩展</span></slot>" +
"</div>"
};
const app = new Vue({
el:"#app",
data:{
msg:"slot 插槽的使用"
},
methods:{
},
computed:{},
components:{
login,
}
});
</script>页面：
slot 插槽的使用
我是用户自定义slot内容
用户登录界面
我是自定义bb中内容
xxxxx
用户登录界面
+++++
默认扩展
用户登录界面
默认扩展
默认扩展
用户登录界面
默认扩展
默认扩展
用户登录界面
默认扩展Vue中的路由（VueRouter）
路由
路由 : 根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
作用
用来在vue中实现组件之间的动态切换
使用路由
vue中router路由使用:
-
1.引入vue router 核心js文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 2.创建路由对象并自定义路由规则
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/login',component:login}, //path: 路由的路径 component:路径对应的组件
{path:'/register',component:register}
]
});3.将路由对象注册到vue实例
const app = new Vue({
el: "#app",
data: {
username:"小陈",
},
methods: {},
router:router //设置路由对象
});4.在vue实例作用范围内使用router-view指定路由组件显示位置
<!--显示路由的组件-->
<router-view></router-view><a href="#/login">点我登录</a>
<a href="#/register">点我注册</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 系列课程</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--指定路由组件在哪里展示 router-view 标签 作用:就是用来展示路由对应组件显示的位置 -->
<router-view></router-view>
<a href="#/users">用户管理</a>
<a href="#/emps">员工管理</a>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script><!--引入路由-->
<script src="js/axios.min.js"></script>
<script>
//创建组件配置对象
const users = {
template:"<div><h3>用户管理</h3><table border='1'><tr><th>编号</th><th>姓名</th><th>年龄</th><th>生日</th><th>操作</th></tr><tr><td>1</td><td>张三</td><td>23</td><td>2012-12-12</td><td><a href=''>删除</a></td></tr></table></div>",
data(){return {};},
methods:{},
computed:{},
created(){}
};
const emps = {
template:"<div><h3>员工管理</h3><table border='1'><tr><th>编号</th><th>姓名</th><th>年龄</th><th>生日</th><th>操作</th></tr></table></div>"
};
//创建路由对象并定义路由规则
const router = new VueRouter({
routes:[
{path:'/users',component:users}, //用来定义具体的某个组件路由规则 path: 用来指定对应请求路径 component:指定路径对应的组件
{path:'/emps',component:emps}
] //用来定义一些列规则
});
const app = new Vue({
el:"#app",
data:{
msg:" vue 中router(路由)的使用"
},
methods:{},
computed:{},
components:{},//注册局部,
router:router,//用来注册路由配置
});
</script>默认路由
作用 : 用来在第一次进入界面是显示一个默认的组件
const router = new VueRouter({
routes:[
//{ path:'/',component:login},
{ path:'/',redirect:'/login'}, //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示 推荐使用
{ path:'/login', component:login},
{ path:'/register', component:register},
]
});router-link使用
作用 : 用来替换我们在切换路由时使用a标签切换路由
好处 : 就是可以自动给路由路径加入#不需要手动加入
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link># 总结:
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 系列课程</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--通过a标签进行路由切换-->
<a href="#/users">用户管理</a>
<a href="#/emps">员工管理</a>
<!--router-link 标签 作用:用来替换a标签 实现路由切换 好处:书写路径时不需要显示加入# to: 用来指定路由路径 tag: 默认为a标签 用来指定router-link底层渲染标签 -->
<router-link to="/users" tag="button">用户管理(link)</router-link>
<router-link to="/emps" tag="button">员工管理(link)</router-link>
<!--router-view 路由组件展示位置-->
<router-view></router-view>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.min.js"></script>
<script>
//创建路由配置对象
const users = {
template:"<div><h1>用户管理页面</h1></div>"
};
const emps = {
template: "<div><h1>员工管理页面</h1></div>"
};
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/users'},//默认路由规则 redirect:(路由路径重定向)
{path:'/users',component:users},//用户组件路由规则
{path:'/emps',component:emps},//员工组件路由规则
]
});
const app = new Vue({
el:"#app",
data:{
msg:" vue 中router(路由) router-link标签的使用"
},
methods:{},
computed:{},
router,//注册路由
});
</script>代码方式切换路由
<!--2.通过js代码的方式动态切换路由 this.$router.push("切换的路由路径")-->
<button @click="test">测试切换路由</button>
<!--router-view显示路由组件-->
<router-view></router-view>
<script>
//创建路由配置对象
const users = {
template:"<div><h1>用户管理页面</h1></div>"
};
const emps = {
template: "<div><h1>员工管理页面</h1></div>"
};
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/users'},//默认路由规则 redirect:(路由路径重定向)
{path:'/users',name:"users",component:users},//用户组件路由规则 name:路由名称
{path:'/emps',name:"emps",component:emps},//员工组件路由规则 name:路由名称 必须唯一
]
});
const app = new Vue({
el:"#app",
data:{
msg:" vue 中router(路由) router-link标签的使用"
},
methods:{
test(){//切换路由的方法
console.log("test");
console.log(this);
//this.$router.push("/emps");// 代表切换路由路径
//this.$router.push({path:'/users'});//根据路径方式切换路由
this.$router.push({name:"emps"});//根据名称方式切换路由 [推荐]
}
},
computed:{},
router,//注册路由
});
</script>路由中的参数传递
//创建路由对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},//默认路由规则 redirect:(路由路径重定向)
{path:'/login',name:"login",component:login},//用户组件路由规则 name:路由名称
{path:'/register/:id/:name',component:register} //定义路径中获取对应参数
]
});第一种方式:
1.通过？号形式拼接参数
<router-link to="/login?id=21&name=zhangsan">我要登录</router-link>2.在组件中获取参数
const login = {
template:'<h1>用户登录</h1>',
data(){return {}},
methods:{},
created(){
console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
}
};第二种方式 :
1.通过使用路径传递参数
<router-link to="/register/24/张三">我要注册</router-link>2.在组件中获取参数
const register = {
template:'<h1>用户注册{{ $route.params.name }}</h1>',
created(){
console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name);
}
};嵌套路由
1.声明最外层和内层路由
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
//声明组件模板
const product={
template:'#product'
};
const add = {
template:'<h4>商品添加</h4>'
};
const edit = {
template:'<h4>商品编辑</h4>'
};2.创建路由对象含有嵌套路由
const router = new VueRouter({
routes:[
{path:'/',redirect:'/products'},//默认路由
{ path:'/product',
component:product,
children:[
{path:'add',component: add},
{path:'edit',component: edit},
]
},
]
});3.注册路由对象
const app = new Vue({
el: "#app",
data: {},
methods: {},
router,//定义路由对象
});4.测试路由
<router-link to="/product">商品管理</router-link>
<router-view></router-view>给个饭钱？
- Post link: http://sovzn.github.io/2021/04/10/Vue-02/
- Copyright Notice: All articles in this blog are licensed under unless otherwise stated.
若没有本文 Issue，您可以使用 Comment 模版新建。
GitHub Issues