vue快速复习
教程地址: https://www.bilibili.com/video/av27969216
v-cloak 一般加入到标签中结束编译后自动消失
v-text v-text会完全替换标签中的值,而{{mes}}只替换花括号中的内容
v-html 可以将htlm标签替换
v-bind:title="mytitle" 的简写为 :title="mytitle" 用于绑定属性的指令
v-on 用于绑定事件 缩写是 @
v-model 是双向绑定而v-bind是单向绑定
v-for 是用于循环遍历数据
v-if 是直接在代码中用 注释 替换了原莱的代码
v-show 是在代码中加入 display:none
@click.stop 可以有效阻止冒泡事件产生
@click.prevent 阻止默认行为
@click.capture 添加事件监听时使用时间捕获模式
@click.self 只有点击自身才触发事件
@click.once 点击事件只执行一次
在vue中绑定样式有两种方式, v-bind:class 和 v-bind:style
钩子和指令
<input text="" value="" v-jujiao v-yanse/><!--从左到右依次执行--> <input text="" value="" v-use_jq:advs11ds /> //钩子函数的代码上下位置并不影响执行顺序 Vue.directive('yanse',{ bind:function(temp_zhi){//当指令绑定到元素的时候执行 temp_zhi.focus();//DOM还没加载完毕的时候无法绑定到指令 }, inserted:function(temp_zhi){//DOM加载完毕的时候执行 $(temp_zhi).css("color","#000"); $(temp_zhi).css("background-color","#ccc"); $(temp_zhi).attr("style","border:#ccc solid 1px;");//JQ直接覆盖了style }, updated:function(temp_zhi){//当Vnode更新的时候,会执行,可能会触发多次 console.log(1); } }); Vue.directive('jujiao',{ bind:function(el){//当指令绑定到元素的时候执行 el.focus();//DOM还没加载完毕的时候无法绑定到指令 }, inserted:function(el){//DOM加载完毕的时候执行 el.focus(); $(el).css("background-color","yellow"); $(el).attr("style","border:red solid 1px;");//JQ直接覆盖了style }, updated:function(el){//当Vnode更新的时候,会执行,可能会触发多次 console.log(1); } }); Vue.directive('use_jq',{ bind:function(temp_zhi,temp_name){//当指令绑定到元素的时候执行 $(temp_zhi).attr("style","border:red solid 1px;");//JQ直接覆盖了style console.log(temp_name.arg);//教程地址:https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数参数 }, }); new Vue({ el: '#app', data: { list:[ {id:1,name:'a'}, {id:2,name:'b'}, {id:3,name:'c'}, ] }, methods:{ ceshi(){ alert('1');//键盘抬起事件 }, f_two(){ alert('按下弹起D');//@keyup.键盘码 D的js键盘码是68 } } })
生命周期
<div id="app"> <input text="text" v-model:value="msg"/> <div id="xuexi">{{msg}}</div> <!-- 生命周期钩子也叫声明周期函数也叫生命周期事件 --> </div> <script> new Vue({ el: '#app', data: { msg:"aa" }, methods:{ show(){ console.log('执行了show'); }, }, beforeCreate(){//实例完全被创建之出来之前会执行它 //this.show();在beforeCreate执行之前data数据和methods中的函数都还没有被初始化 console.log('执行了beforeCreate'); }, created(){//date和methods初始化后执行的函数 this.show(); }, beforeMount(){//date和methods初始化成功,但还没渲染到页面中 console.log(document.getElementById('xuexi').innerText);//输出{{msg}}而不是aa //beforeMount执行的时候页面中的msg还没有被替换为aa }, mounted(){//表示一切准备就绪 console.log(document.getElementById('xuexi').innerText);//输出aa而不是{{msg}} }, beforeUpdate(){ console.log('修改之前');//data中的数据改变之前执行,也就是data中的数据已经改变但还未渲染到页面中 }, updated(){ console.log('修改之后');//data中的数据改变之后执行,data中的数据已经渲染到页面中 }, beroreDestroy(){ alert(1); console.log('beroreDestroy'); }, destroyed(){ alert(2); console.log('destroyed'); } }) </script>
Ajax
<div id="box"> <input type="button" @click="getinfo()" value="点我异步获取数据(Get)"> <input type="button" @click="postinfo()" value="点我异步获取数据(Post)"> </div> <script type = "text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ getinfo:function(){ //发送get请求 this.$http.get('http://xiapubm.kehu90.com/alone/xuexivue.html').then(function(res){ document.write(res.body); },function(){ console.log('请求失败处理'); }); }, postinfo:function(){ //发送 post 请求 this.$http.post('http://xiapubm.kehu90.com/alone/xuexivue.html',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); } </script>
组件化和模块化
<div id="app"> <xue-xi-la></xue-xi-la> <xuexi></xuexi> <xue-xi></xue-xi> <ceshi></ceshi> </div> <template id="tmpl"> <h1>这是通过template元素在外定义的组件结构,这个方式有代码只能提示和高亮</h1> </template> <div id="app1"> <xuexi></xuexi> </div> <script type = "text/javascript"> //组件化:是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一 //模块化:是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用 //使用Vue.extend 来创建全局的Vue组件 var zhujian_la = Vue.extend({ template:'<h3>这是1组件</h3>' }) //使用Vue.component('组件的名称','创建出来的组件模板对象') Vue.component('xueXiLa',zhujian_la)//注册组件的用驼峰命名,使用的时候用-隔开 Vue.component('xuexi',zhujian_la) Vue.component('xueXi',zhujian_la) Vue.component('ceshi',{ template:"#tmpl"//在外定义组件 }) var vm = new Vue({ el:'#app', }); var vm = new Vue({ el:'#app1', }); </script>
定义私有组件
<div id="app"> <xue-xi-la></xue-xi-la> <xuexi></xuexi> <xue-xi></xue-xi> <ceshi></ceshi> <login>这条是报错的,不存在的组件</login> </div> <template id="tmpl"> <h1>这是通过template元素在外定义的组件结构,这个方式有代码只能提示和高亮</h1> </template> <div id="app1"> <xuexi></xuexi> <login></login> <canshu></canshu> </div> <script type = "text/javascript"> //组件化:是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一 //模块化:是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用 //使用Vue.extend 来创建全局的Vue组件 var zhujian_la = Vue.extend({ template:'<h3>这是1组件</h3>' }) //使用Vue.component('组件的名称','创建出来的组件模板对象') Vue.component('xueXiLa',zhujian_la)//注册组件的用驼峰命名,使用的时候用-隔开 Vue.component('xuexi',zhujian_la) Vue.component('xueXi',zhujian_la) Vue.component('canshu',{//组件可以有自己的data数据,组件的data和实例的data有点不一样, //实例中的data可以为一个对象,但是组件中的data必须是一个方法 //组件中的data除了必须是一个方法之外,这个方法内部必须返回一个对象才行 template:'<h4>{{zujianmsg}}</h4>', data:function(){ return { zujianmsg:'组件中自己定义的数据' }; } }) Vue.component('ceshi',{ template:"#tmpl"//在外定义组件 }) var vm = new Vue({ el:'#app', }); var vm2 = new Vue({ el:'#app1', data:{}, components:{//定义内部私有组件 login:{ template:'<h1>私有组件</h1>' } } }); </script>
组件切换
<style> .ball{ width:15px;height:15px;border-radius:50%;background:red; } </style> <body> <div id="app"> <a href="#" @click="flag=true">登录</a> <a href="#" @click="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> <!--vue提供了component来展示对应名称的组件--> <!--component是个占位符, :is属性,可以用来指定展示的组件的名称--> <!--因为 :is 后面是默认作为表达式来解析的,但login组件名称又是一个字符串,所以必须加冒号--> <component :is="'login'"></component> </div> <script type = "text/javascript"> Vue.component('login',{ template:"<h3>登录组件</h3>" }) Vue.component('register',{ template:"<h3>注册逐渐</h3>" }) var vm = new Vue({ el:'#app', data:{ flag:true } }); </script>
父组件向子组件传值和data与props的区别
<div id="app"> <com1 v-bind:parentmsg="msg"></com1> </div> <script type = "text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:'这是父组件' }, methods:{}, components:{ com1:{ data(){//子组件中的data数据并不是通过父组件传递过来的,而是子组件私有的 //例如子组件通过ajax返回的数据都可以放在data身上,props是只读,data可以修改 return { title:'123', content:'456' } }, template:'<h1 @click="change">这是子组件--{{title}}--{{parentmsg}}</h1>', //组件中的props中的数据,都是通过父组件传递给子组件的 props:['parentmsg'],//把父组件传递过来的parentmsg属性现在props数组中定义一下,这样才能使用这数据 methods:{ change(){ this.title="被修改" //this.parentmsg="被修改"//这条语句加上会警告,因为 props的参数应该是只读而不要去修改它 } } } } }); </script>
使用ref获取DOM元素
<style> .ball{ width:15px;height:15px;border-radius:50%;background:red; } </style> <body> <div id="app"> <input type="button" value="获取元素" @click="getElemtnt" /> <h3 ref="ceshi">哈哈</h3> <h3 ref="suibian">suibian</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el:'#app', data:{ }, methods:{ getElemtnt(){ console.log(this.$refs.ceshi.innerText); console.log(this.$refs.suibian.innerText); } } }); </script>
vue的路由功能
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <a href="#/login">登录</a> <!--router-view 可以当做是一个占位符--> <router-view></router-view> <!--router-link 渲染后直接变成a标签--> <router-link to="/login">登录啊</router-link> <router-link to="/register">注册啊</router-link> </div> <script type = "text/javascript"> var login = { template:'<h4>登录---{{$route.query.id}}</h4>', created(){//组件也有自己的生命周期 console.log(this.$route);//通过访问 .html#/login?id=1 地址可以输出路由的参数 id = 1 } } var register = { template:'<h4>注册</h4>', } var aa = { template:'<h4>aa</h4>', } var bb = { template:'<h4>bb</h4>', } var account = { template:'<h4>account</h4>', } var routerObj = new VueRouter({ routes:[//路由规则 //每个路由规则都是一个对象,这个规则对象都有连个必须的属性, //1、path表示监听,哪个是路由连接地址 //2、component 如果路由是当前匹配到的path,表示component属性对应的那个组件就显示 {path:'/login',component:login}, //component的值必须是一个 组件模板对象 {path:'/register',component:register}, { path:'/account', component:account, children:[ {path:'aa',component:aa},//访问地址 .html#/account/aa {path:'bb',component:bb},//访问地址 .html#/account/bb 和 {path:'/account/bb',component:bb} 没区别 ] } ] }); var vm = new Vue({ el:'#app', data:{ }, methods:{ getElemtnt(){ console.log(this.$refs.ceshi.innerText); console.log(this.$refs.suibian.innerText); } }, router:routerObj //将路由规则对象,注册到vm实例上用来监听url地址的变化,然后展示对应组件 }); </script>
watch监听数据变化
<div id="app"> <input type="text" value="" v-model="ceshi" /> <div>{{ceshi}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el:'#app', data:{ ceshi:'aa' }, methods:{ }, watch:{//使用这个属性可以监视data中数据的变化,然后处罚指定函数 ceshi:function(newVal,oldVal){//第一个参数为新值,第二个为旧值 console.log(newVal); console.log(oldVal); console.log(this); } } }); </script>
computed-计算属性的使用和3个特点
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <input type="text" value="" v-model="diaoyong" /> <div>{{ceshi}}</div> <div>{{zouni}}</div> <div>{{diaoyong}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el:'#app', data:{ diaoyong:'a' }, methods:{ }, computed:{//在computed中可以定义一些属性,这些属性叫做 计算属性 ,本质就是一个方法,只不过 //在使用这些属性的时候吧他们的名称直接单做属性来使用,并不会吧计算属性单做方法来调用 'ceshi':function(){ let temp_num = 15+5; return temp_num; }, //注意:计算属性在引用的时候一定不要加()去调用,直接把他单做 普通 属性 去使用就好了 zouni:function(){ let temp_num = 1+5; return temp_num; } } }); </script>
教程例子打包:https://files.cnblogs.com/files/xhrs/vue教程例子.zip
npm教程地址:https://www.bilibili.com/video/av13816480
1、安装nodejs
2、命令行输入 npm-v 弹出版本信息说明安装成功
3、新建文件夹在 文件夹中打开命令行 输入 npm init -y 会在该文件夹下生成一个 package.json文件
4、命令行输入 npm i jquery 会自动在 文件夹下下载 jquery