vue的作用
渐进式的前端框架(里面的框架按需获取)
vue特点
1.解耦视图和数据
2.双向数据绑定
3.可复用的组件:常用的按钮和表格
4.前端路由数据:页面跳转
5.状态管理
6.虚拟DOM
引入方式
1.使用CDN连接引入,加载速度更快
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2.下本地载源码引入
将文件保存到项目中,拖到引用的js文件中
3.使用NPM
使用npm将依赖下载到Node中
vue初始用
<head><meta charset="UTF-8"><title>Title</title><!--下载引入文件--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><h1>{{msg}}</h1><h1>{{msg}}</h1>
</div>
</body>
<script>let v=new Vue({el:"#app", //指定将元素挂在到哪里,前面的el是固定的data:{ //data是固定的msg:"我是一个app"}})
</script>
**el属性:**指定将元素挂载到那个元素上,可以使用id,class,标签属性
data属性:里面存储的数据,可以是多个对象和多个数组
**{{msg}}😗*插值表达式,避免了数据写死,里面可以写三元运算表达式
MVVM模型
是一种前端的思想
**含义:**数据模型改变视图模型也会跟着改变
三层模型
view层:展示信息
Model层:数据层
VM:视图模型,是view层和model层的桥梁
插值表达式
作用的地方:在文本内容中
防止文本数据写死
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><h1>{{msg}}</h1><div>{{name}}-{{age>18?'成年':'未成年}}{{phone.substring(0,3)+'****'+phone.substring(7)}}</div>
</div>
</body>
<script>new Vue({el:"#app", //指定将元素挂在到哪里,前面的el是固定的data:{ //data单词 是固定的msg:"我是一个app",name:"张三",age:21,phone:123456789132}})
</script>
v-bind属性
作用的地方:在标签中
数据的单向绑定
只有数据的变动影响视图,视图的变动不能影响数据
语法:
v-bind:标签属性名="data中的属性名称"
简写的方式
:标签属性名="data中的属性名称"
示例
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><h1>{{title}}</h1><!--path绑定数据,里面已经有vue 的属性,不需要增加{}--><img v-bind:src="path" width="100px"><!--path绑定数据,简写方式--><img v-bind:src="path" width="100px"><br><a :href="code">叩丁狼</a></div>
</body>
<script>new Vue({el:"#app", //指定将元素挂在到哪里,前面的el是固定的data:{ //data是固定的msg:"我是一个app",title:"单向绑定",path:"../imgs/2.png",code:"https://www.wolfcode.cn"}})
</script>
v-on属性
作用的地方:写在标签中
作用:事件绑定
语法:
v-on:事件类型="methods中的回调函数"
简写方式
@:事件类型="methods中的回调函数"
**methods:**用于写处理函数和方法,也是一个对象
注意事项:
1.里面的this表示的vue对象,不是这个事件源
2.获取事件源对象:e(事件源).currentTarget
3.事件对象
3.1 直接在绑定事件处, 传⼊ $event(固定) 对象即可3.2 绑定事件时, 直接绑定响应处理函数的引⽤, ⽽不是调⽤该函数
<body>
<div id="app"><h1>{{title}}</h1><!--事件绑定,这里不是调用函数--><button v-on:click="deleteConfirm()">删除</button><!--事件绑定简写: @事件名="回调函数" --><button @click="deleteConfirm($event,2)">删除2</button><!--鼠标移入移出事件--><div style="height: 100px;width:400px;background: red "@mouseover="over()" @mouseout="out()"></div></div>
</body>
<script>let v = new Vue({el: "#app", //指定将元素挂在到哪里,前面的el是固定的data: { //data是固定的title: "单向绑定"},methods: {//添加方法,函数,也是一个对象deleteConfirm: function (e, id) {console.log("删除确认");//this表示的是vue的这个对象,不是一个事件源console.log(this)//通过事件对象拿事件源console.log(e.currentTarget)//获取传递过来的的自定义参数console.log(id)},over: function () {console.log("鼠标移入");},out: function () {console.log("鼠标移出");}}})
</script>
v-if和v-show属性
作用:用于元素的显示和隐藏,写在标签里面
区别:
v-if:当值设为false的时候,浏览器中会将这个标签进行删除达到隐藏的效果
**v-show:**将值设为false的时候,使用css中的样式style-display:none隐藏标签
<div id="app"><h1>元素的显示和隐藏</h1><!--v-if:若是false,从页面上删除该标签v-show:如果是false,则使用css中的样式style=display:none隐藏标签--><button v-if="true">删除</button><button v-show="collect" @click="change(false)">点击收藏</button><button v-show="!collect" @click="change(true)">取消收藏</button></div>
</body>
<script>let v = new Vue({el: "#app", //指定将元素挂在到哪里,前面的el是固定的data: { //data是固定的title: "元素的显示和隐藏",collect: "true"},methods: {change:function (collect) {//修改data中的collect的值//访问data中的数据:this.属性名this.collect = collect;}}})
区别
v-for循环遍历
**作用地方:**写在标签当中,对数组或者对象进行遍历
**数组遍历:**可以得到数组的元素和索引值
**对象遍历:**的到对象的属性值和属性名
语法:
v-for=(遍历后的别名,索引) in 遍历的对象
示例:
<div id="app"><h1>{{title}}</h1><table width="50px" border="1"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>邮箱</th></tr><!--格式是 v-for=(遍历后的别名,索引) in 遍历的对象--><tr v-for="(stu,index) in students"><!-- 正常书写<th>{{stu.id}}</th><th>{{stu.name}}</th><th>{{stu.age}}</th><th>{{stu.email}}</th>--><!--简写方式,对遍历后的对象再进行遍历--><td v-for="(value,name) in stu">{{value}}</td></tr></table>
</div>
</body>
<script>let v=new Vue({el:"#app", //指定将元素挂在到哪里,前面的el是固定的data:{ //data是固定的title:"循环遍历",students:[{id:1, name:"张三", age:"25", email:"zhangsan.com"},{id:2, name:"张三2", age:"26", email:"zhangsan2.com"},{id:3, name:"张三2", age:"27", email:"zhangsan3.com"}]}}
</script>
v-model数据双向绑定
作用地方:只能作用于表单元素(input,select,button…)
**过程:**改变视图数据的时候model的数据也会改变,model数据改变的时候视图数据会改变
语法:
<表单元素 v-model="数据的名称">
<div id="app"><h1>{{title}}</h1>账号:<input type="text" v-model="formData.username"><br>地址:<select v-model="forData.address"><option value="sc">四川</option><option value="sc">广东</option><option value="sc">沈阳</option></select>
</div>
</body>
<script>let v = new Vue({el: "#app", //指定将元素挂在到哪里,前面的el是固定的data: { //data是固定的title: "数据双向绑定",formData: {username: "admin",address: "gd"}}})
</script>
vue组件化开发
**作用:**达到代码复用,责任分离,可维护性高
1.将页面拆分成一个个小的,可复用的组件
2.组件化的代码更加方便组织和管理,扩展性更强
1.全局组件
这个组件在全局的任何地方都可以进行调用(首先这个调用的标签元素必须得挂载,否则使用无效)
步骤:
1.将写好的html标签代码作为模板,放在组件中,需要使用的地方就直接进行调用
2.先写好html标签之后再将其放在全局组件中,使用的Vue.component,都写在
/*注册全局组件*/
//全局组件 Vue.component('组件别名', {配置对象});Vue.component("mybtn", {template: ' <button style="width: 100px;height: 40px;background:skyblue">按钮</button>'})
3.添加了组件之后,仍然需要挂载元素
let v = new Vue({el: "#app", //指定将元素挂在到哪里,前面的el是固定的data: { //data是固定的title: "全局组件",}
});
4.在使用的地方进行调用,使用别名这个标签进行调用
<div id="app"><h1>{{title}}</h1><mybtn></mybtn>
</div>
2.局部组件
注意事项:
1.在挂载元素里面引用组件
2.引用的名称不能使用大写字母
步骤
1.定义组件(只能使用tempate标签定义)
<!--定义组件-->
<template id="mytable"><table border="1"><tr><th>ID</th><th>名称</th><th>年龄</th><th>操作</th></tr><tr><td>1</td><td>xiaoliu</td><td>18</td><td><a href="#">编辑</a> |<a href="#">删除</a></td></tr></table>
</template> 2.使用template属性注册组件,let命名无规定
//注册组件let tableTemp={template: "#mytable"}
3.挂载元素并且引用组件(components)
//挂载元素let v=new Vue({el:"#app",data:{title:"全局组件"},//引用组件,在挂载里面使用进行引用components:{mytable:tableTemp}})
4.在元素中调用组件
<div id="app"><h1>{{title}}</h1>
<!-- 调用组件-->
<mytable></mytable>
</div>
组件通讯
父组件传子组件(操作步骤和局部组件一样)
父组件可以传递多个props给子组件
在注册组件的时候,使用props来获取父组件的数组或者对象,要指定父组件的类型
//注册组件
let tableTemp = {template: "#mytable",//获取父组件的数组或者对象,指定父组件的类型props: {list: Array}
}
必须对父组件和子组件进行绑定
<div id="app"><h1>{{title}}</h1><!--将父组件中的数据绑定到子组件里面 必须绑定--><mytable :list="students"></mytable>
</div>
子组件传父组件
子组件就是一个表格,点击删除按钮的时候会触发自定义事件,子组件将id传递给父组件,父组件接收到参数后执行相应的处理
具体的步骤
1.通过点击删除按钮执行自定义点击事件,并执行函数传入id
<a href="JavaScript:;" @click="del(stu.id)">删除</a>
2.在注册组件的时候定义一个方法用于接收id并执行相应的,里面使用this.$emit(“自定义事件名称”,id)
//注册组件
let tableTemp = {template: "#mytable",//获取父组件的数组或者对象,指定父组件的类型props: {list: Array},//子组件定义一个函数methods:{del:function (id) {console.log("子组件的id:"+id);//触发的事件类型,触发指定的事件,将id传给父组件,id就是响应函数的参数this.$emit('ondelete',id);}}
}
3.使用绑定事件将id传递给父组件(必须进行绑定),父组件根据id调用相应的函数
<!--绑定事件-->
<mytable :list="students" @ondelete="doDelete"></mytable>
4.父组件在Vue中执行相应的函数
,methods: {doDelete:function(id){console.log("父组件接收到子组件的参数:"+id)}}
![公司中生存奥秘诙谐解说[ZT]](/images/no-images.jpg)
