渐进式 JavaScript 框架 --摘自官网
# 渐进式 1. 易用 html css javascript 2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性 # 总结 Vue 是一个javascript 框架 # 后端服务端开发人员: Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM 注意: 日后在使用Vue过程中页面中不要在引入Jquery框架 htmlcss--->javascript ----->jquery---->angularjs -----> Vue # Vue 作者 尤雨溪 国内的v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
<div id="app" class="aa"> <span >{{ message }}</span> <span v-text="message"></span> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ message:"百知欢迎您" } }) </script> # 总结 1.{{}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
<div id="app" class="aa"> <span>{{message}}</span> <br> <span v-text="message"></span> <br> <span v-html="message">xxxxxx</span> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ message:"<a href=''>百知欢迎您</a>" } }) </script>v-show:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
<div id="app"> <!-- v-show: 用来控制标签展示还是隐藏的 --> <h2 v-show="false">百知教育欢迎你的加入!</h2> <h2 v-show="show">百知教育欢迎你的加入这是vue中定义变量true!</h2> <input type="button" value="展示隐藏标签" @click="showmsg"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ show:false, }, methods:{ //定义时间 showmsg(){ this.show = !this.show; } } }) </script> # 总结 1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏 2.在v-show中可以通过boolean表达式控制标签的展示课隐藏v-if: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM
<div id="app"> <h2 v-if="false">百知教育</h2> <h2 v-if="show">百知教育欢迎你的加入</h2> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ show:false }, methods:{ } }); </script>v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性
<div id="app"> <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="baizhilogo.jpg" alt=""> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"百知教育官方logo!!!!", showCss:true, }, methods:{ } }) </script> vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名
<div id="app"> <img width="300" :title="msg" :class="{aa:showCss}" :src="src" alt=""> <input type="button" value="动态控制加入样式" @click="addCss"> <input type="button" value="改变图片" @click="changeSrc"> </div> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"百知教育官方logo!!!!", showCss:true, src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg" }, methods:{ addCss(){ this.showCss= !this.showCss; }, changeSrc(){ this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg"; } } }) </script>v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)
<div id="app"> <span>{{ user.name }} {{ user.age }}</span> <br> <!-- 通过v-for遍历对象 --> <span v-for="(value,key,index) in user"> {{index}} : {{key}} : {{value}} </span> <!-- 通过v-for遍历数组 --> <ul> <li v-for="a,index in arr" > {{index}} {{a}} </li> </ul> <!-- 通过v-for遍历数组中对象 :key 便于vue内部做重用和排序 --> <ul> <li v-for="user,index in users" :key="user.id"> {{index+1}} {{ user.name }} === {{ user.age }} ==== {{ user.content }} </li> </ul> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { user:{name:"小陈",age:23}, arr:["北京校区", "天津校区", "河南校区"], users:[ {id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"}, {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"}, ] }, methods: {} }); </script> # 总结 1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一keyv-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
<div id="app"> <input type="text" v-model="message"> <span>{{message}}</span> <hr> <input type="button" value="改变Data中值" @click="changeValue"> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:"" }, methods: { changeValue(){ this.message='百知教育!'; } } }); </script> # 总结 1.使用v-model指令可以实现数据的双向绑定 2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定 # MVVM架构 双向绑定机制 Model: 数据 Vue实例中绑定数据 VM: ViewModel 监听器 View: 页面 页面展示的数据修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制
# 1.常用的事件修饰符 .stop .prevent .capture .self .once .passive用来阻止事件冒泡
<div id="app"> <div class="aa" @click="divClick"> <!--用来阻止事件冒泡--> <input type="button" value="按钮" @click.stop="btnClick"> </div> </div> <!--引入vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: {}, methods: { btnClick(){ alert('button被点击了'); }, divClick(){ alert('div被点击了'); } } }); </script>用来阻止标签的默认行为
<!--用来阻止事件的默认行为--> <a href="http://www.baizhibest.com/" @click.prevent="aClick">百知教育</a>用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡
<!--只触发标签自身的事件--> <div class="aa" @click.self="divClick"> <!--用来阻止事件冒泡--> <input type="button" value="按钮" @click.stop="btnClick"> <input type="button" value="按钮1" @click="btnClick1"> </div>once 一次 作用: 就是让指定事件只触发一次
<!-- .prevent : 用来阻止事件的默认行为 .once : 用来只执行一次特定的事件 --> <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符
# 按键修饰符 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right用来在触发回车按键之后触发的事件
<input type="text" v-model="msg" @keyup.enter="keyups">用来捕获到tab键执行到当前标签是才会触发
<input type="text" @keyup.tab="keytabs">Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax
中文网站:https://www.kancloud.cn/yunye/axios/234845
安装: https://unpkg.com/axios/dist/axios.min.js
并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果
//1.创建一个查询所有请求 function findAll(){ return axios.get("http://localhost:8989/user/findAll?name=xiaochen"); } //2.创建一个保存的请求 function save(){ return axios.post("http://localhost:8989/user/save",{ username:"xiaochen", age:23, email:"xiaochen@zparkhr.com", phone:13260426185 }); } //3.并发执行 axios.all([findAll(),save()]).then( axios.spread(function(res1,res2){ //用来将一组函数的响应结果汇总处理 console.log(res1.data); console.log(res2.data); }) );//用来发送一组并发请求生命周期钩子 ====> 生命周期函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Qji56OC-1603280053940)(Vue实战.assets/lifecycle.png)]
# Vue生命周期总结 1.初始化阶段 beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性 console.log("beforeCreate: "+this.msg); }, created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法 console.log("created: "+this.msg); }, beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译 console.log("beforeMount: "+document.getElementById("sp").innerText); }, mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面 console.log("Mounted: "+document.getElementById("sp").innerText); } 2.运行阶段 beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据 console.log("beforeUpdate:"+this.msg); console.log("beforeUpdate:"+document.getElementById("sp").innerText); }, updated(){ //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致 console.log("updated:"+this.msg); console.log("updated:"+document.getElementById("sp").innerText); }, 3.销毁阶段 beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁 }, destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁 }组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不能业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。
说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件
//1.开发全局组件 Vue.component('login',{ template:'<div><h1>用户登录</h1></div>' }); //2.使用全局组件 在Vue实例范围内 <login></login> # 注意: 1.Vue.component用来开发全局组件 参数1: 组件的名称 参数2: 组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素 2.使用时需要在Vue的作用范围内根据组件名使用全局组件 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加
第一种开发方式 //局部组件登录模板声明 let login ={ //具体局部组件名称 template:'<div><h2>用户登录</h2></div>' }; const app = new Vue({ el: "#app", data: {}, methods: {}, components:{ //用来注册局部组件 login:login //注册局部组件 } }); //局部组件使用 在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 //注册局部组件 } }); //4.局部组件使用 在Vue实例范围内 <login></login>作用:props用来给组件传递相应静态数据或者是动态数据的
单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网
在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
//1.声明组件 const login = { template:"<div><h1>百知教育 {{ uname }}</h1> <input type='button' value='点我' @click='change'></div>", data(){ return { uname:this.name } }, props:['name'], methods:{ change(){ //调用vue实例中函数 this.$emit('aaa'); //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用') } } } //2.注册组件 const app = new Vue({ el: "#app", data: { username:"小陈" }, methods: { findAll(){ //一个事件函数 将这个函数传递给子组件 alert('Vue 实例中定义函数'); } }, components:{ login,//组件的注册 } }); //3.使用组件 <login @find="findAll"></login> //=====> 在组件内部使用 this.$emit('find')路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
用来在vue中实现组件之间的动态切换
作用:用来替换我们在切换路由时使用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渲染成指定的标签作用:用来在第一次进入界面是显示一个默认的组件
const router = new VueRouter({ routes:[ //{ path:'/',component:login}, { path:'/',redirect:'/login'}, //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示 推荐使用 { path:'/login', component:login}, { path:'/register', component:register}, ] });通过?号形式拼接参数
<router-link to="/login?id=21&name=zhangsan">我要登录</router-link>组件中获取参数
const login = { template:'<h1>用户登录</h1>', data(){return {}}, methods:{}, created(){ console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name); } }; 第二种方式传递参数 restful通过使用路径方式传递参数
<router-link to="/register/24/张三">我要注册</router-link> var router = new VueRouter({ routes:[ {path:'/register/:id/:name',component:register} //定义路径中获取对应参数 ] });组件中获取参数
const register = { template:'<h1>用户注册{{ $route.params.name }}</h1>', created(){ console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name); } };测试路由
<router-link to="/product">商品管理</router-link> <router-view></router-view>命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。
注意:在Vue cli 中一切皆组件
